1、 元素类型的转换（display属性）
Display属性
属性值：
Block
Inline
None
大部分块状元素默认的display的值为block，其中li默认的值 list-item（列表元素）
大部分内联元素默认的display值为inline，其中input默认的值为：inline-block（行内块元素）；
内联元素里面特殊的一个：行内块元素（内联块元素）
特点：
1：可以设置宽高
2：在一行内逐个显示
3：当前元素的display的值为inline-block能支持vertical-align 属性。
2、 vertical-align属性
vertical-align:垂直对齐。
Top
Bottom
Middle
Baseline
让一个元素在父元素里面左右上下居中：
给父元素添加text-align:center(左右居中)
给当前元素添加：
Display:inline-bolck
Vertical-align:middle
在当前元素后面（不要回车），添加一个空的span标签。
给span设置样式：
Display:inline-block
Width:0
Height:100%
Vertical-align:middle
3、 css元素类型的分类总结
分类：块状元素、内联元素、可变元素
元素类型的转换：
Display属性：
属性值：
Block
Inline
Inline-book
None
List-item
行内块元素：input display为inline-blcok1Img标签：浏览器默认解析的display值为inline
标签的嵌套规则：
尽量让块状元素作为父元素存在；
内联元素的子元素尽量也是内联元素；
P标签中不能出现h1-h6；
P标签和h1-h6不能互相嵌套。
4、 图片默认的display属性值为inline，为什么图片能添加宽高？？？
从另一个角度对所有的标签进行分类。
分为：置换元素与非置换元素
置换元素：
典型的置换元素：img/input 依赖标签的属性或者元素自身的类型；‘
因为img是置换元素，所以能添加大小。因为置换元素在页面显示的过程中，生成一个框（框架），这个框能添加大小。
非置换元素：
不是置换元素的都是非置换元素。
5、 定位
定位：让元素的位置发生改变。
定位属性：
Position属性：设置或者检索元素定位方式。
（如果元素有了position属性，元素就知道自己要做位置移动了）
Position的属性值：（属性值是告诉元素参照物是谁）
制定坐标：left/right/top/bottom
Position的属性值：
1：position:static 【静态定位】 （position的默认值）
2：position:absolute 【绝对定位】
a. 绝对定位的参照物：
已经有定位的父元素为参照物
如果父元素都没有定位或者没有父元素，以文档为参照物
b. 绝对定位的特点：
不占据空间，脱离布局流。
CSS伪元素（pseudoelements）不是DOM元素，因此你无法直接选择到它们。
假设有如下HTML代码：
<div
class="techbrood"
id="td_pseudo">techbrood
introduction</div>
和CSS代码：
.techbrood:before
{
width:
0
}
现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%，
有两个方法，一个是添加新的样式：
$('head').append("<style>.techbrood::before{
width:100%
}</style>")
（注意该方法将影响所有的class为techbrood的元素）
另外一个方法是为该元素添加新类，并通过设置新类的属性来达到改变伪元素属性的效果：
.techbrood.change:before{
width:
100%
}
jQuery代码：
$('#td_pseudo').addClass("change")
在div里给它加上一个类，给新加的类写样式。
继承在CSS中是一种自然的行为，我们甚至不需要考虑是否可以这样做，但它有其局限性。
首先，有些属性不能被继承。这是没有原因的，因为它是这样建立的。例如，您都知道，border属性用于设置元素的边界，因此它没有继承。
如下图所示，如果继承了border属性，那么文档将看起来很奇怪，除非您采取其他措施来关闭border的继承属性。大多数边框属性，如填充、空白、背景和边框，都不是继承的。
扩展资料：
CSS中的样式优先原则：
规则1：当由于继承而发生样式冲突时，最近的祖先获胜（最近的原则）。
Strong分别从body和p继承了color属性，但是因为p在继承树中更接近Strong，所以Strong中的文本最终继承了p的蓝色。
规则2：当继承的样式与直接指定的样式冲突时，直接指定的样式获胜（最直接的原则）。
强大的｛颜色：红色；｝
根据规则二，用strong表示的文本以红色结尾。
规则3：当直接指定的样式冲突时，具有最高样式权重的样式将获胜。
该值取决于样式的选择，权重定义见下表。
CSS选择器的重量
标签选择器1
类选择器10
ID选择器100
内联样式1000
伪元素（：第一个子元素，等等
伪类（：链接等
可以看到，行内样式的权重是>、>ID选择器、>、b>类选择器、>、>标签选择器，除了子类选择器外，权重是每个权重的和，比如“# nav”。电流a“重100 + 10 + 1 = 111”。
