前端自学 - CSS总结篇（二）

一、文章概述

本篇文章的大概内容是：

• 对齐方式 （内联元素的对齐 & 块级元素的居中）
• 盒子模型（标准盒子模型 & 怪异盒子模型）
• display 的一些用法（行、块元素的使用 & 物体的显示与隐藏）
• float 浮动 以及 float 的清除（清除浮动的方法）

二、对齐方式

在web网页开发中，内联元素，默认的对齐方式是为基线对齐


划分：粉色为顶线，蓝色为中线，绿色为基线，红色为底线

• 顶线：中文汉字的的上端沿；
• 中线：横过英文字母x的中间的线；
• 基线：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿；
• 底线：中文汉字的下端沿；
• 内容区：是指底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化。
• 在行块元素中，基线是 margin 的边缘
   

参考文章：https://www.cnblogs.com/lsm-boke/p/14532718.html

三、盒子模型

(一) 概念

CSS 中非常常用的 思维模型，可以把每一个标签（元素）看作是一个矩形的盒子，而我们的网页 页面就是由各个盒子通过不同的排列方式进行堆叠组成的，盒子之间彼此影响。

(二) 分类

标准盒子模型（W3C标准规定后所出现的盒子模型）
怪异盒子模型（IE盒子模型）

(三) 标准盒子模型

content （内容）：展示内容的区域

• 大小 widht 与 height 决定

padding （内填充）：介于内容与边框之间 padding的颜色与内容的颜色一致
border （边框）：单独设置
margin （外填充）：透明的区域
 

重点：盒子实际大小。
宽度 = width + padding * 2 + borde * 2 +margin * 2
高度 = height + padding * 2 + borde * 2 +margin * 2

(四) 怪异盒子模型

也是由 content + padding + border + margin 组成
 
 
通过观察上方 gif 图片 可以感受到 怪异盒子模型与标准盒子模型的区别在于：
怪异盒子的 宽度 = width + padding + border
实际宽度 = width + margin * 2
使用方法：设置属性 box-sizing，属性值：border-box；

(五) padding 的写法

padding：5px；
padding-left：5px；
padding-right
padding-top
padding-bottom
padding：10px 20px ； 上下padding 为10px, 左右为20px
padding：10px 20px 30px； 上为10px， 左右为 20px, 下为30px；
padding：10px 20px 30px 40px；上右下左分别为 10px 20px 30px 40px

(六) margin 的问题

margin 重叠的问题：
 

• 如果两个元素在垂直方向上有 margin ，则两个元素之间的距离取 margin 较大值。
• 父子嵌套时，子元素设置 margin-top ，并且父子元素之间没有其他的元素，浏览器会把子元素的 margin-top 作用与父元素。
   

解决方法：

• 父元素设置浮动；
• 父元素设置 padding-top： 1px；
• 父元素设置 boder-top：透明线条
• 父元素设置 display: inline-block; 同时拥有块级元素和内联元素的特性
• 父元素设置 overflow:hidden； 为 非 visible(默认值); （推荐）

margin 双倍边距：
 

• 在IE6 下，如果设置了左浮动，并且也设置了 margin-left ，那么实现margin 效果是 两倍 margin-left方法
   

解决方法： 设置display: inline;

四、display 的一些用法

(一) 作用

修改元素本身表现的一个特性

(二) 属性值

inline： 当前元素表现为内联标签的特性

• 无法设置宽高，大小有内容决定。
• 可以设置水平方向margin、padding、border；
• 垂直给方向 padding、boder 会遮挡其他元素；
   

block：当前元素表现为块级标签的特性

• 父元素宽度的 100%，独占一行
   

table-cell： 单元格特性
 

inline-block：具有内联元素的特性 同时具有块级元素的特性

• 不会独占一行；
• 可以设置宽高， margin、padding、boder

(三) 显示与隐藏

display: none；可以隐藏某个元素

• 文档中元素隐藏
• 占用空间被收回，处于被隐藏元素下方的元素，会占用被隐藏元素的空间
   

display: block；将被隐藏元素显示出来，并占有元素自身大小的空间
 

注意：该方法不适合用于隐藏然后出现的动画特效，会导致动画失效

五、float 浮动

(一) 浮动定义

浮动可以设置元素在水平方向上，向左或者向右排列，直到遇到外边缘或碰到父级边框，浮动就会停止

(二) 浮动语法

float: left | right；

(三) 浮动的影响

• 浮动会 改变块级元素 独占一行的特性；
• 浮动元素 不会 影响前面的元素，但是 会 影响到后面的元素
• 浮动元素会 脱离 文档流，所占据的文档空间将被浏览器回收，并分配给后面的元素，从而导致浮动元素 飘在继承了浮动元素位置的元素上方；
• 父元素中，的所有元素都浮动，会导致父元素高度崩塌；
• 如果当前块级元素 没有设置宽度 ，设置浮动后，会将宽度压缩到，内容的大小；
• 内联元素浮动之后，可以设置宽高。

(四) 清除浮动

clear：left | right | both;

(五) 清除浮动对父元素的影响

• 添加一个空标签，设置 clear； （不够完善）
• 给父元素直接设置高度；（知道子元素高度时，使用）
• 父元素也浮动 （可以解决父元素高度问题，但是会影响后面的元素）；
• 父元素设置 overflow：hidden | auto；（ie9以下不支持 较为完美方案）

伪元素清除浮动方法：

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

---

相关文章

• 前端学习 - 初识HTML
• 前端自学 - CSS总结篇（一）
• 前端自学 - CSS 定位 position
• 前端自学 - CSS 布局总结
• 前端自学 - CSS 过渡 & 动画

---