(一)CSS盒模型知识点:
1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
2. 盒子默认都是块级元素: 独占一行,支持宽度设置
3. 盒子模型分为三个层级:
a. 内容级: 宽高和背景三个属性
(1): width
(2): height
(3): background-color (默认透明)
b. 元素级(可视范围)
(1): 包括内容级(width + height + background)
(2): 内边距: padding
(3): 边框: border
c. 位置级:margin, 决定当前盒子与其它盒子之间的位置与关系
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <link rel="stylesheet" href="static/css/style04.css"> -->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: aqua;
/* 内边距padding设置顺序:上右下左(顺时针) */
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
/* 简写 */
padding:20px 30px 40px 50px;
/* 如果左右相等30,而上下不相等20,40,可以这样简写 */
padding:20px 30px 40px;
/* 如果左右相等30.上下相等40,可以这样简写 */
padding:40px 30px;
/* 注:只要出现在第二个位置上,就一定代表着左右间距 */
/* 边框与内边距相比,不是透明的是可见的.除了宽度,还可设置线条样式和颜色 */
/* 上边框 */
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
/* 右边框 */
border-right-width: 10px;
border-right-style: dashed;
border-right-color:green;
/* 下边框 */
border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color:blue;
/* 左边框 */
border-left-width: 10px;
border-left-style: double;
border-left-color:black;
/* 简写 */
border-top:10px solid red;
border-right:10px dashed green;
border-bottom:10px dotted blue;
border-left:10px double black;
/* 如果让每个边框都一样的话直接用border */
border:10px solid red;
}
.box2 {
/* 继承上一个盒子的样式,宽高一致会导致盖住上一个盒子 */
height: inherit;
/* height: 100px; */
background-color: wheat;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
