学习笔记记录之CSS（三）

目录

十一、盒子模型

十二、浮动

---

十一、盒子模型

1.网页布局的本质

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子
2. 利用CSS设置好盒子样式，然后摆放到相应位置
3. 往盒子里面装内容

网页布局的核心本质：就是利用CSS摆盒子

2.盒子模型（Box Model）组成

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

（1）border 边框

• 边框粗细border-width 
• 边框样式border-style  值： solid实线边框  dashed虚线边框 dotted点线边框
• 边框颜色border-color 
• 边框的复合型写法（不分先后顺序）：border: 1px solid red;
• 边框分开写法：border-top/botton/left/right
• border-collapse:collapse 表示相邻边框合并在一起

（2）padding 内边距

padding-left/right/top/bottom

复合写法：

• padding：5px    1个值表示上下左右都有5像素内边距
• padding: 5px 10px    2个值表示上下内边距是5像素，左右内边距是10像素
• padding:5px 10px 20px  3个值表示上内边距为5像素，左右内边距为10像素，下内边距为20像素
• padding：5px 10px 20px 30px 4个值表示上5像素 右10像素 下20像素 左30像素 顺时针

padding会影响盒子的大小，如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

（3）margin外边距

margin-top/bottom/left/right

复合写法：与内边距复合写法规则一致

块级盒子实现水平居中对齐：

• 盒子必须指定宽度
• 盒子左右的外边距都设置为auto  如：margin： 0 auto

行内/行内块元素实现居中对齐：

• 给父级元素加上：text-align：center

外边距合并：

1. 相邻块元素垂直外边距的合并：取两个值中的较大者  解决方法：尽量只给一个盒子指定margin值
2. 嵌套块元素垂直外边距的塌陷：父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

         解决方案：

• 可以为父元素定义边框
• 可以为父元素定义内边距
• 可以为父元素添加overflowhidden

清除内外边距：

*{
margin：0；
padding：0；
}

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

3.盒子模型的圆角边框

 border-radius: length;

• 如需设置成圆形，值可以写成盒子高度的一半或写成50%
• 可以跟4个值 分别为（顺时针）左上，右上，右下，左下
• 也可以分开写：border-top-left-radius

4.盒子阴影

box-shadow :h-shadow（水平阴影位置） v-shadow（垂直阴影位置） blur（模糊距离） spread（阴影的尺寸） color（颜色，一般采用半透明显示） inset（此处inset表示内阴影，不写代表默认外阴影）

5.文字阴影

text-shadow :h-shadow（水平阴影） v-shadow（垂直阴影位置） blur（模糊距离） color（颜色，一般采用半透明显示）

十二、浮动

1.传统网页布局的三种方式

• 标准流（文档流）
• 浮动
• 定位

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

2.浮动写法

float: 属性值（none（默认）left  right）

3.浮动特性

（1）浮动元素会脱离标准流：

• 脱离标准流的控制移动到指定位置
• 浮动的盒子不再保留原先的位置

（2）如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列

（3）浮动元素会具有行内块元素特性（不需要另外转换行内块元素）

（4）浮动元素经常和标准流父级搭配使用

4.浮动布局注意点

• 浮动和标准流的父盒子搭配
• 一个元素浮动了，理论上其余的兄弟元素也要浮动
• 浮动的盒子只会影响后面的标准流，不会影响前面的标准流

5.清除浮动：清除浮动元素脱离标准流造成的影响    策略：闭合浮动

clear：left/right/both

• 额外标签法：在最后一个浮动标签添加一个新标签（块级元素），对其清除浮动（缺点：结构化较差）
• 给父级添加overflow:hidden（缺点：无法显示溢出的部分）
• after伪元素法：

  

• 双伪元素清除浮动：（前后堵上）