首页 > 代码库 > 盒模型(一)
盒模型(一)
一。什么是盒模型
padding(内边距,一个盒子里的边距离内容的距离,上下左右) margin(外边距,两个盒子之间的距离) border(盒子的边框) 内填充,外边距,边框都有四个方向:如padding-top,padding-right,padding-bottom和padding-left,
盒子模型里面的元素实际的高度加上padding-top,padding-bottom,
实际宽度是元素宽度加上padding-right和padding-left。
二。盒模型-边框
盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
div{
border:2px solid red;
}
上面是 border 代码的缩写形式,可以分开写:
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意:
1、border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。
2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
border-color:#888;//前面的井号不要忘掉。
3、border-width(边框宽度)中的宽度也可以设置为:
thin | medium | thick(但不是很常用),最常还是用象素(px)。
4.如果有想为 p 标签单独设置下边框,而其它三边都不设置边框样式,css 样式中允许只为一个方向的边框设置样式:
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置:
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
盒模型(一)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。