Day08 CSS 学习笔记外边距指的是元素与其他相邻元素（兄弟元素或者父元素）之间的距离，外边距不是盒子的一部分，不会

1 回顾

1.1 选择器

1. 基本选择器
   标签名选择器
   类名选择器
   ID名选择器
   全局选择器 *
   
2. 组合选择器
   后代元素选择器
   子元素选择器
   并集选择器
   交集选择器
   

3. 伪类选择器
   :link
   :visited
   :hover
   :active
   
4. 选择器的优先级
   !important > 行内式 > ID > Class > 标签名 > 全局

1.2 常用的 css 属性

1. 字体属性
   font-family、font-size、font-style、font-weight、font
  
2. 文字颜色
	color
	
3. 文本属性
 	word-spacing、letter-spacing、text-decoration、text-align、line-height、vertical-align、text-indent
 	
4. 列表属性
	list-style-type、list-style-position、list-style-image、list-style
	
5. 背景属性
	background-color、background-iamge、background-repeat、background-position、background-attachment、background
	
6. 鼠标光标属性
	cursor
	
7. 表格属性
	table-layout、border-collapse、border-spacing、empty-cells、caption-side

1.3 盒子模型

① 盒子的显示模式

1. 三种显示模式
   块级 block
   行内	inline
   行内块	inline-block
   
 2. 元素的默认显示模式
 3. 设置元素的显示模式
    display: inline / block / inline-block

② 盒子的组成部分

content 内容
padding	内边距
border 边框

③ 内容 content

1、 设置内容区域的宽高
	width / height
	min-width / min-heihgt
	max-width / max-width
	
2、 内容的默认宽高

④ 内边距 padding

1. 设置内边距
	padding-left、padding-top、padding-right、padding-bottom、padding
	
2. 设置规则
    内边距的值不能是负值，不能是 auto
    块级元素和行内块元素可以完美地设置四个方向的内边距； 行内元素左右内边距可以完美设置，上下内边距不可以

⑤ 边框 border

1. 同时设置四个方向
   border-style、border-width、border-color、border
   
2. 单独设置某个方向
 	border-left、border-left-style、border-left-width、border-left-color
 	border-right ...
 	border-top ...
 	border-bottom ....

2 盒子模型

2.1 外边距 margin

外边距指的是元素与其他相邻元素（兄弟元素或者父元素）之间的距离，外边距不是盒子的一部分，不会影响盒子大小，但是影响盒子位置。

① 相关 css 属性

CSS 属性名	功能	属性值
margin-left	左外边距	长度
margin-right	右外边距	长度
margin-top	上外边距	长度
margin-bottom	下外边距	长度
margin	复合属性	长度

margin 属性值的规则：

复合属性可以设置 1 ~ 4 个值，规则同 padding 相同

外边距的值可以是负值。

外边距的值也可以设置为 auto。

② margin 设置规则

元素设置外边距，如果与父元素，距离的是父元素内容的边界。
元素设置外边距，如果与兄弟元素，上和左外边距影响自己的位置，下和右外边距影响后面兄弟元素的位置。
对于块级元素和行内块元素，可以完美地设置四个方向的外边距； 对于行内元素，左右外边距可以完美设置，上下外边距设置无效。
如果给一个块级元素设置左右外边距都为 auto，该块级元素会在父元素中水平居中。

③ margin 塌陷

什么是 margin 塌陷？

第一个子元素的上外边距会作用在父元素上，最后一个子元素的下外边距会作用在父元素上。成为 margin 塌陷。

如何解决 margin 塌陷：

方案一：给父元素设置不为 0 的内边距。
方案二：给父元素设置宽度不为 0 的边框。
方案三：给父元素设置 css 样式 overflow:hidden。

④ margin 合并

什么是 margin 合并？

上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

margin 合并本质上也属于 margin 塌陷。

如何解决 margin 塌陷？

无需解决，布局的时候上下的兄弟元素只给一个设置上下外边距就可以了。

2.2 内容溢出

CSS 属性名	功能	属性值
overflow	溢出内容的处理方式	visible：显示，默认值 hidden：隐藏 scroll：显示滚动条，不论内容是否溢出 auto：自动显示滚动条，内容不溢出不显示
overflow-x	水平方向溢出内容的处理方式	同 overflow
overflow-y	垂直方向溢出内容给的处理方式	同 overflow

注意：

如果通过 overflow-x 或者 overflow-y 只设置一个方向上内容溢出处理方式，另一个会调整为 auto （不论是否设置），不好使也不常用。

overflow 常用的值是 hidden 和 auto，处了能够处理溢出内容的显示方式，还可以解决很多疑难杂症。

2.3 隐藏元素

① 方案一： visibility 属性

visibility 属性默认值是 show，如果设置为 hidden，元素会隐藏。

元素看不见了，还占有原来的位置（元素的大小依然保持）。

② 方案二： display 属性

设置 display:none，就可以让元素隐藏。

彻底地隐藏，不但看不见也不占用任何位置，没有大小宽高。

3 样式继承和默认样式

3.1 样式继承

有些样式会继承，一个元素如果本身设置了某个样式就使用本身设置的样式；但是如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。

① 会继承 css 属性

字体属性、文本属性（除了vertical-align）、文字颜色、鼠标样式

② 不会继承的 css 属性

边框、背景、内边距、外边距、宽高、溢出方式 等

3.2 默认样式

有些元素有默认的样式：

超链接默认: 下划线、字体颜色、鼠标小手
标题 h1~h6： 加粗 字体大小、上下外边距
段落 p：上下外边距
ul、ol：左内边距
body： 8px外边距（4个方向）

元素的默认样式优先级大于继承的样式，如果要重置元素的默认样式，选择器一定要直接选择器到元素。

4 行内元素或行内块元素在布局中的特点

4.1 文本属性作用于行内元素和行内块元素

行内元素和行内块元素可以被父元素当做文本处理，给父元素设置文本属性，会被里面的行内或行内块元素起作用

① 让行内块元素或行内元素水平居中（在父元素中）

给它的父元素设置 text-align: center;

② 让行内元素或行内块元素垂直居中（在父元素中）

给它的父元素设置 line-height 跟父元素高度一致。
行内块元素本身还要再设置一 vertical-align: middle。

4.2 行内元素或行内块元素之间的空白问题

行内块元素以及行内元素会被当做文本去处理，由于换行或者沿文字基线对齐会产生一些空白。

① 之间的空白

产生的原因：

敲代码的时候，为了代码具有良好的可读性，写一个标签就换个行。行内块元素或行内元素之间的换行会被浏览器解析为一个空白字符。

解决方案：

方案一： 去掉行内或行内块元素之间的换行和空格。（不推荐）
方案二： 在父元素中设置 font-size:0；如果行内块或行内元素内有文字再单独给元素设置字体大小。（推荐）

② 底部的空白（图片的幽灵空白）

产生原因：

行内块元素或行内元素与文本的基线对齐，幽灵空白就是基线与底线之间的距离。

解决方案：

方案一： 给行内元素或行内块元素设置vertical 的值不为 baseline 即可，设置为 middel、bottom、top 都可以。
方案二： 给父元素设置 font-size: 0。如果该行内元素或行内块元素内部还有文本内容需单独设置font-size。
方案三： 主要针对图片，设置图片为 display:block。

5 浮动

5.1 浮动的简介

最初，浮动设计用来实现图片环绕效果。

现在浮动是主流的页面布局方式之一。

5.2 元素浮动之后的特点

脱离文档流。
不会独占一行，可以与其他浮动的元素共用一行。
默认的宽高都是被内容撑开，可以设置宽高。
能够完美地设置四个方向的外边距和内边距。
不会像行内块一样被当做文本处理（具有块级元素的特性）

5.3 浮动元素产生的影响

① 元素浮动之后产生的影响

对后面的兄弟元素： 后面的兄弟元素会占据浮动元素的位置，在浮动元素的下面。（浮动的元素对前面的兄弟元素没有影响）

对父元素的影响： 不能撑起父元素的高度，元素高度塌陷。（父元素的宽度依然束缚浮动的子元素）

② 解决浮动的影响（清除浮动）

设置浮动的时候，兄弟元素不要有浮动的有不浮动的，要浮动就都浮动。

解决方案：

方案一：给父元素指定高度。解决父元素高度塌陷。
方案二：给父元素也设置浮动，带来其他影响（不推荐）。
方案三：给父元素设置 overflow:hidden (推荐)
方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both
方案五：给浮动元素的父元素，设置伪类，通过伪类清除浮动，原理与方案四相同。(推荐)
```
.parent::after {
    content: "";
    display: block;
    clear:both;
}
```

5.4 浮动相关的 CSS 属性

CSS 属性	功能	属性值
float	设置浮动	left: 设置左浮动 right: 设置右浮动 none：不浮动，默认值
clear	清除浮动清除前面兄弟元素浮动元素的响应	left：清除前面左浮动的影响 right：清除前面右浮动的影响 both：清除前面左右浮动的影响