CSS布局技巧

nayeon
93 阅读5分钟

CSS布局技巧

为什么我们需要布局？
当页面上出现了骨架即HTML之后，就需要CSS对其进行布局，以到达更好的视觉效果与用户体验
本文将介绍浮动布局、定位布局、弹性盒子布局等

浮动布局

  • 什么是浮动？
    答：在我们布局的时候用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置
  • 浮动的原理是什么？
    答：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘
  • 如何使用浮动？
    使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认）

影响

  1. 可能会影响到其他的元素，而间接的改变了其他周围元素布局的变化，造成了布局的混乱
  2. 设置了浮动属性的元素脱离了文档流，但是依然可以设置宽高即块元素，但是由于不能像div一样独占一行，所以用inline-block类型来表述会更加合适
  3. 由于元素脱离了原来的文档流，因此当元素外部的父元素是由该元素所撑起来的时候（父元素的宽高比子元素小），就会出现高度坍塌的现象，即父元素因没有设置宽高而在页面中消失

如何解决坍塌？

  1. 可以在元素属性处设置clear属性，就会让该元素的周围不出现浮动元素（不推荐）
  2. 在浮动元素的父元素属性处设置overflow:hidden即可
  3. 还有一种在父元素属性处增加一个伪元素进行解决如clearfloat
.clearfloat:after{
    display:block;
    height:0;
    content:"";
    clear:both;
    visibility:hidden;
}

应用场景

  1. 文字环绕图片效果
  2. 导航栏
  3. 对称的左右结构布局
#adv .one {
    width: 145px;
    height: 50px;
    background-color: white;
    float: left;
}
#adv .two {
    width: 145px;
    height: 80px;
    background-color: white;
    float: right;
}
#adv .three {
    width: 145px;
    height: 20px;
    background-color: white;
    clear: right;
}
<div id="adv">
    <div class="one">
        <p>Advertising slots</p>
    </div>
    <div class="two">
        <p>Advertising slots</p>
    </div>
    <div class="three">
        <p>Advertising slots</p>
    </div>
</div>

效果图 image.png

定位布局

  • 什么时候可以用定位布局？
    当你想这个元素在网页中任意位置时可以考虑这个属性
  • 三种选择的区别？
    static：元素是静止的，没有开启定位（默认值）
    relative：元素开启了相对定位，这时候还处于文档流上的原位，需要进行设置偏移量来进行移位，否则不会有任何变化，因为相对定位是参照元素原本在文档流的位置加上偏移量来确定定位的
    absolute：元素开启了绝对定位，会去寻找离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启绝对定位，根元素就是它的包含块（html，根元素，也叫初始包含块），即会脱离文档流进行定位
    fixed：元素开启了固定定位，并且相对于浏览器的视口而言的，元素位置不会因为滚动条的滚动而发生变化，如果它在左上角，即使滚动条滚动，它依旧在左上角
  • 偏移量怎么理解？
属性属性含义
top定位元素和定位位置上边的距离
bottom定位元素和定位位置下边的距离
left定位元素和定位位置左边的距离
right定位元素和定位位置右边的距离

注意：定位位置指的其实就是元素原本所在的位置，top取正值时，值越大，元素往下，top取负值时，值越大，元素越往上，left去正值时，取值越大，元素越往右，left去负值时，值越大，元素越往左，因此，在布局时，四个值从上下和左右各选一个就可以来布局了

相对定位应用

image.png 说明：这里的图片在外层的div里，设置了top偏移量，进行对齐，这样做的目的是为了让图片和外层元素进行绑定，跟随外层元素进行变化

绝对定位应用

image.png 说明：这里对文字进行隐藏，为了达到鼠标悬浮可以进行展开的动作，就行进行绝对定位在这里，因为文字并不需要在文档流中，但需要注意的是，在外层父元素中需要自行设置开启定位的元素

弹性盒子布局

说在前面的话：弹性盒子是属于最常用的布局方式之一，掌握它是可以说是非常重要的，并且这对之后学习响应式与自适应可以打下很好的基础

  • 弹性盒子好在哪里？
    1. 在不同方向排列元素
    2. 重新排列元素的显示顺序
    3. 更改元素的对齐方式
    4. 动态地将元素装入容器
  • 三个重要概念？
    1. flex 项（也称 flex 子元素），采用 flex 布局的块级标签的子元素
    2. flex 容器，其包含 flex 项，采用 flex 布局的块级标签(div)
    3. 排列方向（direction）， flex 项的布局方向 image.png

应用场景

可以用来做响应式的布局
例如：PC端布局 image.png 例如：移动端布局 image.png

结尾

其实还有一个网格布局，但在这里就不再过多赘述了，因为有一定难度，并且并没有灵活盒子布局如此普遍，感兴趣的话可以去了解一下哟

avatar
文章
阅读
粉丝