HTML - 盒子模型
-
边框样式(border-style)
属性值:
none:没有边框
solid:边框为单实线
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线综合属性: 上右下左 顺时针方向
border-style:solid ; /四边均为实线/
border-style:solid dotted ; /上下实线、左右点线/
border-style:solid dotted dashed; /上实线、左右点线、下虚线/ -
边框颜色(border-color)
颜色值,例:red、green
#十六进制色值,例:#ccc 实际工作中最常用
rgb(r,g,b),例:rgb(30,0,0)
rgb(r%,g%,b%)
综合属性同上
边框综合属性(border)
border:宽度,样式,颜色
宽度、样式、颜色顺序任意,不分先后 -
圆角边框(border-radius)
圆角边框属性是CSS3新增属性
border-radius:参数1/参数2
border-radius属性同样遵循值复制的原则,其水平半径(参数1)和垂直半径(参数2)均可以设置1-4个参数值,用来表示四角圆角半径的大小。
例:border-radius: 20px 30px 10px; -
边距属性
“内边距”和“外边距”两种
内边距(padding)不允许使用负值
padding-top:上边距;
padding-right:右边距;
padding-bottom:下边距;
padding-left:左边距;
复合属性
padding:四边内边距;
外边距(margin)
注意:和内边距不同,外边距margin允许使用负值
margin-top:上外边距;
margin-right:右外边距;
margin-bottom:下外边距;
margin-left:左外边距;
符合属性
margin:四边外边距; -
定位 position
定位模式
1.静态定位 static
默认位置 偏移无效果
2.相对定位 relative
相对于文档流的位置来定位,处理后保留原来位置
3.绝对定位 absolute
将元素依据已经定位的父元素进行定位,没有父元素时依据body,处理后不保留原来位置
4.固定定位 fixed
相对于浏览器窗口来定位