CSS基本布局技术

 

CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。

 

正常布局流（Normal flow）

正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。

HTML元素完全按照源码中出现的先后次序显示

块级（block）元素：显示在前一个元素的下方

内联（inline）元素：像段落中的单词一样，显示在前一个元素的旁边（右侧），超出父级元素的宽度后，就像段落一样自动换行。

 

CSS布局技术会覆盖默认的布局，用css建立布局，会把部分相应的元素移出正常布局流。

 

The display property

所有正常布局流中的元素都有一个display属性值，所谓块级元素其实就是它的display默认值是block

标准值：block,inline,inline-block(行内块，把块级标签放到行内)

两个重要display属性值（常用于多列布局）：

flex

//TODO

grid

//TODO

 

浮动（float）

　　把元素移出正常布局流，并吸附到父元素的左边或右边，正常布局中的位于该元素之下的内容会自动排布在浮动元素周围。

　　浮动元素会创建BFC，这个元素内容占多大地方，这个块就有多大。

 

float属性有四个可选值：

none：不浮动，所有元素的默认值。

left：左侧浮动

right：右侧浮动

inherit：继承父级元素的float属性值

 

使用float实现多列浮动布局：

　　margin:0 auto

　　上下间距0，左右自动居中

设置列宽度：

　　%，创建流式布局（liquid layout），响应式，根据窗口自动等比调整

　　　　ps.了解媒体查询

　　px，创建固定宽度布局（fixed-width-layout）

 

浮动顺序问题：

　　两个同级子元素同时靠右浮动，代码顺序靠前的元素，在最右边。

 

清除浮动解决父级塌陷：

（把上面已经浮起来的元素拉回地面）

• clear属性

　　应用clear属性的元素意味着，在此处停止浮动，会使该元素回归正常布局流，从新的行开始显示。

　　left，right，both属性值，分别停止左，右，左右的浮动

 

　　停止浮动元素与浮动元素之间是紧贴着的，且无法直接用margin来获得间距，是因为浮动元素在正常流之外，不在一个高度上，外边距也就没意义了。

 

　　可以引入一个专门用来清除浮动的div元素，来帮助后续的页面布局。我们约定它的类名为clearfix。

　　　　<divclass="clearfix"></div>

　　更好的方法是，用伪元素来清除浮动

　　　　伪元素，是一个非自闭元素的子元素，不存在于html中，不会被js检测到，其中

　　　　：before，相当于排在最前面的子元素；

　　　　：after，相当于排在最后的子元素。

　　　　给之后要清除浮动的元素加上clearfix这个类名，然后在css中，写如下代码：

.clearfix:after{
content:"";
display:block;
clear:both;
}

• overflow属性

在父级使用overflow属性，设置为hidden，auto（默认visible），可能产生副作用，或使用display的一个新属性值：flow-root，没有副作用

给 <div>display: flow-root 属性后，<div> 中的所有内容都会参与BFC，浮动的内容不会从底部溢出。

 

　　　宽度问题：

多列浮动元素的宽度在设置盒子样式之后，可能不会如我们所愿的并排显示，设置box-sizing: border-box，使盒子的宽度取值（width属性）为 content + padding + border，而不是默认的content宽度。

 

 

定位（position）

默认值：static

相对定位（Relative positioning）:相对定位通常用来对布局进行微调，相对于元素在正常文档流中的位置来移动它，仍然占据正常文档流中的位置。

相对于原位置

定位属性：top, bottom, left, right

绝对定位（Absolute positioning）:将元素从正常布局流中移除，相当于放到另一个图层中，可以相对于body元素的边缘固定，或相对于最近的被非静态定位的父元素来固定。我们称这个被参照的元素为"包含块"（the containing block）。

外边距仍会影响定位的元素，body默认margin为8px，p标签默认上边距为16px。。。

固定定位（Fixed positioning）:与绝对定位类似，但是相对于浏览器视窗来固定位置的。

ps.relative定位可以和float同时设置，但absolute、fixed不能和float同时设置，虽然都是脱离正常流，但float是浮动流，绝对和固定position是定位流。

 

粘性定位（sticky）：pass

 

 

Z-index

• 默认是auto，代表在第0层的位置
• z轴，设置元素的前后堆叠顺序，值越大越靠前
• 子元素的 z-index 值只在父级层叠上下文中有意义
• 就是说，如果父级的z-index是1，子元素的z-index再高，也会被压在与父级同级的其他元素下面

 

• 底层 (farthest from the observer)
• ...
• Layer -1
• Layer 0 (default rendering layer)
• Layer 1
• ...
• 顶层

 

不设置z-index的默认层叠顺序：

1. 根元素的背景和元素
2. 未定位的子块级元素，依照html的解析顺序
3. 浮动元素
4. 未定位的子行内元素
5. 定位的子元素, 依照html的解析顺序

 

 

CSS表格（display: table-caption）

弹性盒子（flex）

网格布局（grid layout）

 

本文大量参考自：https://developer.mozilla.org