关于CSS样式的继承与非继承属性

---

CSS中的继承属性和非继承属性（原文传送门：点击详情）

CSS参考手册： https://www.w3cschool.cn/cssref/css-reference.html
css样式继承规则详解： https://www.cnblogs.com/Renyi-Fan/p/9225805.html（笔记+理解）

---

一、无继承性的属性

属性	描述
display	规定元素应该生成的框的类型

文本属性

属性	描述
vertical-align	垂直文本对齐
text-decoration	规定添加到文本的装饰
text-shadow	文本阴影效果
white-space	空白符的处理
unicode-bidi	设置文本的方向

下面是举例，更为详细可自行百度，比较难搞的是 vertical-align。

①vertical-align到底怎么用；

②Vertical-Align，你应该知道的一切。

vertical-align:text-top;
text-decoration:none;
text-shadow: 5px 5px 5px #FF0000;
white-space: nowrap;

/*unicode-bidi 属性与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。*/
direction:rtl;
unicode-bidi:bidi-override;

盒子模型的属性

属性	描述
widtht、height	宽高
margin、margin-top、margin-right、margin-bottom、margin-left	外边距
padding、padding-top、padding-right、padding-bottom、padding-left	内边距
👇👇👇 border: border-width border-border-style border-color; 👆👆👆	边框属性设置只需要记住这条公式即可，想要设置某个方向的边，只需中间加上方向（顺序可换不影响，但最好养成良好编码习惯）
border、border-top、border-right、border-bottom、border-left	边框
border-width、border-top-width、border-right-width、border-bottom-width、border-left-width	边框的宽
border-style、border-top-style、border-right-style、border-bottom-style、border-left-style	边框样式
border-color、border-top-color、border-right-color、border-bottom-color、border-left-color	边框的颜色

ps：这里注意一下，外边距margin和内边距padding只有大小（距离的值）属性。边框border则有很多属性。

margin、padding、broder的缩写方式：

(方向是 上右下左逆时针顺序：top，right，bottom，left)

👉👉👉margin和padding（点击这里查看我画的更容易理解的盒子示意图）
两者都是一样的，只需给边距赋值。

margin:10px 20px 30px 40px;
/*上面margin属性的缩写展开后如下：*/
margin-top:10px;
margin-right:20px;
margin-buttom:30px;
margin-left:40px;

padding:25px 10px 35px 15px;
/*上面padding属性的缩写展开后如下：*/
padding-top:25px;;
padding-right:10px;
padding-buttom:35px;
padding-left:15px;

👉👉👉border

border属性不同（不写方向，那就是整框），它是赋值边的大小（宽）、边的类型（实线/虚线）、边的颜色

border:1px solid #f39;
/*上面border属性的缩写展开后如下：*/
border-width:1px;
border-style:solid;
border-color:#f39;

/*如果是只想设置某边的属性：*/
border-left:2px solid #ff4040;
/*上面border-left属性的缩写展开后如下：*/
border-left-width:1px;
border-left-style:solid;
border-left-color:#f39;

背景属性

属性	描述
👇👇👇 background: background-color background-image background-repeat background-position background-attachment; 👆👆👆	所有背景属性的公式，记住这条就行，也可以单独属性设置（顺序可换不影响，但最好养成良好编码习惯）
background-color	背景颜色
background-image	背景图
background-repeat	如何重复背景图像
background-position	背景图像的位置
background-attachment	背景图像是否固定或者随着页面的其余部分滚动

/*在一个声明中设置所有背景属性：*/
background: #00ff00 url(xxxx.gif) no-repeat fixed top;

/*全写如下*/
background-color:#00ff00;
background-image:url(xxxx.gif);
background-repeat:no-repeat;
background-position:fixed;
background-attachment:top;

【延申：background用法】

定位属性

属性	描述
float	浮动（无论何种元素使用float都会生成块级框）
clear	清除浮动，去除高度塌陷（练习点此链接）
position	定位类型（绝对/相对/固定，练习点此链接）
top、left、bottom、right	上左下右移动（与position配合使用）
min-width、max-width	设置元素的最小/最大宽度（练习点此链接）
min-height、max-height	设置元素的最小/最大高度
overflow	规定当内容溢出元素框时发生的事情（省略号代替或者滚动条，练习点此链接）
clip	剪裁绝对定位元素（控制裁剪区域，练习点此链接）
z-index	设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面（练习点此链接）

div.text{
float:right;	/*右浮动*/
clear:both;		/*清除两边浮动元素*/
}

div.box{
	position:absolute;	/*配合方向使用，来确定位置(相对于static定位以外的第一个父元素进行定位。)*/
	top:10px;	/*top和bottom 选一个属性就行*/
	left:10px;	/*right和left 选一个属性就行*/
}

p{
	min-width:100px; /*min-width、max-width、min-height、max-height*/
}

textarea{
	overflow:scroll;	/*溢出属性配合宽高，超出宽高才溢出*/
	width:100px;
	height:100px;
}

img{
	position:absolute;
	clip:rect(0px,60px,200px,0px);		/*配合绝对定位，剪裁绝对定位元素*/
}

z-index:-1;		/*设置数值来调整层叠顺序，值越大越上层显示*/

生成内容属性

属性	描述
content	与 :before 及 :after 伪元素配合使用，来插入生成内容
counter-reset	设置某个选择器出现次数的计数器的值。默认为 0。
counter-increment	设置某个选取器每次出现的计数器增量。默认增量是 1。

css的content属性(传送门)
counter-reset和counter-increment（传送门）

轮廓样式属性

属性	描述
👇👇👇 outline: outline-color outline-style outline-width; 👆👆👆	绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用（记住这条公式即可。练习点此链接）（顺序可换不影响，但最好养成良好编码习惯）
outline-color	规定边框的颜色
outline-style	规定边框的样式
outline-width	规定边框的宽度

语法： outline:#00ff00 dotted thick;
当然，如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000;也是允许的（outline-style则必须声明，否则默认none）。

页面样式属性

属性	描述
size（css参考手册“页面媒体(Paged Media) 属性”）	指定含有BOX的页面内容的大小和方位
page-break-after	用于设置在指定元素后面插入分页符
page-break-before	在指定元素前添加分页符

@media print
{
table {page-break-after:always;}
}

@media print
{
table {page-break-before:always;}
}

关于@规则(at-rule)的传送门：
①CSS中@用法小结；
②CSS语法之@规则(at-rule)。

声音样式属性

属性	描述
play-during	设置或检索背景音乐的播放
cue	在一个声明中设置提示属性
cue-after	指定要播放的声音在一个元素的内容后面
cue-before	指定要播放的声音在一个元素的内容前面
pause	在一个声明中设置暂停属性
pause-after	在一个元素的内容之后，指定暂停
pause-before	在一个元素的内容之前，指定暂停

详情点击：CSS语音参考

---

二、有继承性的属性

字体系列属性

属性	描述
👇👇👇 font: font-style font-variant font-weight font-size/line-height font-family 👆👆👆	设置所有字体属性（记住这条公式即可，💥必须按顺序！练习点此链接）
font-style	规定字体样式
font-variant	规定字体异体
font-weight	规定字体粗细
font-size/line-height（行高是文本属性）	规定字体尺寸和行高
font-family	规定字体系列
font-stretch	对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust	为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height

注意：

①这里和其他语法简写不同，必须按照font-style、font-variant、font-weight、font-size/line-height、font-family的顺序设置；
②font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

p.ex1
  {
  font:italic arial,sans-serif;		/*默认font-size和font-family值，不设置*/
  }

p.ex2
  {
  font:italic bold 12px/20px arial,sans-serif;
  }

文本系列属性

属性	描述
text-indent	文本缩进
text-align	文本水平对齐
line-height	行高
word-spacing	增加或减少单词间的空白（即字间隔）
letter-spacing	增加或减少字符间的空白（字符间距）
text-transform	控制文本大小写
direction	规定文本的书写方向
color	文本颜色

元素可见性

元素	描述
visibility	设置元素是否可见

tips：
visibility:hidden;虽然功能上和display:none;一样都是设置元素不可见，但是，visibility:hidden;会占据页面上的空间，display:none;则不会。

表格布局属性

属性	描述
caption-side	设置表格标题的位置
border-collapse	设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示
border-spacing	设置相邻单元格的边框间的距离（仅用于“边框分离”模式）
empty-cells	设置是否显示表格中的空单元格（仅用于“分离边框”模式）
table-layout	显示表格单元格、行、列的算法规则

列表布局属性

属性	描述
list-style: list-style-type list-style-position list-style-image;	设置所有的列表属性（记住这条公式即可，💥必须按顺序！练习点此链接
list-style-type	设置列表项标记的类型
list-style-position	设置在何处放置列表项标记
list-style-image	使用图像来替换列表项的标记

tips：
按下面顺序设置(语法： list-style:square inside url('/i/arrow.gif');)

• list-style-type
• list-style-position
• list-style-image

可以不设置其中的某个值，比如 list-style:circle inside; 也是允许的。未设置的属性会使用其默认值。

生成内容属性

元素	描述
quotes	设置嵌套引用的引号类型

q:lang(en)
{
quotes: "�" "�" "'" "'";
}

说明：前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套。
quotes:“第一级string” “第一级string” “第二级string” “第二级string”…;

光标属性

元素	描述
cursor	设置要显示的光标的类型（形状）

页面样式属性

元素	描述
page（css参考手册“页面媒体(Paged Media) 属性”）	指定一个元素应显示的页面的特定类型
page-break-inside	设置元素内部的 page-breaking（分页） 行为（只有 Opera 浏览器支持此属性）
🔺（不是windows）widows（css参考手册“分页（Print） 属性”）	设置当元素内部发生分页时必须在页面顶部保留的最少行数
orphans	设置当元素内部发生分页时必须在页面底部保留的最少行数

声音样式属性

属性	描述
speak	指定内容是否会提供听觉方式
speak-header	设置或检索表格标题是在所有的单元格之前发声，还是到一个不与之关联的单元格就结束发声。
speak-numeral	设置或检索数字如何发音。
speak-punctuation	设置或检索标点字符如何发音
speech-rate	指定发言速度
volume	指定发言的音量
voice-family	设置或检索当前声音类型
pitch	指定讲话声音
pitch-range	指定讲话声音的变化（单调的声音或动态的声音）
stress	讲话声音在指定的地方"重音"
richness	指定丰富的讲话声音（浑厚的声音或细的声音）
azimuth	设置声音应该来自哪里
elevation	设置声音应该来自哪里

详情点击：CSS语音参考

---

三、所有元素可以继承的属性

1、元素可见性：visibility
2、光标属性：cursor

---

四、内联元素可以继承的属性

1、字体系列属性
2、除text-indent、text-align之外的文本系列属性

---

五、块级元素可以继承的属性

text-indent、text-align