一、盒模型基础知识
图片引用来自:https://www.w3school.com.cn/css/css_boxmodel.asp
–每个盒子都由以下几个部分组成
–内容区–content
–内边距–padding
–边框–border
–外边框–margin
1.1、内容区(content) ,
元素中的所有的子元素和文本内容都在内容区中排列
-内容区的大小由width和height两个属性来设置
-width设置内容区的宽度
-height设置内容区的高度
width: 200px;
height: 200px;
background-color: red;
1.2、内边距padding
内边距( padding)
内容区和边框之间的距离是内边距
一共有四个方向的内边距:
padding-top
padding-right
padding-bottom
padding-left
-内边距的设置会影响到盒子的大小
-背景颜色会延伸到内边距上
一个盒子的可见框的大小,由内容区、内边距、外边框共同决定,
所以在计算盒子大小时,需要将这三个区域加到一起计算
边框的大小会影响到整个盒子的大小
1.3、边框(border)
边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部
要设置边框,需要至少设置三个样式:
1、边框的宽度border-width
border-width: 18px;
默认值,一般都是3个像素
border-width可以用来指定四个方向的边框的宽度
值的情况
四个值:上,右,下,左
三个值:上,左右,下
两个值:上下,左右
一个值:上下左右
除了border-width还有一组border-xxx-width
xxx可以是top、right、bottom、left
用来单独指定某一个边的宽度
2、边框的颜色border-color
border-color用来指定边框的颜色,同样可以分别指定四个边的边框
规则和border-width一样
border-color也可以省略不写,如果省略了则自动使用color的颜色值
可以用来指定四个方向的边框的颜色
3、边框的样式border-style
border-style指定边框的样式
solid表示实线
dotted点状虚线
dashed虛线
double双线
none默认没有边块
可以用来指定四个方向的边框的样式
border-width: 10px;
border-color: red;
border-style: solid;
border简写属性,通过该属性可以同时设置边框所有的相关样式,并且没有顺序要求
:
除了border以外还有四个border-xxx
border-top
border-right
border-bottom
border-left
border: solid 10px orange;
border-top: 10px solid red;
border-left: 10px solid red;
border-bottom: 10px solid red;
1.4、外边距margin
外边距(margin)
外边距不会影响盒子可见框的大小
但是外边距会影响盒子的位置
一共有四个方向的外边距:
margin-top
上外边距,设置一个正值,元素会向下移动
margin-right
默认情况下设置margin-right不会产生任何效果
margin-bottom
下外边距,设置一个正值, 其下边的元素会向下移动
margin-left
左外边距,设置一个正值, 元素会向右移动
元素在页面中是按照自左向右的顺序排列的
<style>
.box1{
width: 200px;
height: 200px;
background-color:#bfa;
border: 10px red solid;
margin-top: 100px;
margin-left: 100px;
margin-bottom: 100px;
}
</style>
二、四种盒子模型
1、标准盒模型
2、怪异盒模型
3、flex弹性盒模型
4、多列布局盒模型(基本不用)
box-sizing用来设置盒子尺寸的计算方式(指定width和height的作用)
可选值
1、content-box默认值,宽度和高度用来设置内容区的大小,即width和height指的只是内容区的大小,盒子可见框的大小还是内容区、内边距和边框共同决定
2、border-box宽度和高度用来设置整个盒子可见框的大小,即width和height就是盒子的总大小
标准盒模型:box-sizing:content-box;
怪异盒模型:box-sizing:border-box;
2.1、盒子大小
.box3 {
width: 100px;
height: 100px;
background-color: #bfa;
padding: 10px;
border:10px red solid;
/*
默认情况下,盒子可见框的大小是内容区、内边距和边框共同决定
box-sizing用来设置盒子尺寸的计算方式(指定width和height的作用)
可选值
1、content-box默认值,宽度和高度用来设置内容区的大小,即width和height指的只是内容区的大小,
盒子可见框的大小还是内容区、内边距和边距共同决定
2、border-box宽度和高度用来设置整个盒子可见框的大小,即width和height就是盒子的总大小
*/
box-sizing:content-box;
}
三、行内元素的盒模型
1、行内元素不支持设置宽度和高度
2、行内元素可以设置padding,但是垂直方向padding不会影响页面的布局
3、行内元素可以设置border,垂直方向的border不会影响页面的布局
4、行内元素可以设置margin,垂直方向的margin不会影响布局,会覆盖下面的元素,即下面的元素不会下移
display用来设置元素的显示的类型
-可选值
inline将元素设置为行内元素
block将元素设置为块元素
inline -block将元素设置为行内块元素
行内块,既可以设置宽度和高度又不会独占一行
table将元素设置为一个表格
none元素不在页面中显示
visibility用来设置元素的显示状态
可选值:
visible默认值,元素在页面中正常显示
hidden元素在页面中隐藏不显示,但是依然占据页面的位置
四、将背景颜色值设置到内容区,边框和内边距不再有背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 100px;
height: 100px;
padding: 50px;
border: 4px red solid;
background-color: rgb(59, 216, 44);
/*将背景颜色值设置到内容区,边框和内边距不在有背景颜色:*/
background-clip: content-box;
}
</style>
</head>
<body>
<div class="box1">1</div>
</body>
</html>
五、轮廓、阴影、圆角
5.1、轮廓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>csstest001</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
outline: 10px red solid;
/* outline用来设置元素的轮廓线,用法和border一样,
不影响可见框的大小*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
5.2、阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>csstest001</title>
</head>
<body>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/* 阴影效果
第一个值 水平偏移量
第二个值 垂直偏移量
第三个值 模糊半径
第四个值 阴影的偏移量
*/
box-shadow: 10px 10px 50px rgba(0, 0, 0, .3);
}
</style>
<div class="box1"></div>
</body>
</html>
内阴影:box-shadow: insert 10px 10px 50px rgba(0,0,0,.3);
5.3、圆角
设置圆角的半径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>csstest001</title>
</head>
<body>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/*
border-radius(左上,右上,右下,左下)
四个值左上右上右下左下
三个值左上右上/左下右下
两个值左上/右下右上/左下
一个值都设置
特别:将元素设置成圆形
border-radius(50%)
*/
border-radius:50%;
/* border-top-left-radius: 50px;
border-top-right-radius: 50px 80px;
x值 y值*/
/* border-bottom-left-radius: ; */
/* border-bottom-right-radius: ; */
/*设置一个上外边距*/
}
</style>
<div class="box1"></div>
</body>
</html>