盒模型/auto属性值的用法-IT技术网站

框模型中的概念
框模型:css中的所有元素都是使用一个矩形框来显示,成为元素框
content:内容区,在框模型的中心,呈现元素中的内容,可能是文本,或子元素等.必须要有,但不一定有内容.用一幅画来类比,就是画内容本身.
padding:内边距,围在内容区四周的第一层”矩形框”,透明,非必须,可以设置宽度.用一幅画来类比,就是画面四周的留白.
border:边框,围在内容区四周的第二层”矩形框”,非必须,可以设置颜色,边框样式和宽度.用一幅画来类比,就是画框部分.
margin:外边距,围在内容区四周的第三层”矩形框”,透明,非必须,可以设置宽度.假设有两幅画并列摆在一起,外边距就是两幅画之间的间隔.
框模型中各个部分的值设置
box-sizing:设置框模型的尺寸覆盖.其值有:
border-box:元素的宽度(width)属性值=内容区宽度+左右内边距+左右边框宽度;元素的高度(height)属性值=内容区宽度+上下内边距+上下边框款速.除开内容区宽高度,其他都是固定值,内容区宽高度由其他固定值计算得出.
content-box:元素的宽度(width)属性值=内容区宽度;元素的高度(height)属性值=内容区高度;其他边框/边距均不在width和height范围中,即,元素的实际尺寸会大于其宽度/高度属性设置的大小.
border-left/border-right/border-top/border-bottom:设置左/右/上/下边框的宽度,样式和颜色.如:border-left:1pxsolidblack;.
padding-left/padding-right/padding-top/padding-bottom:设置左/右/上/下内边距的宽度.如:padding-left:10px;
margin-left/margin-right/margin-top/margin-bottom:设置左/右/上/下外的宽度.如:margin-left:20px;
margin/padding/border:同时设置四条外边距/内边距/边框的宽度,样式和颜色(border).
其中margin/padding取值:
单值:四条外边距/内边距设置为相同的数值;如:margin:10px;
双值:上下外边距/内边距设置为第一个值,左右外边距/内边距设置为第二个值.如:padding:10px20px;
三值:上外边距/内边距设置为第一个值,左右外边距/内边距设置为第二个值;下外边距/内边距设置为第三个值.
四值:第一到第四个值,分别设置上,右,下,左外边距/内边距.
margin的取值:
单值:只设置边框宽度.margin:1px;.
双值:设置宽度和样式.margin:1pxdashed;.
三值:设置宽度,样式和颜色.margin:1pxsolidpink;.
auto的用法
auto:外边距可以设置宽度为auto.
如果是块级元素,水平方向的一条边距被设置为auto,另一边是确定的值,则先匹配确定值,auto匹配剩余的宽度.即,会实现左对齐/右对齐的效果.
如果是块级元素,水平方向的两条边距都被设置为auto,则会达到水平居中的效果.
块级元素的垂直方向,行内元素的所有方向被设置为auto,则auto都会被当做0值来设置.
实例演示auto的用法
<!DOCTYPEhtml>
<htmllang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport”content=”width=device-width,initial-scale=1.0″>
<title>Document</title>
<style>
*{
border:0;
padding:0;
border:0;
box-sizing:border-box;
}
.item{
width:40px;
height:40px;
background-color:orange;
margin:10px0;
}
/*使用auto实现右对齐效果*/
.first{
margin:020px0auto;
}
/*使用auto实现左对齐效果*/
.second{
margin:10pxauto020px;
}
/*使用auto实现水平居中的效果*/
.third{
margin:0auto;
}
/*垂直方向使用auto,相当于设置值为0*/
.fourth{
margin:auto20px;
}
/*演示垂直方向使用auto,相当于设置值为0用,会紧贴第四个小方块*/
.fifth{
width:100%;
margin:0;
}
/*如果父元素没有设置高度,即父元素的高度是被子元素撑开,那么当其子元素浮动后,
会引起父元素高度塌陷,使用overfloat:`auto`可以解决这个问题*/
.parent{
margin-top:30px;
padding:20px;
background-color:plum;
overflow:auto;
}
.son{
width:120px;
height:80px;
background-color:wheat;
/*浮动起来*/
float:left;
}
</style>
</head>
<body>
<divclass=”itemfirst”>1</div>
<divclass=”itemsecond”>2</div>
<divclass=”itemthird”>3</div>
<divclass=”itemfourth”>4</div>
<divclass=”itemfifth”>5</div>
<divclass=”parent”>
<divclass=”son”>
</div>
</div>
</body>
</html>