盒模型
1、盒子中的区域 div,但凡是块元素,都可以认为是盒子
一个盒子中主要的属性you:width、height、padding、border、margin。
width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度。
height是“高度”的意思,CSS中height指的是内容的高度,而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距”
<div class="box1"> <img src="logo.png" alt=""> </div>
css样式:
.box1{
/* 盒子的实际宽度 === 左右边的border+padding+内容宽度 */
background-color: lightblue;
/* 盒子内容的宽高度 */
width: 720px;
height: 720px;
border: 1px solid lightskyblue;
margin: 0 auto;
padding:10px 2 0px 30px 40px;
}
.box1 img{
width: 100%;
}
当前盒子的实际宽度为:720+1+1=722px;
2、其中可以给盒子添加padding,margin属性,下面以padding为例:
padding是4个方向的,所以我们能够分别描述4个方向的padding。
方法有两种,第一种写小属性;第二种写综合属性,用空格隔开。
小属性:
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
等价于:padding:30px 20px 40px 100px;
如果只写3个值:padding: 20px 30px 40px;
则是上、右、下、左和右一样:
如果只写2个值:padding: 30px 40px;
所以padding: 30px 40px;等价于:
padding-top: 30px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 40px;
要懂得,用小属性层叠大属性:padding: 20px;
padding-left: 30px;
错误写法(将会采取就近原则渲染):padding-left: 30px;
padding: 20px;
3、border边框有三个要素:粗细、线型、颜色。颜色如果不写,默认是黑色。
代码:border: 1px dashed red;
其中dashed是线型,还有:
<p class="w w1">dotted</p>
<p class="w w2">dashed</p>
<p class="w w3">solid</p>
<p class="w w4">double</p>
<p class="w w5">groove</p>
<p class="w w6">ridge</p>
<p class="w w7">inset</p>
<p class="w w8">outset</p>
css样式:
.w{
width: 100px;
margin: 0 auto;
text-align: center;
margin-top: 10px;
}
.w1{
border:1px dotted red;
}
.w2{
border:1px dashed red;
}
.w3{
border:1px solid red;
}
.w4{
border:1px double red;
}
.w5{
border:1px groove red;
}
.w6{
border:1px ridge red;
}
.w7{
border:1px inset red;
}
.w8{
border:1px outset red;
}
代码演示:
border属性能够被拆开,有两大种拆开的方式:
1) 按3要素:border-width、border-style、border-color
2) 按方向:border-top、border-right、border-bottom、border-left