盒子模型
目标:能够认识 盒子模型的组成 **,**能够掌握盒子模型 边框、内边距、外边距 的设置方法
盒子模型的介绍
- 盒子的概念
- 页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局
2.浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子
- 盒子模型
➢ CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(
margin)构成,这就是 盒子模型
➢ 盒子模型一共有几个部分组成?分别是什么?
-
内容区域:content
-
边框区域:border
-
内边距区域:padding
-
外边距区域:margin
content内容区域的宽度和高度
➢ 作用:利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性:width / height
➢ 常见取值:数字+px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
边框( border )
➢ 作用:给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性:
作用 | 属性名 | 属性值 |
---|---|---|
边框粗细 | border-width | 数字+px |
边框样式 | border-style | 实线solid 虚线dashed 点线dotted |
边框颜色 | border-color |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* border: 粗细 线条样式 颜色 -- 不分先后顺序 */
/* solid : 实线 */
/* border: 1px solid #000; */
/* dashed: 虚线 */
/* border: 5px dashed #000; */
/* dotted : 点线 */
/* border: 5px dotted #000; */
border-left: 5px dotted #000;
border-right: 5px dotted #000;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>
➢ 属性名:border
➢ 属性值:单个取值的连写,取值之间以空格隔开
• 如:border : 10px solid red;
➢ 快捷键:bd + tab
内边距( padding )
➢ 作用:设置 边框 与 内容区域 之间的距离
➢ 属性名:padding
➢ 常见取值:
➢ 记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的!!
➢场景:只给盒子的某个方向单独设置内边距
➢属性名:padding -方位名词
➢属性值:数字+ px
外边距(margin)
➢ 作用:设置边框以外,盒子与盒子之间的距离
➢ 属性名:margin
➢ 常见取值:
➢ 记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的!!
➢ 场景:只给盒子的某个方向单独设置外边距
➢ 属性名:margin - 方位名词
➢ 属性值:数字 + px
margin单方向设置的应用
➢ 应用:
盒子模型示例
➢ 需求:根据设计图,通过PxCook量取数据,代码在网页中完成一致的效果
➢ 布局顺序:
- 从外往内,从上往下
➢ 每一个盒子的样式:
-
宽高
-
辅助的背景颜色
-
盒子模型的部分:border、padding、margin
-
其他样式:color、font-、text-、……
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
/* 所有的标签都可能添加内边距或border, 都內减模式 */
box-sizing: border-box;
}
.news {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 50px auto;
padding: 42px 30px 0;
}
.news h2 {
border-bottom: 1px solid #ccc;
font-size: 30px;
/* 行高是1倍, 就是字号的大小 */
line-height: 1;
padding-bottom: 9px;
}
/* 去掉列表的符号 */
ul {
list-style: none;
}
/* li {} */
.news li {
height: 50px;
border-bottom: 1px dashed #ccc;
padding-left: 28px;
line-height: 50px;
}
.news a {
text-decoration: none;
color: #666;
font-size: 18px;
}
</style>
</head>
<body>
<!-- 从外到内 -->
<div class="news">
<h2>最新文章/New Articles</h2>
<ul>
<li><a href="#">北京招聘网页设计,平面设计,php</a></li>
<li><a href="#">北京招聘网页设计,平面设计,php</a></li>
<li><a href="#">北京招聘网页设计,平面设计,php</a></li>
<li><a href="#">北京招聘网页设计,平面设计,php</a></li>
<li><a href="#">北京招聘网页设计,平面设计,php</a></li>
</ul>
</div>
</body>
</html>