CSS-样式

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

会继承的CSS属性：

字体属性、文本属性（除了vertical-align）、文本颜色等。

不会继承的css属性

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

一个规律：能继承的属性，都是不影响布局的，简单说，都是和盒子模型没有关系的。

元素的默认样式
元素一般都有默认的样式，例如：
1、<a>元素：下划线、字体颜色、鼠标小手。
2、<h1>---<h6>元素：文字加粗、文字大小、上下外边距。
3、<p>元素：上下外边框。
4、<ul>、<ol>元素：左内边距。
5、body元素：8px外边距（4方向）等等。

优先级：元素的默认样式>继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择器到该元素。

布局小技巧
1、行内元素、行内块元素，可以被父元素当做文本处理。

即：可以像处理文本对齐一样，去处理：行内元素、行内块元素在父元素中的对齐。
例如：text-align、line-height、text-indent等。

2、如何让子元素，在父元素中水平居中：

1、若子元素为块元素，给父元素加上：margin: 0 auto;。
2、若子元素为行内元素，行内块元素，给父元素加上：text-align: center; 。

3、如何让子元素，在父元素中垂直居中：

1、若子元素为块元素，给子元素加上：margin-top,值为：(父元素content-子元素盒子总高)/2
2、若子元素为行内元素、行内块元素：
让父元素的height = line-height，每个子元素都加上：vertical-align:middle;。
若想绝对垂直居中，父元素font-size设置为0。

元素之间的空白问题
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：

1、去掉换行和空格（不推荐）。
2、给父元素设置font-size:0px;，再给需要显示文字的元素，单独设置字体大小（推荐）。

行内块元素的空白问题

image.png
行内块元素与文本的基线对齐，而文本的基线与文本最低端之间是有一定距离的。
解决方案：

方案一：给行内块元素设置vertical-align,值不为baseline即可，设置为middle、bottom、top均可。
方案二：若父元素中只有一张图片，设置图片为display: block;。
方案三：给父元素设置font-size: 0px;，如果该行内块元素内部还有其他文本，则需要单独设置font-size。