前端

CSS HTML布局笔记

Posted by ONE on April 15, 2018

HTML CSS 布局笔记

块级元素 内联元素

内联元素的高度由内容撑开，对height不敏感

行内元素对定位top/right/bottom/left、宽高width/height、外边距margin不敏感，对边框和内边距敏感。

定位

  • 相对定位，不脱离文档流，文档流中的位置还是保留，只是改变了表现

  • 绝对定位脱离文档流，不保留位置，相对于距离最近的非Static元素位置决定，可以覆盖其他元素

  • 固定定位也不包含在文档流中
  • 父子节点没有脱离文档流的定位，外边距会合并，以最大的边距为主
  • 说道这里对于外边距margin：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

absolute定位结果分两种情况来考虑：

  1. 第一种，元素的某条边没有设置定位属性（left/top/right/bottom）的时候(默认值为auto)，这一边就会将absolute块（包括外边距）按流式布局来排列（如实验1结果所示），当然这个流式布局就会受到内边距padding的影响了。
  2. 第二种，元素的某条边设置了定位属性（left/top/right/bottom）的时候(默认值是auto)，这一边就会被作为脱离文档流的边来处理，会相对于 static 定位以外的第一个父元素（的边框）进行定位，如果这时候设置了外边距，那么这一边相对于基准元素的偏移=定位值（left/top/right/bottom）+ 外边距。效果如实验2所示。作为脱离文档流来处理的边是基于那个基准元素的边框来定位的，当然不受内边距padding的影响。

浮动

脱离文档流中

如果都设置为浮动，按照宽度会集中显示在一行，如果宽度不够，再开一行

如果高度不同，可能造成“卡住”的现象

浮动元素后面的非浮动元素会忽略浮动元素的存在照上排列（如果没用clear both），但后面的浮动元素里的文本内容会受到影响

###对于浮动与定位的位置优先级

  • (fixed == absolute) > float > relative > static
  • 理解为同时设置了position:absolute和float:right。忽略float:right。

###堆叠优先级

  • 定位元素z-index>=0时，
    • (fixed == absolute == relative) > static
  • z-index < 0时
    • (fixed == absolute == relative) < static

理解为兄弟元素一个设置了position：relative,另一个设置了position:static，当relative元素z-index为>=0时，无论static元素设置多少都在relative下面。如果relative设置z-index<0,则论static取什么值relative都会在static下面。

  • 定位元素z-index>=0时
    • (fixed == absolute == relative) > float
  • z-index < 0时
    • (fixed == absolute == relative) < float

理解为兄弟元素一个设置了position：relative,另一个设置了float:left，当relative元素z-index为>=0时，无论float元素设置多少都在relative下面。如果relative设置z-index<0,则无论float的z-index设置多少relative都会在float下面。

  • float > static始终成立。因为z-index只有在定位元素上才起作用，定位元素包括fixed、absolute、relative。
  • fixed == absolute == relative，比较堆叠顺序直接比较z-index大小即可。

参考自

http://www.cnblogs.com/dolphinX/archive/2012/10/13/2722501.html

http://www.cnblogs.com/chuaWeb/p/html_css_position_float.html

FEATURED TAGS
系分作业 前端
FRIENDS