这是我参与更文挑战的第27天，活动详情查看：更文挑战
css性质
继承性
css继承性：元素可以从祖先继承文字属性，不能继承盒子属性
祖先设置文字属性后代元素都将继承这些文字属性。
文字属性：color, font系列,line系列，text系列等
盒子属性（不能继承）：width,height,background系列，border,浮动，等
css一个比较好性质，可以将一些文字属性给祖先设置，他的后代都将继承这些文字属性，简化代码。
body {
color: #333;
font-family: "Arial","Microsoft Yahei","SimSun";
font-size: 14px;
}
层叠性体现：继承性
div {
width: 300px;
height: 300px;
background-color: lightblue;
}
css层叠性
同一个元素被不同选择器选中，设置相同样式，会如何显示？
层叠性：同一个元素被不同选择器选中，设置相同样式，权重大的会层叠掉权重小的。
div class="box" id="box">盒子</div>
/*同一个元素被不同选择器选中 div .box #box 同时设置文字颜色，会如何渲染*/
div {
font-size: 50px;
color: red;
}
#box {
color: blue;
}
.box {
color: green;
}
权重：元素选择器针对性越强，权重就越大。
id选择器 》类选择器 》 标签选择器
1id = 255类
1类 = 255标签
①选中元素，计算该元素的权重。
选中元素，计算权重，只需要看id数量，类的数量，标签数量。先比较id选择器的数量，id数量多的权重最大；如果id数量相同，比较类的数量，类的数量多的权重就大；如果类的数量还相同就比较标签的数量，标签数量多的权重最大；如果标签数量还相同，直接看书写顺序，谁的样式在最后就显示谁的样式。
.box1 .box2 #box3 p {
color: blue;
/*(1,2,1)*/
}
/*选择器数量都相同，后面的样式层叠掉前面的*/
#box1 .box2 .box3 p {
color: green;
/*(1,2,1)*/
}
②元素没有被选中，该元素权重是0.
样式看继承性（html结构距离近的优先渲染）就近原则
body {
font-size: 50px;
color: red;
}
#box1 {
color: blue;
}
.box3 {
color: green;
}
如果距离相同，看选择器权重（依次比较该选择器id,类，标签选择器数量）
.box1 .box2 {
color: blue;
/*（0,2,0）*/
}
#box1 .box2 {
color: green;
/*（1,1,0）*/
}
如果距离相同，选择器数量还相同，看css书写顺序
.box1 #box2 {
color: orange;
}
/*数量相同，看css顺序*/
#box1 .box2 {
color: green;
/*（1,1,0）*/
}
important
语法：
书写在属性值后面添加空格 !important分号结束
作用：可以提高选中元素单个属性的权重最大。而不是提高整个选择器的权重
important不影响就近原则。
/*元素没有被选中*/
body {
font-size: 50px;
color: red !important;
}
.box {
color: green;
}
文字样式
color
文字颜色：
属性值：三种色值表示法都可以使用
color: #B30000; //十六进制表示法
color: rgb(255,0,0); //rgb()
color: red; //单词表示法
font-style
设置文字是否倾斜
默认值：normal（正常）
倾斜： oblique(普通倾斜)
倾斜： italic(使用，将有倾斜字体的英文进行替换)
.ob {
font-style: oblique;
}
.it {
font-style: italic;
}
font-weight
设置文字是否加粗
默认值： normal(正常) 500
加粗： bold 700
属性值：100-900（没有单位）
.f700 {
font-weight: 700;
}
font-size
字号：单位是px
工作中读取设计师标注
现在需要自己手动测量。
粗略的测量：直接测量文字高度。
浏览器有最小字号，超过最小字号，默认显示最小字号。（chrome最小字号12px）
line-height
行高：一行文字实际占有的高度。
特点：文字在行高内垂直居中。
单位是px;
line-height: 200px;
单行文本垂直居中：盒子的高度和行高相同。
div.box1 {
width: 300px;
height: 100px;
4font-size: 30px;
line-height: 100px;
background-color: pink;
}
百分数表示：%(表示和字号比值)
.box2 {
width: 400px;
height: 100px;
border: 1px solid #000;
font-size: 20px;
/*line-height: 100px;*/
/*line-height是相对字号比值： 20 * 500% = 100px*/
line-height: 500%;
}
font-family
字体。 一般我们使用字体，使用计算机默认自带字体，特殊的字体，计算上没有，那么不能正常渲染。
英文字体： Arial
中文： Microsoft Yahei,备用字体SimSun;
/*字体 先书写英文字体，在书写中文字体*/
font-family: "Arial","Microsoft Yahei","SimSun";
font:是一个复合属性，可以书写复合写法。每一个属性用空格隔开。
属性值可以省略，表示默认值，至少要书写字号，字体。
font: 是否倾斜 是否加粗 字号/行高 字体;
font: italic bold 30px/100px "Arial","Microsoft Yahei";
文本控制属性：
text-indent
设置文本首行缩进。
单位是em。2em表示首行缩进2汉字
text-indent: 2em;
单位：百分数（相对父盒子宽度的比值）
ext-indent: 20%;
单位： px
text-indent: 100px;
text-align
设置文本水平左右居中。
属性值：
默认值： left(靠左)
靠右（right）
居中（center）
text-align: center;
img:插入图片（文本）
text-align: center; 设置文本居中（单行，多行）
text-decoration
文本是否设置下划线
默认值（除了a标签）：
没有下划线： none
下划线： underline
text-decoration: none;
text-decoration: underline;
盒模型
概述
width: 盒子内容宽度
height: 盒子内容高度
border: 边框
padding: 内边距
margin: 外边距
内容区域：
内容宽 = width
内容高 = height
实际占有区域：
实际占有宽度 = width + padding * 2 + border * 2
实际占有高度 = height + padding * 2 + border * 2
计算：
实际宽 = 500 + 50 * 2 + 10 * 2 = 620px
实际高 = 300 + 50 * 2 + 10 * 2 = 420px
一般经常给出的是盒子占有宽高，需要我们计算出盒子的内容宽和高。
盒子内容宽 width = 盒子实际宽度 - Padding * 2 - border * 2
盒子内容高 height = 盒子实际高度 - Padding * 2 - border * 2
盒子宽度是500px,盒子高度是 300px，内边距是50px，边框是20px，计算盒子内容宽和高度
width = 500 - 50 * 2 - 20 * 2 = 360px
height = 300- 50* 2 - 20 *2 = 160px
背景（背景色和背景图）渲染区域：边框以内（padding区域可以渲染背景）
background-image: url(images/star.gif);
padding
内边距： 内容到内边框之间的距离。
padding:也是复合属性，可以按照方向进行拆分
padding-left
padding-right
padding-top
padding-bottom
可以书写复合写法：
四值法：上 右 下 左；
padding: 30px 40px 50px 60px;
三值法： 上 右（左） 下；
padding: 30px 50px 60px;
二值法： 上（下） 右（左）；
padding: 30px 50px;
单值法： 四个方向都相同;
padding: 30px;
一般在使用时我们习惯先书写单值法，特殊方向用单一属性层叠掉。
padding: 30px;
padding-left: 100px;
margin
外边距： 盒子之间的距离
用法和padding 一样
margin也是复合属性可以按照方向拆分
margin-left
margin-right
margin-top
margin-bottom
可以书写复合写法：
四值法： 上 右 下 左；（三值法，二值法，单值法）
margin: 20px 30px 40px 50px;
