一.HTML元素分类及特点
1.块级元素
常见的块元素:
body、 h1~h6、 p、 div、 table、 form、 ul、 ol、li
块级元素的特点：
- 每个块独占一行，不与其他元素共行显示
- 可以手动设置宽高
- 默认宽度与父元素保持一致(table除外，table的默认宽度与td单元格内容相关)
行内元素
常见的行内元素:
span 、lable 、a 、b、 i、strong、u、s、sub、sup
行内元素的特点：
- 可以与其他元素共行显示
- 默认尺寸由内容多少决定，不能手动设置宽高
行内块元素
常见的行内块元素:
img 、表单控件 、
- 可以与其他元素共行显示
- 可以手动设置宽高
以上, 示例见：01-tag.html
二. HTML标签嵌套
1. 块元素中可以嵌套任何类型的元素
特殊情况：段落标签p中只能放行内元素或行内块元素!!!
2. 行内元素只能嵌套行内元素或行内块元素
块元素可以手动设置宽高,古国内容超出尺寸范围，如何处理？
文本内容超出设置的宽高样式，会发生文本溢出！！
属性：overflow
取值:
- visible ： 默认值，表示溢出内容可见。
- hidden ： 溢出内容隐藏。
- scroll : 为元素添加水平和垂直方向的滚动条（不论内容是否溢出）。
- auto ： 自动在溢出方向添加可用的滚动条（哪个方向溢出加在哪个方向）。
三.边框
CSS中认为所有的元素都是矩形区域，边框是围绕元素内容出现的线条样式。
1.边框属性
简写属性： border
取值： width 、 style、 color；
- width ：像素值
- style ： 边框样式，可取值：
- solid ： 实线边框
- dashed ： 虚线边框
- dotted ： 单线边框
- double ： 双线边框
- color : 边框颜色，默认为黑色。
/* 如下： */
<sttle>
p{width: 300px; height: 100px;}
.p1{border: 5px solid red;}
.p2{border: 5px dashed green;}
.p3{border: 5px dotted blue;}
.p4{border: 5px double orange;}
/* 宽度和颜色有默认值，可不写 */
.p5{border:double}
</style>特殊用法：
1.边框默认具备3px的宽度,黑色的边框颜色,边框样式必须指定.
border:solid;2.表单按钮,可以取消边框.
border:none;示例见 03-border.html
2.单边框设置
单独设置元素"上右下左"四个方向的边框。
属性：
- border-top : 上边框
- border-right ： 右边框
- border-bottom : 下边框
- border-left ： 左边框
取值 ： width style color;
示例见 03-border.html
3.网页三角标制作
- 元素的width / heigth 设置为0
- 涉及三角标，必须由边框拼接而成
- 设置四个方向的边框，宽度保持一致
- 通过颜色控制三角标显示(透明色可以使用transparent表示)
示例见 03-border.html
四.圆角边框
属性： border-radius取值： px 、 %(百分比单位依据元素尺寸计算)
取值情况：
1.取一个值。
表示"上>右>下>左"四个角程度相同。最大值取到50%，此时元素会变化(变椭圆或圆)。
2.取两个值。
border-radius:30px 50px;
第一个值表示“上/下”两个角的圆角程度。 第二个值表示“左/右”两个角的圆角程度。(依然顺时针…)
3.取三个值。
border-radius:10px 20px 30px;
三个值分别对应“上>右>下”三个角，缺少的第四个值与第二个值相等。
4.取四个值。
border-radius:10px 20px 30px 30px;
分别代表"上>右>下>左"四个角的半径值。
单独给一个角或两个角设置半径时，可以大于50%，但是四个角不能同时大于50%。示例见:04-brder-radius.html
五.盒阴影。
为元素添加阴影效果
属性：box-shadow
取值：offset-x 阴影的水平偏移距离。offset-y 阴影的垂直偏移距离，取像素值。blur 阴影的模糊程度，取像素值，越大越模糊。sprea 阴影的延伸距离，取像素值。(此属性可省略不写)color 阴影颜色。(若不写则默认为黑色)。
浏览器的坐标系
不管是浏览器窗口，还是元素本身，都包含坐标关系。
默认以左上角为(0,0)，向右为 X 轴正方向，向下为 Y 轴正方向。
正值表示正方向，负值表示负方向(水平偏移、垂直偏移、延伸距离可为负)。
示例见:05-box-shadow.html
六.盒模型(框模型)
1.盒模型介绍
CSS中，认为所有元素皆为框。
1.元素在文档中的最终占据尺寸是由：内容尺寸，内边距大小，边框，外边距大小来决定的。
2.计算元素最终占据的大小。
在标准盒模型下：
最终宽度 = width + 左右内边距 + 左右边框 + 左右外边框
最终高度 = height + 上下内边距 + 上下边框 + 上下外边框其他盒模型元素尺寸的计算(表单元素):
元素设置的width，height表示包含内容+内边框+边框在内的总的宽度或总的高度。
最终宽度 = width + 左右外边距
最终高度 = height + 上下外边距2.外边距
什么是外半边距？ 就是指元素与元素之间的距离。
2.1 外边距的简写属性：
属性：margin 表示外边距。
取值： 像素值。
取值情况：
- 给一个值
margin:10px;
表示：上右下左四个方向各添加10px外边距。
- 给两个值
margin:10px 20px;
表示：上下方向添加10px外边距； 左右方向添加20px外边距。
- 给三个值
margin:10px 20px 30px;
表示：左10px，右20px，下30px，左=右=20px。
- 给四个值
margin:10px 20px 30px 40px;
表示：分别设置四个方向的外边距。示例见：06-margin.html
特殊用法：
1.margin ：0 表示：消除元素的默认外边距。
2.margin:20px auto 上下=20px，左右外边距可以使用auto,实现元素水平居中。
3.外边距可以取负值，参照浏览器坐标器。可以实现元素位置的微调。
2.2 单独设置四个方向的外边距
属性：
margin-top
margin-right
margin-bottom
margin-left
取值: 只给一个值
2.3 外边距合并：
有时候给两个元素设置外边距属性值，会产生冲突…
垂直方向上的外边距 : margin-top
问题：给子元素添加的margin-top属性,可能会作用于父元素上。
解决：
- 为父元素添加margin-top上外边框属性。
- 为父元素设置padding-top顶部内边框 ： padding-top：0.1px
- 为父元素设置overflow:hidden 溢出属性。
垂直方向上的外边距 : margin-botten
两个块元素分别设置margin-top 、margin-botto，最终元素之间的距离取较大的值。
水平方向上的外边距(行内元素)：
默认行内元素水平方向上的外边距会叠加显示。
2.4 默认具有外边距的元素：
body 、h1~h6 、p 、ul 、ol
通常情况下，会利用群组选择器取消以上元素的外边距(根据实际需要再自己添加):
body,h1,h2,h3,h4,h5,h6,p,ul,ol{margin : 0px;}
3.内边距
什么是内半边距？就是指元素内容与边框之间的距离。
简写属性：
属性 ：padding
取值 ：像素值
取值情况：
padding:10px;
设置上右左下四个方向上内容与边框之间的距离为10pxpadding:10px 20px ;
设置上下内边距为10px， 左右内边距为20pxpadding:10px 20px 30px;
设置上内边距=10px,右=20px，下=30px，左=20pxpadding:10px 20px 30px 40px;
分别设置上右下左四个方向的内边距。
单独设置某个方向的内边距属性:
属性：
padding-top
padding-right
padding-botten
padding-left
取值：给一个像素值
不同元素类型对盒模型属性的支持情况：
- 块元素完全支持盒模型属性
- 行内元素不完全支持盒模型属性
(margin-top / margin-bottom 这两个属性不支持！！)
默认带有内边距的元素:
ul 、 ol、表单元素(文本框/表单)
4. box-sizing
作用：指定盒模型的计算方式。
取值：
box-sizing: content-box(默认值)
元素的width , height属性只设置内容尺寸，最终在文档中占据的尺寸为margin border padding width/height累加得到。
box-sizing: border-box元素的width, height属性设置包含边框在内的区域大小，一旦元素设置内边距和边框，会压缩内容显示区域。
元素最终在文档中占据的尺寸由margin和width/ height相加得到。
注意： 表单input按钮默认采用border-box计算尺寸 !!!
示例见：08-box-sizing.html
