[华为云在线课程][大话CSS][学习笔记][第4章][CSS盒模型]
【摘要】 4.1，盒模型 什么叫盒模型盒模型，英文叫做Box Model所有的HTML元素都可以看作一个盒子模型我们可以把盒模型就想象成为一个盒子盒模型中主要用来对HTML元素进行布局时使用 盒模型的作用浏览器在渲染页面的时候就会根据CSS盒模型的规则，将所有的HTML元素表示为一个个的矩形盒子，之后CSS的相关属性就作用在这些盒子上，决定了盒子的大小位置和属性等，最终显示出来。 盒模型的构成一个盒...
4.1，盒模型
什么叫盒模型
- 盒模型，英文叫做Box Model
- 所有的HTML元素都可以看作一个盒子模型
- 我们可以把盒模型就想象成为一个盒子
- 盒模型中主要用来对HTML元素进行布局时使用
盒模型的作用
- 浏览器在渲染页面的时候就会根据CSS盒模型的规则，将所有的HTML元素表示为一个个的矩形盒子，之后CSS的相关属性就作用在这些盒子上，决定了盒子的大小位置和属性等，最终显示出来。
盒模型的构成
- 一个盒模型是由4大部分所组成的
- 元素内容（content）、内边距（padding）、边框（border）、外边距（margin）
- 例如：
.box
{
padding: 20px;
border: 5px solid #000000;
margin: 50px;
}
<div class="box">我是一个无情的div元素</div>>
例子
<!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>盒模型</title>
<style>
.box
{
padding: 50px;
border: 1px solid red;
margin: 50px;
}
</style>
</head>
<body>
<div class="box">华为云</div>
</body>
</html>
4.2，内边距
什么是内边距
- 内边距是指在HTML元素内容和边框之间的区域
- 使用CSS属性padding来表示
- 属性值为长度值或百分比，默认值是0
- 注意取长度值时不能为负值
- 百分比值相当于父元素的长度比例
内边距的各个小属性
- 使用
padding-top定义上内边距 - 使用
padding-right定义右内边距 - 使用
padding-bottom定义下内边距 - 使用
padding-left定义左内边距 padding为简写属性- 例如：
.box1
{
padding: 20px;
}
.box2
{
padding-top: 50px;
}
.box3
{
padding-right: 10%;
}
例子
<!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>内边距</title>
<style>
.box
{
border: 1px red solid;
/* padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px; */
padding: 10px 20px 30px 40px; /* 顺时针 */
padding: 50px; /* 上下左右都一样 */
padding: 50px 20px; /* 上下 左右 内边距 */
}
</style>
</head>
<body>
<div class="box">华为云</div>
</body>
</html>
4.3，边框
边框
- 围绕元素内容和内边距的一条边线
- 使用属性border代表边框
- 我们可以使用边框属性精确控制这条线的样式、宽度、颜色
边框样式
- 使用border-style设置边框的样式属性
- 还可以分别设置上下左右四条边框的样式属性
- 默认值为none，表示无边框
- 还可以设置多种样式，分别为dotted、dashed、solid、double、groove、ridge、inset、outset等
边框宽度
- 使用border-width设置边框的宽度属性
- 和边框样式一样，还可分别设置上下左右四条边框的宽度
- 使用3种标准边框：thin、medium、thick
- 使用长度值作为宽度属性的属性值
边框颜色
- 使用border-color设置边框的颜色
- 还可以分别设置上下左右四条边框的颜色
- 和背景颜色属性一样，可以直接设置颜色名、十六进制颜色值或者RGB函数值
复合属性
- 复合是指一次使用多种样式定义边框
- 可以使用border-top、border-right、border-bottom、border-left分别定义四条边框的所有属性，属性值是样式、宽度和颜色，其中宽度和颜色可以省略
- 还可以直接使用border属性一次性对四条边框同时设置（顺时针排序），属性值同样是样式、宽度和颜色，其中宽度和颜色可以省略
- 例如：
.box
{
border-style: solid;
}
.box1
{
border-width: 5px;
}
.box2
{
border-color: red;
}
.box3
{
border-top: 1px dashed #00ff00;
}
.box4
{
border: 1px dotted #0000ff;
}
例子
<!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>边框</title>
<style>
.box
{
/* border-style: solid;
border-width: 10px;
border-color: aquamarine; */
/* border-bottom: 5px solid red; */
border: blue 10px dashed;
}
</style>
</head>
<body>
<div class="box">华为云</div>
</body>
</html>
4.4，外边距
什么是外边距
- 外边距是指元素边框之外的区域
- 设置外边距会在元素外围创建额外的空白空间
- 外边距的作用是控制元素和元素之间的距离
- 使用margin属性来设置外边距
- 还可以使用margin-top、margin-bottom、margin-left、margin-right分别控制元素不同方向的外边距
- 属性值可以是长度值或者百分比，如果为长度值，不能为负值
- 当使用margin简写属性时，取值的含义与padding相同
居中显示
- margin有一个很常用的特殊用法，margin左右属性值设为auto时，可以设置元素左右居中显示
例子
<!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>外边距</title>
<style>
.box
{
border: 1px solid red;
/* margin-top: 50px;
margin-left: 100px;
margin-right: 10px;
margin-bottom: 40px; */
/* margin: 50px 10px 40px 100px; */ /*同上面的四行代码一样*/
margin: 50px auto;
width: 200px;
/* margin-left: auto; */
/* margin-right: auto; */
}
.box1
{
border: 1px solid red;
margin: 20px;
}
.box2
{
border: 1px solid greenyellow;
margin: 40px;
/*大厂面试：margin有叠加效果，取两个div中最大值；
如果作用在span元素上就没有叠加效果*/
}
</style>
</head>
<body>
<!-- <div class="box">华为云</div> -->
<div class="box1">职业认证</div>
<div class="box2">微认证</div>
</body>
</html>
4.5，display属性
神奇的display属性
- display属性用于控制元素如何显示
- 当属性值为block时，会将元素以块级元素的方式显示
- 当属性值为inline时，会将元素以内联元素的方式显示
- 当属性值为inline-block时，会将元素以内联块级元素的方式显示，会同时具有这两个显示特性
- 当属性值为none时，元素将会被隐藏
- 例如：
<style>
.box1
{
display: inline;
}
.box2
{
display: block;
}
</style>
<div class="box1">我是一个div块级元素，现在被当成内联元素显示了</div>
<span class="box2">我是一个span内联元素，现在被当成块级元素显示了</span>
例子
<!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>display</title>
<style>
.box1
{
background-color: yellow;
display: inline;
}
.box2
{
background-color: green;
display: block;
}
.box3
{
border: 1px solid red;
display: inline-block;
width: 200px;
height: 100px;
font-size: 14px;
}
.box4
{
border: 1px solid red;
display: inline-block;
/* display: none; */
width: 200px;
height: 100px;
font-size: 14px;
}
span
{
background-color: red;
}
body
{
font-size: 0px;
}
</style>
</head>
<body>
<!-- <div class="box1">华为云</div>
<span class="box2">华为云</span> -->
<div class="box3">华为云一号</div>
<div class="box4">华为云二号</div>
<!--
大厂面试：为什么两个div之间有缝隙？
答：因为代码格式化换行回车导致，如何既要实现代码格式化又把缝隙去掉？
可以在body加入font-size:0px；然后类选择器中设置字体大小
-->
<!-- <span>span1</span>
<span>span2</span> -->
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）