CSS基础知识 ==＞ 盒子模型,框模型

最新推荐文章于 2022-12-17 08:00:00 发布
最新推荐文章于 2022-12-17 08:00:00 发布
阅读量322 收藏
点赞数
分类专栏： 前端基础知识 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43281459/article/details/109753415
版权

盒模型,盒子模型,框模型(box model)

边框的简单书写

边框的的四条边可以指定格式

盒子模型-内边框

盒子外边距

水平布局

盒子垂直方向的布局

外边距的折叠

行内元素的盒模型

边框的简单书写

                CSS将页面中的所有元素都设置为了一个矩形的盒子
                - 将元素设置为矩形的合资后,对页面的布局就变成将不同的盒子摆放到不同的位置
                - 每一个盒子都由以下几个部分组成: 
                    内容区(content)
                    内边距(padding)
                    边框(border)
                    外边距(margin)

                    内容区(content),元素中所有的子元素和文本内容都在内容区中排列
                        内容区大小由 width和 height两个属性来设置
                            width 设置内容区的宽度
                            weight 设置内容区的高度

                    边框(border) 边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部
                    要设置边框(边框的大小会影响到整个盒子的大小),至少需要设置三个样式:
                        边框的宽度: border-width
                        边框的颜色: border-color
                        边框的样式: border-style

		<style>
			.box1{

				width:200px;
				height:200px;
				background-color:#bfa;

				border-width;
				border-color:blue;
				border-style:solid;
			}
		</style>

例子代码:

<html>
	<head>
		<title>
			学习前端第四天
		</title>
		<style>
			.dox1{
				width:200px;
				height:200px;
				background-color:orange;
				
				border-width:20px;
				border-color:black;
				border-style:solid;
			}
		</style>
	</head>
	<body>
		<div class="dox1">我是一个div</div>
	</body>
</html>

效果如下:

也可以简写把 边框的宽度,颜色,是否有框简写成一个语句 : border: 20px black solid; 也可以实现上面的效果,代码如下

<html>
	<head>
		<title>
			学习前端第四天
		</title>
		<style>
			.dox1{
				width:200px;
				height:200px;
				background-color:orange;
				
				border:20px black solid;
			}
		</style>
	</head>
	<body>
		<div class="dox1">我是一个div</div>
	</body>
</html>

边框的的四条边可以指定格式

                    border-width:10px; 
                    有默认值,不写也行,一般默认是三个像素
                    border-width 可以用来指定四个方向的边框的宽度
                        border-width : 上,右,下,左
                            值的情况:
                                四个值: 上,右,下,左
                                三个值: 上,左右,下
                                两个值: 上下,左右
                                
                            除了border-width还有一组 boder-xxx-width
                                xxx可以使 top right bottom left
                                用来单独指定某一个边的宽度

                border-color用来指定边框的颜色,同样可以分别指定四个边的边框
                    规则和border-width一样
                    border-color也可以省略不写,如果省略了则自动使用color的颜色

                border-style 指定边框的样式
                    solid 表示实线
                    dotted 表示点状虚线
                    dashed 线状虚线
                    double 双线
                    none 没有边框
                    
                    border-style 默认值是none 表示没有边框

                border简写属性,通过该属性可以同时何止边框所有的相关严实,并且没有顺序要求
                
                除了border之外还有四个 border-xxx

例子: 修改四条边的宽度和大小

<html>
	<head>
		<title>
			学习前端第四天
		</title>
		<style>
			.dox1{
				width:200px;
				height:200px;
				background-color:orange;

				border-bottom: 10px black solid;  		/* 宽度为10,黑色,实线 */
				border-right: 20px yellow dotted;		/* 宽度为20,黄色,点状虚线 */
				border-left: 30px yellowgreen dashed;	/* 宽度为30,黄绿色,线状虚线 */
				border-top: 40px blue double;			/* 宽度为40,蓝色,双实线 */
			}
		</style>
	</head>
	<body>
		<div class="dox1"></div>
	</body>
</html>

实现如下:

盒子模型-内边框

                内边距(padding)
                    - 内容区和边框之间的距离是内边距
                    - 一共有四个方向的内边距
                        padding-top
                        padding-right
                        padding-bottom
                        padding-left
                        
                    - 内边距的设置会影响到盒子的大小
                    - 背景颜色会延伸到内边距上
                    
                一个盒子的可见框的大小,由内容区 内边距和 边框共同决定
                    所以在计算盒子大小时,需要将这三个区域加到一起计算

                padding 内边距的简写属性,可以同时指定四个反向的内边距
                    规则和border-width一样

盒子外边距

                    外边距(margin)
                        - 外边距不会影响盒子可见框的大小
                        - 但是外边距会影响盒子的位置
                        - 一共有四个方向的外边距:
                            margin-top
                                - 上外边距,设置一个正值,元素会向下移动
                            margin-right
                                - 默认情况下,设置margin-right不会产生任何效果
                            margin-bottom
                                - 下外边距,设置一个正值,其下边的元素会向下移动
                            margin-left
                                - 左外边距,设置一个正值,元素会向右移动
                                
                            - margin也可以设置负值,如果是负值则元素会向相反的方向移动
                                
                        - 元素在页面中是按照自左向右的顺序排列的,
                            所以默认的情况下如果我们设置的左和上外边距则会移动元素自身
                            而设置下和右外边距会移动其他元素
                            
                        - margin的简写属性
                            margin 可以设置四个方向的外边距,用法和padding一样
                            
                        - margin会影响到盒子实际占有空间大小

例子: 设置上下边距为100px,左右边距为200px,代码如下:

<html>
	<head>
		<title>
			学习前端第四天
		</title>
		<style>
			.dox1{
				width:200px;
				height:200px;
				background-color:orange;
				
				border-width:20px;
				border-color:black;
				border-style:solid;
				
				margin: 100px 200px;
			}
		</style>
	</head>
	<body>
		<div class="dox1">我是一个div</div>
	</body>
</html>

实现如下:

水平布局

                    元素的水平方向的布局:
                        元素在其父元素中,水平方向的位置由以下几个属性共同决定
                            margin-left
                            border-left
                            padding-left
                            width
                            padding-right
                            border-right
                            margin-right
                            
                        一个元素在其父元素中,水平布局必须要满足以下的等式
                            margin-left + border-left + padding-left + width+padding-right + border-right + margin-right = 其父元素内容区的宽度(必须满足)
                            
                            0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
                                - 以上等式必须满足,如果相加结果使等式不成立,则称为过度约束,则等式会自动调整
                                    - 调整的情况:
                                        - 如果这七个值中没有为 auto 的情况,则浏览器会自动调整margin-right值使得等式成立
                                        - 所以上述等式变成
                                            - 0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
                                - 这七个值中有三个值可以设置为 auto
                                    wigth
                                    margin-left
                                    margin-right
                                    - 如果某个值为 auto,则会自动调整为 auto的那个值使得等式成立
                                        - 0 + 0 + 0 + auto + 0 + 0 + 0 = 800  --> auto = 800 --> 0 + 0 + 0 + 800 + 0 + 0 + 0 = 800  
                                        
                                    - 如果将一个宽度和一个外边距设置为 auto,则宽度会调整到最大,设置为auto的外边距会自动为0
                                    - 如果将三个值都设置为auto,则外边距都是0,宽度最大
                                    - 如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值
                                        所以我们经常利用这个特点来使一个元素在其父元素中水平居中
                                        示例: 
                                            width:xxxpx;
                                            margin:0 auto;

让子元素在父元素里居中,代码如下:

<html>
	<head>
		<title>
			学习前端第四天
		</title>
		<style>
			.dox1{
				width:400;
				height:200px;
				background-color:orange;
				
				border-width:20px;
				border-color:black;
				border-style:solid;
			}
			.dox2{
				width:200px;
				height:200px;
				background-color:green;
				margin:auto;
			}
		</style>
	</head>
	<body>
		<div class="dox1">
			<div class="dox2"></div>
		</div>
	</body>
</html>

实现如下:

盒子垂直方向的布局

                    子元素是在父元素的内容区中排列的
                        如果子元素的大小超过了父元素,则子元素会从父元素中溢出
                        使用 overflow属性来设置父元素如何处理溢出的子元素
                        
                        可选值:
                            visible    默认值  子元素会从父元素中溢出,在父元素外部的位置显示
                            hidden     溢出内容将会被裁剪,不会显示
                            scroll     生成两个滚动条,通过滚动条来查看完成的内容(垂直和水平双方向的) 默认水平方向没有
                            auto    根据需要生成滚动条,处理溢出的内容
                            overflow-x : 处理水平方向
                            overflow-y : 处理垂直方向

一般都是生成滚动条,这里以滚动条为例:

<html>
	<head>
		<title>
			学习前端第四天
		</title>
		<style>
			.dox1{
				width:400;
				height:200px;
				background-color:orange;
				border-width:20px;
				border-color:black;
				border-style:solid;
				overflow:auto;
			}
			.dox2{
				width:200px;
				height:800px;
				background-color:green;
				margin:auto;
			
			}
		</style>
	</head>
	<body>
		<div class="dox1">
			<div class="dox2"></div>
		</div>
	</body>
</html>

实现如下:

外边距的折叠

                垂直外边距的重叠(折叠)
                    - 相邻的垂直方向外边距会发生重叠的现象
                    - 兄弟元素
                        - 兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正直)
                        - 特殊情况: 
                            如果相邻的外边距一正一负,则取两者的和
                            两个都是负,则取绝对值较大的
                            
                        - 兄弟元素之间的外边距的重叠,对于开发是有利的,所以不需要进行处理

例如,我把两个div元素的上下边距都改为100px,他们的间距是100px

<html>
	<head>
		<title>
			学习前端第四天
		</title>
		<style>
			.box3{
				width:200px;
				height:200px;
				background-color:black;
				margin-bottom:100px;
			}
			.box4{
				width:200px;
				height:200px;
				background-color:green;
				margin-top:100px;
			}
		</style>
	</head>
	<body>
		<div class="dox1">
			<div class="dox2"></div>
		</div>
		<div class="box3">132</div>
		<div class="box4">123</div>
	</body>
</html>

实现如下:


                        
                    - 父子元素
                        - 父子元素间相邻外边距,子元素的会传递给父元素(上外边距)
                        - 父子外边距的折叠会影响到页面的布局,必须要进行处理
                        
                        1.算一下,把父元素上边加100,高度减100
                        2.父元素上方加一个border-top :1px xxx xxx;同时父元素高度减一
                            - 这种方式会使得父元素上边多一条线,同时子元素超出了父元素的范围

这个不进行举例了,因为后续会讲到更好的方法

行内元素的盒模型

                    行内元素的盒模型
                        - 行内元素不支持设置宽度和高度
                        - 行内元素可以设置padding,但是垂直方向的padding不会影响页面的布局
                        - 行内元素可以设置border,垂直方向的border不会影响页面的布局
                        - 行内元素可以设置margin,垂直方向的margin不会影响布局

                    display 用来设置元素显示的类型
                        可选值:
                            inline 将元素设置为行内元素
                            block  将元素设置为块元素
                            inline-block 将元素设置为行内块元素
                                - 行内块元素特点: 既可以设置宽度和高度又不会独占一行
                            table  将元素设置为一个表格
                            none   元素不在一个页面中显示,隐藏一个元素
                            
                    visibility 用来设置元素的显示状态
                        可选值:
                            visibility 默认值,元素在页面中正常显示
                            hidden 元素在页面中隐藏,不显示,但是依然占据页面的位置

例子,把第一个行元素设置为块元素,第二个行元素设置为块内行元素,第三个行元素设置为表格,代码如下:

<html>
	<head>
		<title>
			学习前端第四天
		</title>
		<style>
			.dox1{
				width:50px;
				height:50px;	
				background-color:blue;
				display:block;
			}
			.dox3{
				width:50px;
				height:50px;
				background-color:orange;
				display:inline-block;
			}
			.box3{
				background-color:black;
				
			}
			.box4{
				display:table;
				background-color:green;
			}
		</style>
	</head>
	<body>

		<span class="dox1">span1</span>
		<span class="dox3">span2</span>
		<a href="http://www.baidu.com" class="box3">超链接1</a>
		<a href="http://www.baidu.com" class="box4">超链接2</a>
	</body>
</html>

实现如下:

 

轩程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端基础知识包括盒子模型，css，html，布局和基础计算机进制知识
01-05
前端基础知识是每个前端开发者必须掌握的技能，这包括盒子模型、CSS、HTML、布局以及基础的计算机进制知识。下面我们将逐一深入探讨这些概念。 1. **盒子模型** 盒子模型是HTML元素在网页布局中的核心概念，它描述...
HTML学习之路-06盒子模型
weixin_63204687的博客
08-22 2594
对盒子模型进行初步讲解
html标签的盒子模型
nrskhdzl的博客
11-14 4763
在HTML 的标签中&lt;div&gt;&lt;/div&gt;标签被称作盒子模型，也就是说我们把整个网页当做是一个大盒子，在网页里我们放许多小盒子&lt;div&gt;&lt;/div&gt;标签，我们可以用&lt;div&gt;&lt;/div&gt;来搭建整个网页的框架，可以设置&lt;div&gt;&lt;/div&gt;盒子的大小、边框、背景色等等，也可以在盒子里面填充
＜CSS3＞基础语法与盒模型
最不正经的计算机专业学生
10-12 1088
目录 1. CSS3基础入门 1.1 CSS3简介 1.2 前端三层 1.3 CSS选择器 1.4 CSS书写位置 1.4.1 内嵌式 1.4.2 外链式 1.4.3 导入式 1.4.4 行内式 2.CSS3基本语法 2.1 标签选择器和id选择器 2.1.1 标签选择器 2.1.2 id属性和id选择器 2.2 class选择器 2.2.1 class类名 2.2.2 class选择器 2.2.3 复合选择器 ​ 2.3 元素关系选择器 2.3.1 子选...
DIV + CSS 学习笔记（盒模型）
相逢不晚的博客
03-09 5818
本文目录一、盒模型（一）盒边框（border）（二）内边距（padding）（三）外边距（margin）（四）盒内容（element）（五）盒模型计算（六）块级元素与内联元素的区别和转换1. 区别2. 转换 一、盒模型 网页中一个一个的元素块，都可以看作是一个盒子，只不过这个盒子在视觉上是二维的，即它是一个平面图形。 比如下图红色的正方形就是用 div 元素实现的 200 * 200 的盒子。 .box { width: 200px; height: 200px; backgrou
css学习笔记-box模型
Laollaoaolao的博客
08-06 605
css学习 1.box模型 css学习 1.box模型 定义一个class为box的div <div class="box"></div> 使用通配符‘*’可以使得元素边距初始化 /* 通配符 '*' 使得元素边距初始化 */ *{ padding: 0; margin: 0; } .box{ width: 100px; height: 100px; border: 1px solid red; } margin(外边距) 表示两
css基础3-盒子模型
12-05
CSS 基础 - 盒子模型是 CSS 中的一個基础知识点，包括 CSS 三大特性、PxCook 的基本使用和盒子模型三个部分。 CSS 三大特性 CSS 三大特性包括继承性、层叠性和优先级。继承性是指子元素继承父元素的样式，层叠性是...
CSS3样式表-框模型（盒子模型）.pptx
05-06
单元二 CSS3样式表端基础前Web单元2-6 框模型（盒子模型）13内边距框模型概述42边框外边距文档结构与标准文档流span为inline元素，若干个inline元素是水平排列的body，ul，li为block元素，它们独占一整行，兄弟之间...
css学习 盒子模型 css基础
06-27
在这个“css学习 盒子模型 css基础”的主题中，我们将深入探讨CSS的基础知识，特别是盒子模型这一关键概念。 首先，让我们从CSS的基础语法开始。CSS采用选择器+声明的方式来指定元素的样式。选择器定位HTML元素，如...
DIV CSS 盒子模型PPT演讲.zip
02-27
**DIV CSS 盒子模型详解** 在网页设计中，DIV CSS是构建页面布局的重要工具，而盒子模型（Box Model）则是理解CSS布局的关键概念。这个PPT演讲将深入探讨这一核心知识点，帮助初学者掌握网页设计的基础。 首先，...
21.4 CSS 盒子模型
最新发布
09-02
通过阅读“21.4 CSS 盒子模型.eddx”和“21.4 CSS 盒子模型.md”文件，你可以深入学习盒子模型的细节，了解如何实际应用这些知识。同时，“Borders and Margins”可能提供了更多关于边框和外边距的实例和技巧。掌握...
HTML5&CSS3网页制作：盒子模型概述.pptx
05-31
同时，理解CSS3中的盒子模型是网页设计的基础。 盒子模型是Web开发中的一个重要概念，它将HTML元素视为具有四个部分的矩形盒子：内容（content）、内边距（padding）、边框（border）和外边距（margin）。内容区域...
CSS基础知识.docx
07-23
CSS 基础知识总结 一、CSS 盒子模型 CSS 盒子模型是指浏览器对 HTML 元素进行渲染和布局的方式。主要有两种盒子模型，即 W3C 盒子模型和 IE 盒子模型。 1. W3C 盒子模型（标准盒子模型）：盒子实际内容（content...
浅谈CSS中盒模型的理解
01-21
（ 摘抄于千与千寻写的CSS盒子模型理解，并在自己基础上添加了一些东西，希望更完善，对大家有帮助 ） 1.基本的盒模型知识 CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）...
Day05-CSS布局-盒子模型
07-06
在网页设计中，CSS（Cascading Style Sheets）布局扮演着至关重要的角色，而盒子模型是理解CSS布局的基础。本文将深入探讨“Day05-CSS布局-盒子模型”这一主题，详细介绍盒子模型的工作原理、相关属性以及在HTML元素...
1.对CSS盒子模型的理解?
kleinBlue.的博客
11-06 510
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box） 一个盒子由四个部分组成：content、padding、border、margin content，即实际内容，显示文本和图像 boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成 padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的backgr
CSS盒模型【框模型】（详解）
weixin_46726346的博客
08-08 485
关于CSS的最后一点，就是盒模型了，也叫CSS的框模型。 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式，在之前
CSS盒模型
weixin_47782618的博客
04-09 1334
1. 盒模型的概念 CSS盒模型本质上是一个盒子，封装着周围的HTML元素，它包括外边距margin，边框border，内边距padding和实际内容content。 把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。 2. 标准盒模型 根据W3C的规范，盒子实际内容content的宽度和高度等于我们设置的width和height，而盒子总宽度=width+padding+border+mar
CSS基础总结（三）盒子模型
轻舟终过万重山
12-17 1061
CSS页面布局三大核心之盒子模型，包括其边框、外边距、内边距、圆角、阴影

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值