最重要的终极问题
布局是用来干什么?
- 答:改变网页上元素的默认摆放位置,将元素们放在我想把它放在的地方。
传统布局是什么?
- 答:指以盒子模型为基础、以 CSS
display
属性和position
属性为辅助的方式。
为什么叫传统布局?
- 因为新出了很多更顺手方便的布局如 flex, grid。
例如,下面截图中有四张图片,四个<img>
元素:
- 整体分:上下顺序:一上三下,上面的居中
- 下面又分:左右顺序:一左二右
- 右边又分:上下顺序;一上一下
你们四兄弟是怎么做到一家人整整齐齐的?
Normal flow
有选择的阅读。
为了解决问题而参阅查询资料的时候,要快速浏览,而不是从上到下事无巨细的像圣经一样虔诚,找到你所需要的,解决问题,over。
-
布局是谁的布局?
- 答:元素,也叫标签。
- 例:就是
p
、div
、img
等
-
最简单的布局是什么?
- 答:把一个个元素从左到右,从上到下摆放。
- 例:比如你正在看到的多段文字(
paragraph
),p
元素,和上一句话之间是从上到下摆放。
-
怎么把元素和简单的布局联系起来?
- 答:指定元素的
display
属性。三个值:inline
、block
、inline-block
。
- 答:指定元素的
-
指定完了之后呢?就行了?
- 答:对。但是难点在于怎么指定。
inline
代表该元素像同一行内的周围的文本一起流动,而文本本身是从左到右的,满了就换行。设置高度宽度没有效果。设置 margin 和 padding 只有左右方向才会导致和其他文字间隔开,上下方向只存在,没效果,除了用来改变border的高度没啥用。block
可设宽高,独占一行,代表这像个箱子一个个摞起来,只不过方向是从上到下。inline-block
代表代表了可以设置宽高的块,又可以在行内从左到右,而且是一个整体,不会换行分开。
- 答:对。但是难点在于怎么指定。
-
为什么我写元素的时候没管什么
display
属性也能从左到右、从上到下布局?
- 答:因为这些元素默认就自带这个属性和值。
- 这就完了?
- 答:想得到更复杂的结果,那就只能引入更复杂的操作方式。基本就这个,更多就需要操作 CSS
position
属性,他有4个值:- static: 默认的文档正常流,就本来自带该咋显示就砸显示。
- relative: 相对于文档正常流种他自己的位置进行变化
- absolute:从正常文档流移除,后面的会填补这个空。自己生成一个块相对于定位
- fixed:相对于窗口定位
- sticky: 我的天,继续刨根问底又涉及到包含块,什么鬼。 本文待整理。
目标
左右布局
子元素左右浮动,父元素添加.clearfix
消除浮动,
.clearfix::after {
content="";
display: block;
clear:both;
}
复制代码
左中右布局
子元素左右浮动,中间margin: 0 auto;
水平居中
- inline 元素:
- 如果不是inline 设置为
display:inline-block
- 再给父元素一个
text-align:center
- 如果不是inline 设置为
- 固定宽度的块级元素:
margin:0 auto;
垂直居中
父元素添加text-align:center
该元素添加vertical-align:center