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 | 从外层的阴影改变内侧阴影 |