初学入门，可能有些地方会理解有误，恳请批评指正~
1. 标签归类：行级元素、块级元素。
（1）行级元素（内联元素、inline）
<1>feature：内容决定元素所占位置；不可以通过css改变宽高。
<2>常见行级元素：span strong em a del
（2）块级元素（block）
<1>feature：独占一行；可以通过css改变宽高。
<2>常见块级元素：div p ul li ol form address
（3）行级块元素（inline-block）
<1>feature：内容决定大小；可以通过css改变宽高。
<2>常见行级块元素：img
（4）行级元素、块级元素和行级块元素的display属性可以改变，所以块级元素可以被改变成行级元素。
（5）凡是带有inline属性的元素，都有文字特性。（比如，字之间存在空格分隔）
2. 开发经验：先定义css的功能，后选择html的样式（先写css，再写html）。
3. 标签可以被自定义，利用标签选择器。可以用通配符选择器。
4. 盒子模型：针对html的每一个元素，是语法特点的集合。任何一个html元素都是一个盒子，都符合盒子模型的特点。
（1）盒子的三大部分：
<1>盒子壁 border
<2>内边距 padding
<3>盒子内容 width+height
（2）盒子模型的组成：（外边距）margin+border+padding+(content=width+height)
（3）padding：四个值（上右下左），三个值（上（左右）下），两个值（（上下）（左右）），一个值（上下左右）。margin、border与padding类似。
（4）盒子计算： 标准W3C模型：宽度 = margin*2 + border*2 + padding*2 + width
IE模型： 宽度 = margin*2 + width
（5）两个盒子嵌套时，如果想让里层盒子处于外层盒子的正中间，则让里层盒子的宽高等于外层盒子的宽高，然后设置外层盒子的pedding。
（6）定位技术：position+left/right+top/bottom。（一般用top）
<1>position：absolute（绝对定位）
<2>left/right：左边线距离左边的距离/右边线距离右边的距离。
<3>top/bottom：上边线距离上边的距离/下边线距离下边的距离。
<4><body></body>标签有固定的margin：8px，若不设置为0，则会出现与边缘有8px间距的现象。
5. opacity：透明度。
6. 层模型：
（1）absolute：
<1>脱离原来的位置进行定位，绝对定位。当一个元素成为绝对定位元素时，则绝对定位元素脱离原来的层，成为新的层（每一个absolute元素都是一个新的层），此时下面的元素会向上占用绝对定位元素之前的层（绝对定位元素依然可以位于原来的位置，但他们不是同一层）。
<2>absolute定位相对于最近的有定位的父级进行定位，如果没有有定位的父级则相对于文档进行定位。
（2）relative：
<1>保留原来位置定位，相对定位。
<2>relative定位相对于自己原来的位置定位。
（3）一般经验：用relative作为参照物，用absolute进行定位。
（4）fixed：固定定位，广告定位，页面动，但元素位置不变。
（5）居中：
<1>相对于文档居中： position:absolute;
left:50%;
right:50%;
margin-left:-(width/2)px;
margin-top:-(height/2)px;
<2>相对于可视区窗口居中： position:fixed;
left:50%;
right:50%;
margin-left:-(width/2)px;
margin-top:-(height/2)px;
（6）z-index：决定了一个HTML元素的层叠级别。一个更高的z-index值意味着这个元素在叠层顺序中会更靠近顶部。
（7）如何画圆： boder:10px solid black;
border-radius:50%;（边的角度）
2018-10-20（渡一教育“web前端开发HTML+CSS精英班”笔记）
马上就可以接触实例啦，赶紧把视频课补完……
网友评论