04 - 盒子模型解析
1.class补充
两个或以上class类名中间需要空格间隔,代码如下:
<head>
<style>
.list li{
color:red;
}
.blue{
/*可复用性*/
baclground-color:blue;
}
.f30{
font-size:30px;
}
</style>
</head>
<body>
<ul class='list'>
<li class='blue f30'>1</li>
<li class='f30'>2</li>
<li class='blue'>3</li>
</ul>
</body>
2. 盒子模型
盒子模型的组成:
- 边框 border
- 内边距 padding
- 外边距 margin
- content(内容)
边框(圈一块地的围栏)
- 边框宽度: 单位为像素(px)
- 边框颜色: 颜色词/rgb/rgba,十六进制颜色
- 边框线条样式: solid/dotted/dashed/double
border写法
写法1:
<style>
.box{
width: 100px;
height: 100px;
/*要针对点*/
/* top 上,right 右,bottom 下,left 左 */
border-width: 1px 1px 1px 1px</