CSS页面布局学习

一、盒子模型

看透网页布局的本质

网页布局的过程：

• 准备好网页元素
• 利用CSS设置好盒子样式，并摆到相应的位置上去
• 在盒子里面装内容

1、盒子模型的组成

• 边框border
• 内边距padding
• 外边距margin
• 实际内容content

2、边框

由三部分组成：

• border-width边框粗细
• border-style边框样式
• border-color边框颜色

border-width

通常使用px为单位

border-style

• solid：实线边框
• dashed：虚线
• dotted：点线

border-color

使用三种颜色的表示方式来表示（名称、十六进制、rgb）

边框的简写

border: 1px solid red

三者之间没有顺序

边框各部分可以分开来写，例如：

border-top: 5px solid red

border-top的权重比border更高

表格边框合并

如果在表格中每个单元格存在多个相邻边框而导致边框过粗，可以选择相邻边框合并

使用border-collapse: collapse

注意：边框是加在原有盒子尺寸之外的，会扩大原有的盒子，因此确定盒子大小时如果想要添加边框，需要在盒子大小中减去内边距的值

3、内边距

有四个属性，分别为四个方向的内边距

• padding-left
• padding-right
• padding-top
• padding-bottom

padding属性单写时，可以有1到4个值

• 1个值：上下左右
• 2个值：上下、左右
• 3个值：上、左右、下
• 4个值：上、右、下、左

注意：padding也会影响盒子实际的大小，因此确定盒子大小时如果想要添加内边距，需要在盒子大小中减去内边距的值

padding的应用：为不同字数的按钮设定不同的宽度（利用padding来设置一个字左右固定的内边距）

padding不会撑开盒子的情况：盒子未指定这个宽度或高度的属性，例如：

height: 100px;
padding: 20px;

此时盒子的实际大小会变大为140px，但是宽度与原来一样不变。一般都与父元素相同

4、外边距

控制盒子与盒子之间的距离

margin可以设置上下左右的值，当然也可以像padding一样简写

应用：可以让块级盒子水平居中，但是必须满足两个条件：

• 盒子必须指定了宽度
• 盒子左右的外边距都设为auto

例如：

width: 300px;
margin: 0 auto;

注意：如果想要让行内元素或行内块元素水平居中，只需要让其父元素设置text-align: center即可

外边距合并：（两个竖直方向相邻盒子之间的垂直距离为两个盒子分别的上下外边距的较大者，而不是和）。

解决方案为尽量只给一个盒子添加margin值

**嵌套块元素的塌陷：**子元素设置margin-top时，父元素跟着一起下来（父元素会塌陷较大的外边距值）,也就是说子盒子和父盒子依然贴在一起

解决方案：

• 1、为父盒子添加一个border边框
• 2、为父盒子添加一个padding内边距
• 3、为父盒子添加一个属性：overflow: hidden;

5、清除内外边距

网页元素很多都有默认的内外边距，因此需要先清除网页元素的内外边距

方法：

* {
    margin: 0;
    padding: 0;
}

一般都是css的第一行代码

注意：行内元素尽量只设置左右的内外边距，而不要设置上下的内外边距

PS的使用方法

• ctrl+R：添加标尺
• ctrl+加号/减号：放大/缩小图片（视图上）
• ctrl+空格：拖动图片
• 选区：点击左上角方框并选择区域，可以测量大小
• 吸管工具：取色
• 不同图片格式的特点：jpg：色彩丰富；gif：可以保存透明背景和动画效果；png：结合jpg和gif：既色彩丰富又可以保存透明效果；psd文件：Photoshop工程文件，可以从中复制字、等等

6、小技巧

• 如果想要让盒子与上一个盒子保持一段距离，又不想撑开盒子，就可以使用margin来修改而不是padding
• 如果想要让一张很大的图片缩小以后放在屏幕上，可以直接插入一个img，而不是使用background-image属性（这样不仅盒子的大小不确定，而且也很难缩小图片）
• 盒子不需要全部使用div标签，标题一般都使用h标签，大量文字则可以使用p标签
• 多使用类名，就可以对每个类具体使用样式

7、圆角矩形

可以让盒子变成圆角

使用border-radius属性

border-radius: 10px

让矩形产生了四个角的半径为10px的圆角

产生圆形的方法：border-radius: 50%

设置不同的角：在属性中添加四个值

border:radius: 10px 20px 30px 40px;

分别设置了左上、右上、右下、左下的值

分开写：border-top-right-radius/…

8、盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset

会产生一个影子，影子形状与原元素形状相同。 inset属性会设置盒子本身塌陷称为阴影

盒子阴影不占用空间，不会影响其他盒子的排列

9、文字阴影

可以使用text-shadow设置文字的阴影

二、浮动

传统网页的三种布局方式

• 普通流（标准流）
• 浮动
• 定位

**标准流：**标签按照规定好的默认排列方式，例如：块级元素一行一行显示，行内元素在一行内从左到右按顺序排序，碰到父元素边缘自动换行

标准流无法实现的东西：

• 标签一个在左一个在右
• 有的页面元素定死在屏幕上

为什么需要浮动？

• 如何实现多个块级盒子排列在一行，并且盒子间的间距确定?或者消除(行内块元素本质上属于行内元素，因此margin和padding不能改变一行中的不同行内块元素之间的间距，只能修改这全部的行内块元素与左边的距离)
• 如何实现两个盒子的左右对齐？

应用方式：可以让多个块级元素纵向排列（而不是以行内块元素的显示方式来排列）

1、什么是浮动？

• 用于创建浮动框，将其移动到一边，直到触及包含块的边界或另一个块

float: 属性值（none/left/right）

left和right表示元素向左或向右浮动

2、浮动的特性

• 浮动的元素会脱离标准流，不再保留原先的位置（脱标）（即其他标准流中的元素会无视这个浮动的元素，移动到特定的位置）
• 浮动的元素会一行内显示，且顶端对齐排列
• 浮动的元素会具有行内块元素的特性，不管原先是什么元素（如果行内元素设置了浮动，则不需要转换为行内块元素就可以直接设置高度和宽度，并且当没有设置宽度时的大小根据内容来决定）

3、浮动元素与标准流的父级元素搭配使用

• 先用标准父元素上下排列，之后内部子元素浮动排列左右位置

示例：

<div style="border-color: transparent; margin: 0 auto; height: 400px;width: 500px;">
    <div style="height: 100%; width: 30%; background-color:red; float: left;"></div>
    <div style="height: 50%; width: 35%; background-color: yellow; float: left;"></div>
    <div style="height: 50%; width: 35%; background-color: green;; float: left;"></div>
    <div style="height: 50%; width: 35%; background-color: blue; float: left;"></div>
    <div style="height: 50%; width: 35%; background-color: purple; float: left;"></div>
</div>

4、常见网页布局

浮动布局注意点：

• 通常，先用标准流排列上下元素，再用浮动排列左右元素
• 一个元素浮动了，其余兄弟元素理论上也应该都浮动
• 浮动的盒子只会影响浮动盒子后面的标准流，而不会影响前面的标准流（不会遮挡或占用其位置）

5、清除浮动

如果当需要浮动的元素不确定个数时，我们可以不给父元素设置高度，但是这样会导致父元素高度为0（浮动脱标之后父元素就视为内部没有内容，从而高度降低为0）

清除浮动的本质：清除浮动元素造成的影响

clear: 属性值;

• left：不允许左侧有浮动元素
• right：不允许右侧有浮动元素
• both：两边都不允许

清除浮动的策略：闭合浮动（将浮动只限制在父元素中）

额外标签法

找到最后一个浮动盒子，在其后面添加一个新标签，并添加clear标签

• 优点：通俗易懂
• 缺点：添加许多无意义的标签

注意：添加的这个元素必须是块级元素

父元素overflow法

给父元素添加overflow: hidden

overflow: 属性

hidden/auto/scroll

• 优点：代码简洁
• 缺点：无法显示溢出的部分

after伪元素法

使用css添加一个after伪元素，类似额外标签法，但是是加在父亲身上的

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

较为高级

双伪元素清除浮动

.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear: both;
}

总结

6、CSS属性书写顺序

页面布局整体思路：

• 必须确定版面的核心，我们测量可得知（版心可以自己定义一个类）
• 分析页面中的行模块，以及每个行模块中的列模块
• 一行中的列模块经常浮动布局，先确定每个列的大小，再确定每个列的位置
• 遵循先有结构后有样式的原则

注意点：

• 实际开发中，通常不会直接使用链接a，而是使用li包含a的方法

三、定位

为什么需要定位？

• 某个元素在一个盒子内移动位置，并且压住其他盒子
• 某些元素固定在窗口的固定位置

定位：将盒子定在某一个位置

定位=定位模式+边偏移

**定位模式：**四个属性

**边偏移：**四个属性，表示定位的盒子移动到的最终位置

1、静态定位

元素的默认定位方式，无定位的意思，按照标准流的特性摆放位置

2、相对定位

元素在移动位置的时候，相对于它原来的位置
如果top值，则会下移；如果left值，则会右移

特点：

• 相对于自己原来的位置来移动的
• 原有的位置会保留（不脱标）

3、绝对定位

移动时相对于它的祖先元素来说的

• 没有父元素或父元素没有定位，则以浏览器为准定位
• 如果父元素没有定位，但是爷爷有定位，则会以爷爷为准

特点：

• 绝对定位不再占用原有的位置

口诀：子绝父相（孩子使用绝对定位，父亲需要使用相对定位）

4、固定定位

固定于浏览器可视区的位置，滚动元素时元素的位置不会改变

小技巧：固定定位还可以通过算法固定在版心右侧位置（先让left值设为浏览器宽度的一半，再设置margin-left为版心宽度的一半）

5、粘性定位

可以认为是相对定位和固定定位的混合

position: sticky; top: 10px;

特点：

• 以浏览器的可视窗口为参照点移动元素（固定定位特点）
• 粘性定位占有原先的位置（相对定位特点）
• 必须添加top/left/right/bottom中的一个才有效

兼容性差

6、定位叠放次序

可能出现盒子重叠的情况，使用z-index来设置

z-index: 1

可以是0，正负整数，数值越大就越高

如果属性的值相同，就按照书写的先后顺序来确定，越后越靠前

只有定位的盒子才有z-index属性

7、定位的拓展

1、实现绝对定位的盒子居中（不能使用margin: auto）：使用算法（left设置50%，margin设置-50%，自己宽度的一半）

2、定位特殊特性：

• 行内元素添加绝对或固定定位，可以直接添加高度和宽度
• 块级元素添加绝对或固定定位后，如果不添加宽度高度，默认大小为内容的大小

3、绝对定位或固定定位会完全压住盒子（浮动元素只会压住它下面标准流的盒子，但并不会压住其中的文字，这是因为浮动最初就是为了文字环绕而产生的）

4、元素的显示于隐藏

本质：让一个元素在页面中隐藏或显示出来

1、display属性

• display: none表示隐藏对象
• display: block除了转换为块级元素之外，还有显示元素的意思

隐藏后元素不再占有原来的位置

搭配js可以做很多的网页特效

2、visibility属性

表示可见性

visibility: visible/hidden

元素继续占用原来的位置

3、overflow

对溢出的部分进行显示或隐藏

overflow: visible(可见)/hidden(隐藏)/scroll(滚动条)/auto(需要时显示滚动条)

注意：有定位的盒子慎用hidden