CSS_盒子模型

-王二毛-

已于 2022-09-13 22:29:58 修改

阅读量220

点赞数

分类专栏： # css 文章标签： css css3

于 2021-03-15 09:00:56 首次发布

本文链接：https://blog.csdn.net/weixin_45084986/article/details/114790236

版权

css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、盒模型基础知识

图片引用来自：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>

在这里插入图片描述

-王二毛-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS_盒子模型

盒模型–css将页面的所有元素都设置为一个矩形的盒子–将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置–每个盒子都由以下几个部分组成–内容区（content）–内边距padding–边框–border–外边框margin<style type="text/css"> .box { /*内容区(content) ，元素中的所有的子元素和文本内容都在内容区中排列内容区的大小由width和height两个属性来设置width设置内容区的宽度hei
复制链接

扫一扫

专栏目录