7-盒子模型

最新推荐文章于 2024-09-05 10:06:52 发布
最新推荐文章于 2024-09-05 10:06:52 发布
阅读量176 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47761892/article/details/106175217
版权

文章目录

一、盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
在这里插入图片描述

二、边框属性

边框就是环绕在标签宽度和高度周围的线条
属性说明常用属性值
border-style边框样式none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
border-width边框宽度像素值,单位为px；或者关键字：thick ,medium（默认值）,thin
border-color边框颜色颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
border-radius圆角边框像素值或者百分比
语法格式：

1.按要素连写(分别设置四条边)
border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;

   示例代码
<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;
            border-width: 5px 10px 15px 20px;
            border-style: solid dashed dotted double;
            border-color: blue green purple pink;
            /*border-color: blue green purple;*/
            /*border-color: blue green;*/
            /*border-color: blue;*/
        }
</style>

注意:
这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值。
当取值省略时遵循值复制对边的原则，其属性值可以设置1~4个，即一个值为四边，两个值为上下/左右，三个值为上/左右/下，四个值为上/右/下/左。

这三个属性的取值省略时的规律
上 右 下 左 ----> 上 右 下 ----> 左边的取值和右边的一样
上 右 下 左 ----> 上 右    ----> 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 ----> 上       ----> 右下左边取值和上边一样

2.连写(同时设置四条边)
border: 边框的宽度 边框的样式 边框的颜色;

    示例代码
<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 5px solid blue;
            /*border: 5px solid;*/
            /*border: 5px blue;*/
            /*border: solid blue;*/
        }
</style>

注意点:
连写格式中颜色属性可以省略, 省略之后默认就是黑色
连写格式中样式不能省略, 省略之后就看不到边框了
连写格式中宽度可以省略, 省略之后还是可以看到边框

3.按方向连写(分别设置四条边)
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;

    示例代码

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border-top:5px solid blue;
            border-right:10px dashed green;
            border-bottom:15px dotted purple;
            border-left:20px double pink;
        }
</style>
  1. 非连写(方向+要素)
    border-top-width: ;
    border-top-style:;
    border-top-color:;
    border-right-width:;
    border-right-style:;
    border-right-color:;
    border-bottom-width:;
    border-bottom-style: ;
    border-bottom-color:;
    border-left-width:;
    border-left-style:;
    border-left-color:;
    示例代码
<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;

            border-top-width: 5px;
            border-top-style: solid;
            border-top-color: blue;

            border-right-width: 10px;
            border-right-style: dashed;
            border-right-color: green;

            border-bottom-width: 15px;
            border-bottom-style: dotted;
            border-bottom-color: purple;

            border-left-width: 20px;
            border-left-style: double;
            border-left-color: pink;
        }
</style>

注意点:
    同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的

.box3{
            border: 5px solid red;
            border-right:5px dashed red;
}

5.圆角边框
把边框的四个外角绘制成弧线。

.box3{
            border-radius:5px/5px;<!-- 水平半径参数/垂直半径参数;-->
            border-radius:5px 10px/5px 10px
}

注意点:
- 属性的取值是按照顺时针来赋值, 也就是按照左上，右上，右下，坐下来赋值。
- 当取值省略时遵循值复制对角的原则，其属性值可以设置1~4个，
即一个值为四角，两个值为左上右下/右上左下，三个值为左上/右上左下/右下，四个值为左上/右上/右下/左下。

三、内边距属性

边框和内容之间的距离就是内边距

语法格式

  1. 单独设置四条边
    padding-top: ;
    padding-right: ;
    padding-bottom: ;
    padding-left: ;
    示例代码
<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            padding-top: 20px;
            padding-right:40px;
            padding-bottom:80px;
            padding-left:160px;
       }
</style>
  1. 同时设置四条边
    padding: 上 右 下 左;
    示例代码
<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            /*padding:20px 40px 80px 160px;*/
            /*padding:20px 40px 80px;*/
            /*padding:20px 40px;*/
            padding:20px;
        }
</style>

注意点:
属性的取值是按照顺时针来赋值, 也就是按照左上，右上，右下，坐下来赋值。当取值省略时遵循值复制对角的原则。
上 右 下 左 ---> 上 右 下  ---> 左边的取值和右边的一样
上 右 下 左 ---> 上 右     ---> 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 ---> 上        ---> 右下左边取值和上边一样
给标签设置内边距之后, 标签占有的宽度和高度会发生变化
给标签设置内边距之后, 内边距也会有背景颜色

四、外边距属性

标签和标签之间的距离就是外边距

语法格式

  1. 单独设置四条边
    margin-top: ;
    margin-right: ;
    margin-bottom: ;
    margin-left: ;
    示例代码
<style>
  .box1{
            margin-top:20px;
            margin-right:40px;
            margin-bottom:80px;
            margin-left:160px;
        }
</style>

2.同时设置四条边
margin: 上 右 下 左;

  示例代码
<style>
  .box1{
            margin:20px 40px 80px 160px;
            /*margin:20px 40px 80px;*/
            /*margin:20px 40px;*/
            /*margin:20px;*/
        }
</style>

注意:
-属性的取值是按照顺时针来赋值, 也就是按照左上，右上，右下，坐下来赋值。当取值省略时遵循值复制对角的原则。
上 右 下 左 ---> 上 右 下  ---> 左边的取值和右边的一样
上 右 下 左 ---> 上 右     ---> 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 ---> 上        ---> 右下左边取值和上边一样

- 外边距的那一部分是没有背景颜色的
- 外边距合并现象： 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

    示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距合并现象</title>
    <style>
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .hezi1{
            margin-right:50px;
        }
        .hezi2{
            margin-left:100px;
        }
        .box1{
            margin-bottom:50px;
        }
        .box2{
            margin-top:100px;
        }
    </style>
</head>
<body>
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>

margin-top问题

如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来

如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性

在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)

 示例代码
<style>
        .big{
            width: 500px;
            height: 500px;
            background-color: red;
            /*不设置边框, big也会被small的顶部外边距顶下去*/
            border: 5px solid #000;
        }
        .small{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top:150px;
            margin-left:150px;
        }
    </style>

text-align:center;和margin:0 auto;区别

text-align: center; 是设置盒子中存储的文字/图片水平居中

margin:0 auto;是让盒子自己水平居中

    示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-盒子居中和内容居中</title>
    <style>
        .father{
            width: 800px;
            height: 500px;
            background-color: red;
            /*文字图片会居中*/
            /*text-align: center;*/
            /*盒子自身会居中*/
            margin:0 auto;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="father">
    我是文字<br/>
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ssHlMFF-1589700808320)(images/girl.jpg)]
    <div class="son"></div>
</div>
</body>
</html>

五、盒模型宽度和高度

  • 内容的宽度和高度是通过width/height属性设置的
    -元素的宽度和高度
    宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
    高度 同理可证
规律
增加了padding/border之后元素的宽高也会发生变化
- 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高

元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度 同理可证

CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

box-sizing取值

    1.content-box

	   	 元素的宽高 = 边框 + 内边距 + 内容宽高

    2.border-box

	    元素的宽高 = width/height的宽高

 示例代码
<!--增加padding/border之后元素宽高会变大-->
<style>
.box1{
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
</style>

<!--增加padding/border之后元素宽不会变大-->
<style>
.box1{
 	box-sizing: border-box;
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
</style>

六、盒子水平居中

如果同一行上有两个或两个以上的Div，如果设置了浮动属性，设置margin：0 auto让其相对于父容器水平居中则会失效。

<style type="text/css">
		.inner1,.inner2{
			width: 300px;
			height: 200px;
			border: 5px solid red;
			float: left;
			margin: 0 auto;
		}
</style>
<body>
		<div class="inner1"></div>
		<div class="inner2"></div>
</body>

在这里插入图片描述

可以在两个div的外面在套一个大的div容器，让外面的div容器实现水平居中即可。

<style type="text/css">
			.inner1,.inner2{
				width: 300px;
				height: 200px;
				border: 5px solid red;
				float: left;
			}			
			.outer{
				width: 620px;
				height: 210px;
				border: 3px dashed green;
				margin:0 auto;
				text-align: center;				
			}			
	</style>
	<body>
		<div class="outer">
			<div class="inner1"></div>
			<div class="inner2"></div>
		</div>
	</body>

在这里插入图片描述

七、盒中内容垂直居中

当盒子中 的内容垂直居中可以是网页更加美观协调，可以利用div模拟一个单元格的属性：display：table-cell，同时设置vertiacal-align：middle是内容垂直居中。

注意：此时盒子不能设置为浮动。

<style type="text/css">
			.outer2{
				width: 300px;
				height: 200px;
				border: 5px solid red;
				margin: auto;
				text-align: center;
				display: table-cell;
				vertical-align: middle;
			}
	</style>
	<body>
	<div class="outer2">欢迎学习div垂直居中<br>欢迎学习div垂直居中</div>
	</body>

在这里插入图片描述

m0_47761892
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css基础3-盒子模型
12-05
CSS 基础 - 盒子模型 CSS 基础 - 盒子模型是 CSS 中的一個基础知识点，包括 CSS 三大特性、PxCook 的基本使用和盒子模型三个部分。 CSS 三大特性 CSS 三大特性包括继承性、层叠性和优先级。继承性是指子元素继承...
html顺时针复制原则,图纸的叠法
weixin_39992760的博客
07-02 318
正规的施工图纸宜采用国家标准图幅，必须叠成A4幅面(297mm×210mm)，且图标栏露在外面。不同幅面工程图纸的折叠方法不同，在《技术制图复制图的折叠方法》(GB/10609.3 89)中有详细表述不同幅面的工程图纸应统一折叠成A4幅面(297mm×210mm)，横向按手风琴式折叠，竖向按顺时针方向向内折，图标栏露在外面(按《技术制图复制图的折叠方法》)(GB/10609.3――-89)最后按项...
网页设计与制作（HTML+CSS）第五课
weixin_45722894的博客
12-19 1770
4.2 盒子模型相关属性 1.设置边框样式（border-style） 必须按上下左右的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右 ，三个值为上/左右/下。 2.设置边框宽度（border-width） 必须按上右下左的顺时针采用值复制，即一个值为四边，两个值为上下/左右。 设置边框宽度是时，必须同时设置边框样式。 3.设置边框颜色（border-color) 必...
html顺时针复制原则,可靠性设计原则1000条
weixin_39982236的博客
07-02 182
A301至少90%的干扰，是从第一级射频级输入电路进入接收机的。A302射频及中频线圈、同轴电容器、和内部天线电路都必须加以屏蔽。A303在接收机机箱内的射频部分应该和输出部分屏蔽开来。A304用一个简单的旁路电容防止射频能量自输出引线进入接收机内。A305仔细将射频放大级和混频级隔离开来。A306本振的屏蔽罩必须尽量连接。(注意：也许有必要使用双层屏蔽)A307将本振屏蔽罩固定到附近大支撑物的等...
7.Springboot集成Redis
我有满天星辰的博客
05-18 785
感谢秦疆老师的redis视频教程，更多了解哔哩哔哩搜索【狂神说Java】。 本文内容源于秦疆老师的redis视频教程。给狂神推荐，点赞吧！ SpringBoot整合 SpringBoot操作数据：spring-data jpa mongodb redids! SpringData也是和SpringBoot齐名的项目！ 说明：在SpringBoot2.x之后，原来使用的jedis被替换成了lettuce jedis:采用的直连，多个线程操作的话，是不安全的，如果想要避免不安全的，使用jedis poo.
Day05-CSS布局-盒子模型
07-06
在网页设计中，CSS（Cascading Style Sheets）布局扮演着至关重要的角色，而盒子模型是理解CSS布局的基础。本文将深入探讨“Day05-CSS布局-盒子模型”这一主题，详细介绍盒子模型的工作原理、相关属性以及在HTML元素...
python tkinter-08-盒子模型.ev4.rar
04-30
在“python tkinter-08-盒子模型.ev4.mp4”这个视频教程中，可能详细介绍了如何利用Tkinter的盒子模型来设计和调整控件的布局，包括通过实践演示如何设置各个部分的大小和位置，以及如何使用布局管理器配合盒子模型...
day05（CSS03-盒子模型）v1.0.pdf
02-17
"CSS盒子模型和三大特性" CSS盒子模型是一个基本的布局模型，它由内容区域、边框区域、内边距区域和外边距区域组成。在这个模型中，每个标签都是一个盒子，通过盒子的视角可以更方便地进行布局。 一、CSS三大特性 ...
DIV+CSS创建网页-盒子模型介绍.pptx
11-01
网页设计与制作中，"DIV+CSS创建网页-盒子模型介绍"是一个至关重要的主题，它涉及到网页布局的基础理论。盒子模型是理解网页元素如何在页面上占据空间的关键概念。在这个模型中，每个HTML元素都被看作是一个具有内容...
Flex弹性布局
m0_47761892的博客
12-06 2801
Flex 布局
4-伪选择器
m0_47761892的博客
05-16 791
文章目录一、伪类选择器二、属性选择器三、链接伪类选择器 一、伪类选择器 作用: 选中指定的任意标签然后设置属性 格式: 1.同级别的第几个 :first-child 选中同级别中的第一个标签 :last-child 选中同级别中的最后一个标签 :nth-child(n) 选中同级别中的第n个标签 :nth-last-child(n) 选中同级别中的倒数第n个标签 :only-child 选中父元素中唯一的标签 注意点: 不区分类型 2.同级同类型的第几个 :first-of-type 选中同级
2-基础选择器
m0_47761892的博客
05-16 663
文章目录一、标记选择器二、类选择器三、id选择器四、通配符选择器 一、标记选择器 标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。 基本语法格式如下： 标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 例如： p{ font-size:12px; color:#666; font-family:“微软雅黑”;} 上述CSS样式代码用于设置HTML页面中所有的段落文本——字体大小为12像素、颜色为#666、字体为“微软雅黑”
1-CSS基础
m0_47761892的博客
05-16 567
文章目录一、CSS发展历史二、样式规则三、引入CSS样式四、体验CSS 一、CSS发展历史 CSS概述 CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。 如下图所示，图中文字的颜色、粗体、背景、行间距和左右两列的排版等，都是通过CSS控制的 2. CSS发展历史 CSS1 1996年12月W3C发布了第一个有关样式的标准CSS1。包含了font的相关属性、颜色与背景的相关属性、文字的相
3-关系选择器
m0_47761892的博客
05-16 420
文章目录一、交集选择器二、并集选择器三、后代选择器四、子代选择器五、后代和子代选择器六、兄弟选择器 一、交集选择器 交集选择器又称标签指定式选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。 作用：给所有选择器选中的标签中, 相交的那部分标签设置属性 语法格式：选择器1选择器2{ 属性: 值;} 注意点: 选择器和选择器之间没有任何的连接符号 选择器可以使用标签名称/id名称/class名称 交集选择器仅仅作为了解, 企业开发中用的并不
5-CSS常用属性
m0_47761892的博客
05-16 408
文章目录一、文字属性1.font-style2.font-weight3.font-size4.font-family5.文字属性缩写二、文本外观属性1.text-decoration2.text-align3.text-indent3.color4.letter-spacing5.word-spacing6.line-height7.text-transform8.text-indent9.white-space:10.text-shadow 一、文字属性 1.font-style 作用: 规定文字样式.
8-盒子浮动
m0_47761892的博客
05-19 189
文章目录一、网页的布局方式二、浮动元素的脱标三、浮动元素贴靠现象四、浮动元素字围现象 一、网页的布局方式 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 标准流(文档流/普通流)排版方式 其实浏览器默认的排版方式就是标准流的排版方式 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版 垂直排版, 如果元素是块级元素, 那么就会垂直排版 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版 浮动流排
6-CSS三大特性
m0_47761892的博客
05-16 150
文章目录一、继承性二、层叠性三、优先级四、优先级权重五、!important 一、继承性 什么是继承性? 作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性 示例代码: <style> div{ color: red; } </style> <div> <ul> <li> <p>我是段落</p>
CSS 尺寸 (Dimension)
最新发布
lly202406的博客
09-05 400
CSS 尺寸属性是控制网页布局的关键。通过理解并有效使用这些属性，您可以创建既美观又。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值