HTMl5知识点6（٩(*Ӧ)و写的全对）

HTML5知识点6

1.什么是盒子模型

边框：围绕在内边距和内容外的边框
外边距：位于边框外的区域，边框外面周围的家里
内边距：边框内部的区域，是内容与边框之间的距离
实际内容：盒子的内容,用于显示文本或图像。

1.2边框

边框样式:常见的属性
solid:实线边框。
dashed：虚线边框
dotted：点线边框
double：两个边框。两个边框的宽度和border-width的值相同。

1.2.1边框宽度

thick,medium(默认值)和thin

1.2.2边框颜色

name：指定颜色的名称：如“red”
RGB：指定RGB值，如“rgb（255,0，0）”
Hex：指定十六进制值，如“#ff0000”。

1.2.3边框的复合属性

可以把宽度，样式，颜色写在一起。

1.3外边距

margin-top:元素的上外边距。
margin-right：设置元素的右外边距
margin-bottom：设置元素的下外边距
margin-left：设置元素的左外边距
margin：复合属性，在一个声明中设置所有外边距属性。

1.4内边框距

padding-top:元素的上内边距
padding-right:元素的右内边距
padding-bottom:元素的下内边距
padding-left：元素的下内边距
padding：复合属性,在一个声明中设置所有内边距属性

1.5盒子模型的尺寸

网页是由多个盒子排列而成的,每个盒子都有固定的大小.
盒子的总宽度=width+左右内边距之和左右边框宽度之和。
盒子的总高度=height+上下内边距之和上下边框之和上下边框高度之和。

1.6box-sizing属性

box-sizing常见的属性
content-box
border-box
inherit

box-sizing语法：box-sizing:content-box|border-box|inherit;

2.圆角边框

border-radius

语法：
border-radius:length(1,4);

使用border-radius制作特殊图形
元素的宽,高必须相同
圆角的半径为元素宽度的一半或50%

3box-shadow属性的语法及浏览器兼容性

语法：
	box-shadow：h-shadow v-shadow blur sparead inset；

值	描述
h-shadow	必须的.。水平阴影的位置。允许负数
v-shsdow	必须的。垂直阴影的位置。允许负数
blur	模糊距离
spread	阴影的大小
color	阴影的颜色
inset	从外层的阴影改变内侧阴影