CSS的盒子模型
今天是学习css的样式第三天了,老师之前向我们讲了css样式的应用的优先级,和各个选择器等的权重,让我了解到了css的权重的大小数值
种类 | 权重 |
---|---|
继承或者* 的贡献值 | 0,0,0,0 |
每个元素(标签)贡献值为 | 0,0,0,1 |
每个类,伪类贡献值为 | 0,0,1,0 |
每个ID贡献值为 | 0,1,0,0 |
每个行内样式贡献值 | 1,0,0,0 |
每个!important贡献值 | ∞ 无穷大 |
让我们知道了权重可以加,但是不能进制,级别之间不可超越,也举了一些例子让我们更加具体的了解他们的算法。
而今天讲的重点是关于css的盒子模型,让我了解了盒子模型在网页里起到布局作用,首先讲的是合作的边框,他的语法为border : border-width || border-style || border-color
,设置边框的样式属性为(border-style)
以及总结了边框样式的使用为
设置内容 | 样式属性 | 常用属性值 |
---|---|---|
上边框 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色; | |
下边框 | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色; | |
左边框 | border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色; | |
右边框 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色; | |
样式综合设置 | border-style:上边 [右边 下边 左边]; | none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线 |
宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 |
颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值:#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
边框综合设置 | border:四边宽度 四边样式 四边颜色; |
还讲了边框变圆角的方法为border-radius: 左上角 右上角 右下角 左下角;
以及内边距(padding)和外边距(margin)里面的各种使用方法,并且用不同的案例来说明他们的使用方法和区别让我们能更好的熟悉它们的使用和理解他们。