CSS的盒子模型

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)里面的各种使用方法,并且用不同的案例来说明他们的使用方法和区别让我们能更好的熟悉它们的使用和理解他们。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值