Web前端开发004——CSS布局与定位

Web前端开发004——CSS布局与定位

---

一. 布局与定位概述

1.1 盒子模型（元素什么样）

• 页面元素的大小。
• 边框。
• 与其它元素的距离。

1.2 定位机制（元素放在哪）

• 文档流
• 浮动定位
• 层定位

二. 盒子模型

2.1 盒子模型与相关属性

• 页面上的区域、图片、导航、列表、段落等任何元素都可以是盒子。
• 它们占据着一定的页面空间。
• 盒子的组成：内容（content）、高度（height）、宽度（width）、内边距（padding）、边框（border）、外边距（margin）。
• 以上都是CSS的属性，此外除了content以外的属性又有子属性top、bottom、left、right，如padding-left。

2.2 盒子内容溢出——overflow属性

• 当盒子的内容溢出盒子框的时候，要用到overflow属性来处理。
• 属性值

• hidden： 超出的部分不予显示；
• scroll： 显示滚动条；
• auto： 如果有超出，则自动显示滚动条，否则不显示。

2.3 border属性

• border-width：宽度，px、thin、medium、thick
• border-style： 风格，dashed、dotted、solid、double
• border-color：颜色
• border：width style color
• 小例子：用border实现水平分割线：

.line{
			height:1px;
			width:500px;
			border-top:1px solid #e5e5e5;
			}

2.4 padding 和 margin

• 对默认值设零：

*{
	margin:0;
	padding:0;
	}

• 取值：px、%（外层盒子的宽度或高度的百分比）
• 可以用margin:1px 1px 1px 1px;来分别表示top、right、bottom、left的尺寸（这是个顺时针的顺序）。
• margin的合并原则：margin是存在合并问题的，垂直方向上两个盒子的margin会按照大的合并，如一个是1px，另一个是2px那么根据margin的合并，这两个盒子border间距不是3px而是2px。水平方向不会合并。
• 对盒子（如div）水平居中，可以用margin: 0 auto;来实现，图片、文字的水平居中则是前面提到过的text-align:center;来实现。

三. CSS的定位机制

• CSS中存在3种定位机制

• 文档流（flow）（默认）
• 浮动（float）
• 层定位（layer）

3.1 文档流

• 定位原则：从上到下，从左到右，有些元素单独占行。
• 元素分类：block、inline、inline-block。
• 元素类型转换： display属性。

3.1.1 block

• 独占一行。
• height、width、margin、padding均可操作。
• 如：div、p、h1~h6、ol、ul、table、form
• 将其他类型转化成block举例

a{display:block;}

3.1.2 inline

• 不单独占行
• width、height不可操作，大小取决于其所包裹的内容的尺寸。
• 如： span、a
• 注意： 相邻的两个inline类型标签间存在间隙，而block是没有的，因此想去掉间隙，可以在外面套一层block标签，或者干脆改成block形式。至于处理后标签不在一行，可以通过后续的浮动定位解决。

3.1.3 inline-block

• 不单独占一行。
• height、width、margin、padding均可操作。
• 如：img

3.2 浮动

3.2.1 float属性

• 用于实现横向多列的布局，一般用div标签进行操作。
• float属性：left、right、none。
• 有了float元素就会脱离文档的原位，原位置会被释放。

3.2.2 clear属性

• clear就是清除浮动，是清除当前元素左/右侧元素浮动对当前元素的影响。
  
• 类似上图的布局，需要用到clear属性，当给元素1设置float：left时，元素2会贴到元素1后面。所以我们需要清除元素1对元素2产生的影响，给元素2添加一个clear：both或clear：left，这样元素2就会到下一行去了。代码如下

    
    
    
    
    


    
"zero">
        
"one">1
        
"two">2
    
    
"three">3

• 可以取值both、left、right、none（默认）。

3.3 层定位

3.3.1 position属性

• 当前层可以相对哪一层来定位，像图层一样进行定位。
• 属性值

• static： 默认值，即无定位按照正常的文档流排版。
• fixed： 固定定位，相对于浏览器窗口。
• relative：相对定位，相对于直接父元素，脱离正常的文档流，但其文档流中的位置仍然继续保留，无论直接父元素是什么方式，都以其为参照物。
• absolute： 绝对定位，相对于从自己往前看的第一个非static定位的父元素，如果父元素都是static的则以body标签为定位参考，不保留文档流定位的位置。

3.3.2 位置设定属性

• left、right、top、bottom
• z-index：值大的在上面图层，逐层排列。
• 举例：

{
position:fixed;
left:100px;
top:50px;
}

3.3.3 定位的小tips

• 一般是父元素采取相对定位，子元素采用绝对定位，这样修改父元素时子元素也跟着走。
• 层叠的效果可以用定位来实现。

四. 弹性盒子布局 flexbox

• 元素可以拉伸、收缩，页面的适应能力强。
• 一维布局，包括弹性容器、弹性元素，可以嵌套多层。

4.1 弹性容器样式

4.1.1 display

• 定义弹性容器
• 样式中添加display:flex;元素就变成弹性容器。

4.1.2 flex-direction

• 指定布局方式
• 样式中添加flex-direction:row;指定按照从左到右排列；
• 添加flex-direction:row-reverse;指定按照从右到左排列；
• 添加flex-direction:column;指定从上到下排列；
• 添加flex-direction:column-reverse;指定从下到上排列。

4.1.3 flex-wrap

• 定义拆行
• 样式中添加flex-wrap:nowrap;为默认值，即不拆行；
• 添加flex-wrap:wrap;拆行；
• 添加flex-wrap:wrap-reverse;反向拆行。

4.1.4 flex-flow

• 前面两个属性的联合书写：flex-flow:flex-direction flex-wrap;
• 例：flex-flow:row wrap;

4.1.5 justify-content

• 弹性元素在主轴方向上的对齐方式。
• 样式中添加justify-content:flex-start;从行首起始位置开始排列齐；
• 添加justify-content:center;居中排列；
• 添加justify-content:flex-end;从行尾位置开始排列；
• 添加justify-content:space-between;均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点；
• 添加justify-content:space-around;均匀排列每个元素，每个元素周围分配相同的空间。

4.1.6 align-items

• 弹性元素在辅轴方向的对齐方式
• 样式中添加align-items:flex-start;靠上/靠左；
• 添加align-items:center;居中；
• 添加align-items:flex-end;考下/靠右；
• 添加align-items:stretch;去除元素辅轴方向的尺寸，使之与容器对应尺寸相同。这时候元素辅轴方向的尺寸还是不设为妙，以防出错。

4.1.7 align-content

• 设置多行元素在容器中整体对齐的方式。
• 可取值flex-start、flex-end、center、space-between、space-around、stretch。
• 只有多行弹性元素才起作用。

4.2 弹性元素的样式

4.2.1 flex-grow

• 用于定义元素的扩大系数，用于分配容器的剩余空间。
• 默认为0，即元素不占用剩余空间。
• 若取值为n，则表示元素占剩余空间等分后的n份。
• 此时不需要设定元素的高宽，宽度由比例定，高由align-items:stretch;设定。

4.2.2 flex-shrink

• 定义弹性元素的收缩规则。
• 仅在弹性元素默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
• 0是不压缩。
• n按比例收缩，与flex-grow的剩余空间比例配置类似。

4.2.3 flex-basis

• 元素在主轴上的默认尺寸，其优先级高于width属性。

4.2.4 flex

• 前三个属性的合写
• flex:flex-grow flex-shrink flex-basis;

4.2.5 order

• 弹性元素在弹性容器中的排列顺序，数越小排的越靠前。

4.2.6 align-self

• 单个弹性元素在辅轴上的对齐方式（align-items是全元素）。
• auto、flex-start、flex-end、center、baseline、stretch。

五. 网格布局 grid

• 二维布局，网格容器、网格元素

5.1 网格容器样式

5.1.1 display

• 定义网格容器display:grid;

5.1.2 grid-template-columns / grid-template-rows

• 划分网格的行与列，取值：px、%、auto、fr（占比），repeat（）函数
• 举例 grid-template-columns:100px 1fr 2fr repeat(3,1fr);划分出六列，第一列宽100像素，后面按照1：2：1：1：1的比例对剩余空间进行拆分。
• grid-templat-rows是类似的。
• 举例：一个9*9的网格的定义

    

    
"container">
        
"grid-item">1
        
"grid-item">2
        
"grid-item">3
        
"grid-item">4
        
"grid-item">5
        
"grid-item">6
        
"grid-item">7
        
"grid-item">8
        
"grid-item">9
    

5.1.3 grid-template-areas / grid-area

• 给单元格命名，同名单元格会被合并。
• 切记位置要对应好。
• 举例，还是上面的例子

    

    
"container">
        
"grid-item">1
        
"grid-item">2
        
"grid-item">3
    

• 显然命名的步骤是

• 先通过grid-template-areas对每个格子进行命名；
• 在通过grid-area完成格子的合并；
• 细节参考上面的例子。

5.1.4 grid-gap

• 定义网格间距，grid-gap: grid-row-gap grid-column-gap;。
• grid-row-gap：行间距；
• grid-column-gap：列间距。

5.1.5 justify-items、align-items、place-items

1. justify-items：单元格内容的水平位置，start、end、center、stretch（默认）；
2. align-items：单元格内容的垂直位置，start、end、center、stretch（默认）；
3. place-items：属性合写，place-items:align-items justify-items;。
   

5.1.6 justify-content、align-content、place-content

1. justify-content：整个内容区域在容器里的水平位置，start、end、center、stretch（默认）、space-around、space-between、space-evenly；
2. align-content：整个内容区域在容器里的垂直位置，start、end、center、stretch（默认）、space-around、space-between、space-evenly；
3. place-content：属性合写，place-content:align-content justify-content;。
   

5.2 网格元素的样式

5.2.1 grid-column-* / grid-row-*

• *号代表的是start / end
• 设定边界线在网格中的位置，用于确定网格元素位置。
• 举例：
  
• 可以用grid-row:2/3;或grid-area:2/2/3/3;形式替换。

5.2.2 grad-area

• 可以像5.1.3那样根据网格名对网格进行定位。
• 或者像5.2.1那样根据网格线对网格进行定位。

5.2.3 justify-self、align-self、place-self

• 单个网格元素的对齐方式

1. justify-self： 单元格内容的水平位置，start、end、center、stretch；
2. align-self： 单元格内容的垂直位置，start、end、center、stretch；
3. place-self：属性复写，place-self:align-self justify-self;。

六. 伪类选择器的补充

• 伪类选择器的补充