CSS 布局塌陷以及浮动

楼外楼的世界
161 阅读4分钟

CSS 元素分类

block元素（块元素）

P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进，一些元素将被废除，而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block，像table这种display:table的元素也是block元素。

inline元素（内联元素）

#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON

其他

其中有类特殊的元素：如img|input|select|textarea|button|label等，他们被称为可置换元素（Replaced element）。他们区别一般inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。

  1. 在div设置 line-height 中，其包含的span标签会继承其line-height 高度

  2. 块级元素的宽度默认自适应父元素宽度

  3. 如果有内联又有块级元素，块级元素的高度是由内部文档流中元素的总和决定的。内联元素的高度是由行高和行数决定的。

  4. P块元素标签不允许放div

  5. 块元素不设置宽度的话，设置padding属性不会撑开盒子的宽度--即添加padding的效果，但不会增加额外的宽度

  6. margin or padding?

  • margin 不会显示出元素的背景色，padding会显示出背景色
  • margin 如果父元素不设置border 或者 padding(参考下面) 那么会 引发父元素的塌陷问题

日常知识记录

居中显示

  1. 块级元素居中-- 盒子指定宽度，左右外边距设置为auto；当一个盒子浮动、固定定位、绝对定位，margin:0 auto; 就不能用了
  2. 行内元素或者行内快元素水平居中须臾奥给父元素添加 text-align:center 即可

嵌套块元素垂直外边距的塌陷

两个嵌套关系的快元素(父子关系) 父元素有外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

直白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。 对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

image.png

解决方案：

  1. 为父元素定义上边框
  2. 为父元素定义内边距
  3. 为父元素添加overflow:hidden

不同元素默认自带内外边距

清楚内外边距：padding：0 margin :0 行内元素尽量只设置左右内外边距，不要设置上下内外边距

浮动

  1. 浮动会脱离标准文档流，浮动的盒子不再保留之前的位置，一行装不下就另起一行
  2. 浮动的元素会一行显示并顶部对齐
  3. 浮动的元素具有行内块元素的特性
  4. 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

注意: 一个元素浮动了，理论上其余兄弟元素也要浮动，以防止引起其他问题

如果行内元素添加了浮动，则不需要转换为行内块元素接口设置宽度和高度 如果块级盒子没有设置宽度，默认是和父级一样宽，但是添加了浮动之后，宽度大小根据内容来决定 浮动元素都具有行内块元素的特性

为何要清除浮动？

通常情况下不使用浮动的元素，父元素的高度是由子元素的高度决定的，如果在使用浮动的情况下，子元素设置浮动，父元素需要设置高度，不设置父元素的高度，那父元素高度将为0，引起布局异常

清除浮动的方法

  1. 额外标签法--W3C推荐 但是不常用 在最后一个浮动的元素后再添加一个空的块级元素，并设置clear:both 阻止浮动继续传导；这样父元素也就具有子元素的高度

  2. 父元素添加overflow

给父元素添加overflow:hidden 、scroll 等

  1. 父级添加伪类after
 .clearfix:after {
        content: '';
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
  1. 父级添加双伪元素
 .clearfix:after,
 .clearfix:before {
        content: "";
        display: block;
        clear: both;
    }
avatar
文章
阅读
粉丝