4. css盒子模型
2019-09-23 本文已影响0人
瑟闻风倾
说明：盒子模型的内容范围包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。盒子模型就是通过div和css样式来设计一个可以添加逻辑的效果。
盒子模型.PNG
注意：这里的盒子模型是遵循W3C的标准盒子模型，IE的盒子模型这里不做讲解。
1. 内边距(padding)
padding.PNG
td{
padding: 100px;
}
<body>
<table border="1">
<tr>
<td>内边距</td>
</tr>
</table>
</body>
备注：内边距(padding)有1个参数时，上下左右外边距都为该参数值；2个参数时，第一个参数为上下外边距值，第二个参数为左右外边距值；4个参数分别代表上右下左外边距值。
2. 边框(border)：可以创造出效果出色的边框，并可以应用于任何元素。
基本的边框属性
- 边框/单边框宽度：border-width
- 边框/单边框样式：border-style
- 边框/单边框颜色：border-color
<body>
<p>边框样式</p>
</body>
p{
border-width: 2px;
border-style: dotted;
border-top-style: double;
border-color: red;
}
简化写法
p{
border: 2px solid red;
}
备注：border: 1px solid red;三个参数分别为边框的宽度、样式和颜色属性。
css3提供的边框属性
- 圆角边框： border-radius
- 边框阴影：box-shadow
- 边框图片：
p{
width: 100px;
background-color: blue;
text-align: center;
border: 2px solid red;
border-radius: 10px;
}
#divid{
width: 100px;
height: 100px;
text-align: center;
background-color: blue;
border-radius: 10px;
box-shadow: 10px 30px 5px red;
}
<body>
<p>圆角效果</p>
<div id="divid"></div>
</body>
阴影属性(box-shadow)的4个参数分别代表：背景阴影向右移动10个像素，再向下移动20个像素；阴影透明度；阴影颜色。
3. 外边距(margin)
外边距.PNG
备注：外边距和内边距的属性比较相似。margin的参数个数和对应代表大含义和padding一致。
.mg{
width: 100px;
height: 100px;
background-color: royalblue;
margin: 10px;
}
<body>
<div class="mg">外边距</div>
</body>
盒子模型示例
body{
margin: 0px;
}
.container{
margin: 20px;
}
.bd{
border-style: solid;
}
.pd{
padding: 10px;
}
.content{
background-color: blue;
}
<body>
<div class="container">
<div class="bd">
<div class="pd">
<div class="content">Hello liy</div>
</div>
</div>
</div>
</body>
说明：最外层的div为容器层，之后为边框、内边距和内容区域。
4. 外边距合并：外边距合并就是一个叠加的概念
外边距合并.PNG
说明：外边距合并遵循边距大的一方，即元素1的外边距为10px，元素2的外边距为20px,则元素1和元素2间的距离为20px；元素1的外边距为10px，元素2的外边距为10px,则元素1和元素2间的距离为10px。
5. 盒子模型应用
页面盒子组成.PNG
.top{
width: 100%;
height: 50px;
background-color: black;
}
.top_content{
width: 75%;
height: 50px;
margin: 0px auto;
background-color: blue;
}
.body{
width: 75%;
height: auto;
margin: 10px auto;
background-color: blanchedalmond;
}
.body_image{
width: 100%;
height: 100px;
background-color: yellow;
}
.body_content{
width: 100%;
margin: 10px auto;
background-color: darkgray;
}
.content_notification{
width: 100%;
height: 30px;
background-color: green;
}
.content_infomation{
width: 100%;
height: 200px;
margin: 0px auto;
background-color: pink;
}
.foot{
width: 75%;
height: 100px;
margin: 10px auto;
background-color: brown;
}
.foot_content{
width: 100%;
height: 70%;
background-color: powderblue;
}
.foot_subnav{
width: 100%;
height: 30%;
background-color: black;
}
<body>
<div class="top">
<div class="top_content"></div>
</div>
<div class="body">
<div class="body_image"></div>
<div class="body_content">
<div class="content_notification"></div>
<div class="content_infomation"></div>
</div>
</div>
<div class="foot">
<div class="foot_content"></div>
<div class="foot_subnav"></div>
</div>
</body>
效果展示.PNG
5. 盒子类型-diaplay属性
- block：将内联元素变为块级元素
- inline：将块级元素变为内联元素
- inline-block：与inline的效果相比，可设置内联元素的宽度
- inline-table：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子分类-display属性</title>
<style>
div{
background-color: #FF8C00;
display: inline-block;
width: 300px;
}
span{
background-color: aqua;
display: block;
width: 300px;
}
table{
border: 1px solid #FF8C00;
/*HELLO WORLD原本显示在表格的上下，此时显示在左右*/
display: inline-table;
}
td{
border: 1px solid darkturquoise;
}
</style>
</head>
<body>
<div>div元素(原本属于块级元素，单占一行)</div>
<div>div元素(原本属于块级元素，单占一行)</div>
<span>span元素(原本属于内联元素，共占一行)</span>
<span>span元素(原本属于内联元素，共占一行)</span>
<br/>
HELLO
<table>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>H</td><td>I</td><td>J</td><td>K</td></tr>
<tr><td>O</td><td>P</td><td>Q</td><td>R</td></tr>
<tr><td>U</td><td>V</td><td>W</td><td>X</td></tr>
</table>
WORLD
</body>
</html>
image.png
- list-item：将普通的多个元素以列表的形式显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子分类-display属性</title>
<style>
div{
display: list-item;
list-style-type: circle;
margin-left: 30px;
}
</style>
</head>
<body>
<div>示例1</div>
<div>示例2</div>
<div>示例3</div>
<div>示例4</div>
</body>
</html>
image.png
