软膜做网站有用吗,wordpress数据表位置,创意办公空间设计,中国风电商网站建设CSS 盒模型
盒模型 网页设计中常听的属性名#xff1a;内容(content)、填充(padding)、边框(border)、边界(margin)#xff0c; CSS盒子模式都具备这些属性。 这些属性我们可以把它转移到我们日常生活中的盒子#xff08;箱子#xff09;上来理解#xff0c;日常生活中所…CSS 盒模型
盒模型 网页设计中常听的属性名内容(content)、填充(padding)、边框(border)、边界(margin) CSS盒子模式都具备这些属性。 这些属性我们可以把它转移到我们日常生活中的盒子箱子上来理解日常生活中所见的盒子也就是能装东西的一种箱子也具有这些属性所以叫它盒子模式。 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒模型中的边框 盒子模型的边框就是围绕着内容及补白的线这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框 div{ border:2px solid red;}上面是 border 代码的缩写形式可以分开写 div{border-width:2px;border-style:solid;border-color:red;
}注意 border-style边框样式常见样式有 dashed虚线| dotted点线| solid实线。 border-color边框颜色中的颜色可设置为十六进制颜色如: border-color:#888;//前面的井号不要忘掉。 border-width边框宽度中的宽度也可以设置为 thin | medium | thick但不是很常用最常还是用象素px。 现在有一个问题如果有想为 p 标签单独设置下边框而其它三边都不设置边框样式怎么办呢css 样式中允许只为一个方向的边框设置样式 div{border-bottom:1px solid red;}同样可以使用下面代码实现其它三边(上、右、左)边框的设置 border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;宽度和高度 盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的css内定义的宽width和高height指的是填充以里的内容范围。 因此一个元素实际宽度盒子的宽度左边界左边框左填充内容宽度右填充右边框右边界。 填充 元素内容与边框之间是可以设置距离的称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码 div{padding:20px 10px 15px 30px;}顺序一定不要搞混。也可以分开写上面代码。 如果上、右、下、左的填充都为10px;可以这么写 div{padding:10px;}如果上下填充一样为10px左右一样为20px可以这么写 div{padding:10px 20px;}边界 元素与其它元素之间的距离可以使用边界margin来设置。边界也是可分为上、右、下、左。如下代码 div{margin:20px 10px 15px 30px;}也也可以分开写。 如果上右下左的边界都为10px;可以这么写 div{ margin:10px;}如果上下边界一样为10px左右一样为20px可以这么写 div{ margin:10px 20px;}总结一下padding和margin的区别padding在边框里margin在边框外。 本文转载自 陈浩的个人博客《CSS 盒模型》
