css盒子模型
css模型概述
<style>
.d1 {
/*盒子在网页中实际所占的宽度*/
/*300px + 20px + 2px*/
/*盒子在网页中实际所占有的宽度(高度):width+ padding*2 + border*2 */
width: 300px;
height: 300px;
padding:10px; /*内边距*/
border: 1px solid #ccc;
margin: 10px; /*外边距*/
}
</style>
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
术语解释:
height:高度
width:宽度
padding:内边距
maigin:外边距
border:边框
CSS padding属性
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。
* {
/*把网页中默认的margin和padding去掉*/
margin:0;
padding:0;
}
.d1 {
width: 160px;
height: 160px;
background-color: orange;
/*padding:10px ; 上下左右四个方向都为10px*/
/*padding:10px;*/
/*当padding:10px 20px ;设为两个值的时候,第一个表示上下,第二值表示左右*/
/*padding:10px 20px;*/
/*当padding:10px 20px 30px 设置为三个值的时候,第一个值表示上 第二个值表示左右,第三个值表示下*/
/*padding:10px 20px 30px;*/
/*四个值的时候,采用上右下左*/
padding:10px 20px 30px 40px;
/*padding:20px;
padding-left: 30px;*/
}
显示效果如下:
padding上右下左顺时针顺序依次为10px,20px,30px,40px。
CSS border边框
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面:宽度、样式,以及颜色。
.d1 {
border:10px solid red;
}
边框有很多属性可以自行设计篇幅有限这里不详细介绍。
CSS margin属性
设置外边距的最简单的方法就是使用 margin 属性。
margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。
p {margin: 20px 30px 30px 20px;}