阅读 217

CSS布局-基础

布局

浮动

浮动元素只会影响后边的标准流元素,不会影响前边的标准流元素。
如果一个盒子内有浮动元素,那么其他的兄弟元素也应该浮动,防止出现问题。

清除浮动

因为父盒子很多请款项,不方便给高度,如果子盒子浮动不占位置,就会造成父盒子高度为0,影响了下面标准流盒子

  • 子盒子是标准流,父盒子虽然没有高度,但是也会通过子盒子撑开父盒子,进而获得高度。
  • 子盒子浮动,脱标,父盒子没有撑开高度就是0,那么下面的标准流盒子就会移上去。

清除浮动的本质

清除浮动就是为了解决父级元素因为子级浮动引起的内部高度为0的问题。清楚浮动之后,父级就可以根据浮动的盒子自动检测高度。父级有了高度就不会影响下面的标准流了。

隔墙法

在最后添加一个标签,设置其clear属性为both。
优点 通俗易懂,书写方便,w3c推荐
缺点 增加许多无意义标签,结构化较差

给父级添加overflow属性

优点 代码简洁
缺点 内容增多的时候,容易造成不会自动换行导致内容被隐藏掉,无法显示出要溢出的元素

父级after伪元素

:after 方式为空元素额外标签法的升级版,好处是不用额外单独添加标签了。
优点 符合闭合浮动思想,结构语义化正确
缺点 由于IE6、IE7不支持:after,使用zoom:1触发hasLayout。
代表网站 百度、淘宝、网易等

父级双伪元素
.clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }
复制代码

优点 代码简洁
缺点 由于IE6、IE7不支持:after,使用zoom:1触发hasLayout。
代表网站 小米、腾讯等

推荐最后两种伪元素的方法清除浮动

定位

四种模式

static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

relative 相对定位

相对于自己原来在标准流中的位置移动的
原来在标准流的区域继续占有,后面的盒子任然以标准流的方式对待它
示例图:

absolute 绝对定位

如果 父级 没有定位 绝对定位子盒子以浏览器为准定位
如果 父级 有定位 绝对定位子盒子 以父级为准移动位置,即将元素依据最近的已经定位(相对、绝对、固定)的父级元素进行定位
示例图:



不保留原来的位置,完全是脱标的

子绝父相 子盒子用绝对定位,父级用相对定位

居中对齐
绝对定位完全脱标,无法直接用margin让其水平居中
所以需要先用left偏移元素的center,然后再减去自身宽度的一半

fixed 固定定位

固定定位是绝对定位的一种特殊形式

完全脱标
只认浏览器的可视窗口--浏览器可视窗口+边偏移来设置元素的位置
* 跟父元素没有任何关系,单独使用的
* 不随滚动条滚动

IE6等低版本的浏览器不支持固定定位

堆叠顺序(z-index)

在使用定位布局时,可能出现盒子重叠的情况。
加了定位的盒子,默认后来者居上,后面的盒子会覆盖在前面的盒子上。
应用z-index层叠等级属性可以调整盒子的堆叠顺序。

未设置定位时,标准流的布局

z-index默认都是0

z-index依次是2、1、0

属性值:正整数或负整数,默认是0。数值越大,盒子越靠上。
数值相等,则按照代码顺序排布。
注意:z-index只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效。

定位改变display属性

display是显示模式,可以改变显示模式有以下方式,

  • 可以用inline-block转换为行内块
  • 可以用浮动float默认转换为行内块(类似,并不完全一样,因为浮动是脱标的)
  • 绝对定位、固定定位和浮动类似,默认转换为行内块

所以说,一个行内块的盒子,如果加了浮动固定定位绝对定位,不用转换,就可以给这个盒子直接设置宽度和高度等。 行内块的宽度和高度会根据盒子内容自适应显示宽高。

注意

ul默认padding-left是40px margin-topmargin-bottom是16px,在开发中要先清除这些属性。

* {
     margin: 0;
     padding: 0;
  }
复制代码
定位模式是否脱标占有位置移动位置基准模式转换(行内块)使用情况
静态static不脱标,正常模式正常模式不能几乎不用
相对定位
relative
不脱标,占有位置相对自身位置移动不能基本单独使用
绝对定位
absolute
完全脱标,不占有位置相对于定位父级移动位置要和定位父级元素搭配使用
固定定位
fixed
完全脱标,不占有位置相对于浏览器移动(注意移动区域是可视窗口范围)单独使用,不需要父级
文章分类
前端
文章标签