第五章 css盒模型

最新推荐文章于 2024-11-14 13:53:32 发布
最新推荐文章于 2024-11-14 13:53:32 发布
阅读量1.1k 收藏 21
点赞数 12
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2403_87185636/article/details/142780740
版权

5.1盒模型的定义


5.2 CSS元素的高度和宽度

5.2.1 盒模型的宽度

5.2.2 盒模型的高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				width: 500px;
				height: 440px;
				border: 10px #ff0000 solid;
				margin: 30px;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>


5.3 边距设置和边框设置

CSS中边距（margin）和边框（border）

5.3.1 外边距设置

5.3.1.1 上外边距

margin-top：上边距。

5.3.1.2 右外边距

margin-right：右边距。

5.3.1.3 下外边距

margin-bottom：下边距。

5.3.1.4 左外边距

margin-left：左边距。

5.3.1.5 外边距

margin: 30px;

5.3.2 外边距的合并

外边距合并（Margin Collapse）是CSS中一个特定现象，指的是两个垂直外边距相遇时，它们将合并为一个外边距，其值等于两者之间的最大值。

5.3.2.1 行级元素外边距合并

  1. 不合并：行级元素之间的垂直外边距通常不会合并。
  2. 水平外边距：行级元素的水平外边距可以叠加，但不会超过最大值。
  3. 垂直外边距：行级元素的垂直外边距之间不会合并，即使它们相邻。

5.3.2.2 块级元素外边距合并

  1. 相邻兄弟元素：相邻块级元素的垂直外边距会合并成两者中的最大值。
  2. 父子元素：如果子元素的顶部与父元素的底部相邻，它们的垂直外边距也会合并。
  3. 避免合并：
    • 使用 overflow: auto; 或 overflow: hidden; 在子元素上。
    • 在父子元素之间插入一个空的行级元素。
    • 使用 display: inline-block; 将子元素转换为内联块级元素。

5.3.3 内边距设置

padding: 30px;

 

5.3.4 边框设置

5.3.4.1上边框

border-top: 10px #ff0000 solid;

5.3.4.2右边框

border-right: 10px #00ff00 solid;

5.3.4.3下边框

border-bottom: 10px #0000ff solid;

5.3.4.4 左边框

border-left: 10px #000000 solid;

 

5.3.4.5 边框样式

5.3.4.6 边框宽度

5.3.4.7 边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img{
				width: 600px;
				height: 440px;
			}
			div{
				width: 600px;
				height: 440px;
				border: 10px #ff0000 solid;
				margin: 30px;
				
				display: block;
				
				padding: 30px;
				
				border-top: 10px #ff0000 solid;
				border-right: 10px #00ff00 dashed;
				border-bottom: medium #0000ff solid;
				border-left: 10px #000000 solid;
				
				border-radius: 100px;
				
				box-shadow: -20px 10px 30px #ff00ff;
				
				
			}
		</style>
	</head>
	<body>
		<div><img src="img/01.jpg"/></div>
		<div><img src="img/01.jpg"/></div>
	</body>
</html>

​
				border-top: 10px #ff0000 solid;
				border-right: 10px #00ff00 dashed;
				border-bottom: medium #0000ff solid;
				border-left: 10px #000000 solid;

​

 

5.3.5 新增边框属性

5.3.5.1圆角边框

border-radius: 100px;

5.3.5.2阴影边框

box-shadow: -20px 10px 30px #ff00ff;

 

5.3.5.3图片绘制边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.11</title>
		<style type="text/css">
			div{
				margin: 100px;
				border: 50px solid blue;
				border-image: url(img/02.jpg)5 10 round;
			}
		</style>
	</head>
	<body>
		<div>
			利用 border-image 属性设置图片边框铺满效果。上下向内偏移5像素 左右10像素
		</div>
	</body>
</html>

5.4 CSS元素的定位

  1. static：默认值，元素按照正常文档流进行排列。
  2. relative：元素按照正常文档流进行排列，但可以通过 top, right, bottom, left 属性进行微调。
  3. absolute：元素脱离文档流，通过 top, right, bottom, left 属性相对于其最近的非静态定位祖先元素进行定位。
  4. fixed：元素脱离文档流，通过 top, right, bottom, left 属性相对于视口（浏览器窗口）进行定位。
  5. sticky：元素基于用户的滚动位置进行定位，通常是结合 top, right, bottom, left 属性使用。 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.12</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
			}
			.sonl{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				

			}
			.son2{
				border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="sonl">子盒子1：无定位的盒子
		<h2>静态定位的盒子</h2>
		</div>
		<div class="son2">子盒子2：无定位的盒子
		</div>
		</div>
	</body>
</html>

定位的偏移属性

  1. top：元素上边缘的位置。
  2. right：元素右边缘的位置。
  3. bottom：元素下边缘的位置。
  4. left：元素左边缘的位置。

5.4.1 static 定位

  1. 正常流：元素按照正常的文档布局顺序排列。
  2. 无偏移：top, right, bottom, left 属性不会被应用。
  3. 无层叠：元素不会创建新的层叠上下文。

5.4.2 relative定位

  1. 参照自己：元素是相对于自己的初始位置进行偏移的。
  2. 占据空间：原位置仍然保留，不释放。
  3. 可层叠：可以与其他元素重叠。
  4. 偏移属性：top, right, bottom, left 属性有效。
.sonl{
	border: 2px double red;
	background-color: yellow;
	width: 200px;
	height: 80px;
				
	position: relative;
	top: 20px;
	left: 40px;
}

 

5.4.3 absolute定位

  1. 脱离文档流：元素完全脱离正常文档流，不占据原位置的空间。
  2. 相对于非静态定位祖先元素：如果没有这样的祖先元素，那么相对于初始包含块进行定位。
  3. 可层叠：absolute 定位的元素可以覆盖其他元素。
  4. 偏移属性：top, right, bottom, left 属性有效。
position: absolute;
bottom: 20px;
right: 40px;

5.4.3.1 相对浏览器绝对定位

5.4.3.2 相对父盒子绝对定位

  1. 父元素定位：

    • 父元素需要设置 position: relative; 或 position: absolute;。

  2. 子元素定位：

    • 子元素设置 position: absolute;。

  3. 定位效果：

    • 子元素将相对于父元素的内边距（padding）进行定位。
.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
				
				position: relative;
			}
			.sonl{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				
				/*position: relative;
				top: 20px;
				left: 40px;
				*/
				
				position: absolute;
				bottom: 20px;
				right: 40px;
			}

 

5.4.4 fixed定位

  1. 视口固定：元素位置相对于浏览器窗口固定。
  2. 脱离文档流：元素完全脱离文档流，不占据原位置的空间。
  3. 不随滚动条滚动：即使页面滚动，固定定位的元素也会停留在相同的屏幕位置。（小广告）
  4. 偏移属性：top, right, bottom, left 属性有效。
position: fixed;
bottom: 20px;
right: 40px;

5.5 CSS元素的浮动

5.5.1 盒子的浮动

在CSS中，"浮动"（Float）是一种定位机制，用于将元素从文档流中"拿出"，并向左或向右浮动，直到它的外边缘接触到包含框或另一个浮动元素的边缘。浮动元素不占据文档流中的间隙，这意味着其他元素的布局不会考虑浮动元素占据的空间。

<div class="father">
		<h2>父盒子</h2>
		<div style="float: right;">右浮动盒子</div>
		<div style="float: right;">标准流盒子2</div>
		<div style="float: right;">标准流盒子3</div>
		<p >css 中,有一个 foat 属性,默认为 none,也就是标准流通常的情况。若果将 foat 属性的值设置
		为lett 或 night,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是
		根据盒子里面的内容的宽度确定。</p>
		</div>

5.5.2 盒子的浮动清除

由于浮动元素不占据空间，可能会导致某些布局问题，如父元素的高度塌陷。为了解决这些问题，可以使用以下方法清除浮动：

  1. 使用 clear 属性：
    • clear: both;：清除元素两侧的浮动。
    • clear: left;：只清除左侧的浮动。
    • clear: right;：只清除右侧的浮动。
<body>
		<div class="father">
		<h2>父盒子</h2>
		<div style="float: right;">右浮动盒子</div>
		<div style="float: right;">标准流盒子2</div>
		<div style="float: right;">标准流盒子3</div>
		<p style="clear: both;">css 中,有一个 foat 属性,默认为 none,也就是标准流通常的情况。若果将 foat 属性的值设置
		为lett 或 night,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是
		根据盒子里面的内容的宽度确定。</p>
		</div>
	</body>

5.6 综合案例——昵心美食空间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>呢心美食空间</title>
		<style type="text/css">
			*{
				background-color: #ffff99;
			}
			a{
				color: red;
			}
			.all{
				width: 700px;
				height: 650px;
				margin: 10px auto;
				padding: 5px;
				background-image: url(img/bg1.JPG);
			}
			.banner{
				width: 700px;
				height: 70px;
			}
			.menu{
				width: 690px;
				height: 40px;
				padding: 5px;
			}
			.main{
				width: 700px;
				height: 450px;
				margin: 5px 0px;
				position: relative;
			}
			.left,.right{
				width: 150px;
				height: 440px;
				border: 1px solid #999;
				float: left;
			}
			.middle{
				width: 384px;
				height: 450px;
				margin: 0px 5px;
				float: left;
				font-size: 20px;
				font-family: "楷体";
				font-weight: 700;
				color: #0000ff;
			}
			.one{
				width: 380px;
				height: 155px;
				border: 1px solid #999;
			}
			.two{
				width: 255px;
				height: 100px;
				border: 5px double red;
				margin-top: 20px;
				margin-bottom: 20px;
				border-radius: 25px;
			}
			.three{
				width: 380px;
				height: 135px;
				border: 1px solid #999;
			}
			.bottom{
				width: 700px;
				height: 70px;
			}
		</style>
	</head>
	<body>
		<div class="all">
		<div class="banner">
		<img src="img/banner.jpg" width="700px" height="70px"/>
		</div>
		<div class="menu">
		<img src="img/menu.jpg" width="690px" height="40px"/>
		</div>
		<div class="main">
		<div class="left">
		<marquee direction="up">
		<img src="img/mm_1.jpg" width="150px" height="140px"/>
		<img src="img/mm_2.jpg" width="150px" height="140px"/>
		<img src="img/mm_3.jpg" width="150px" height="140px"/>
		</marquee>
		</div>
		<div class="middle">
		<div class="one">
		<img src="img/font.jpg" width="25px" height="25px"/>为您推荐
		<br><br>
		<img src="img/x_1.jpg" width="80px" height="40px"/>
		<img src="img/x_2.jpg" width="80px" height="40px"/>
		<img src="img/x_3.jpg" width="80px" height="40px"/>
		<img src="img/x_4.jpg" width="80px" height="40px"/>
		<img src="img/x_5.jpg" width="80px" height="40px"/>
		<img src="img/x_6.jpg" width="80px" height="40px"/>
		</div>
		<center>
		<div class="two">
		<h1>呢心美食空间</h1>
		</div>
		</center>
		<div class="three">
		<img src="img/font.jpg" width="25px" height="25px"/>团购信息
		<br>
		<a href="#">1. 火锅团购</a><br>
		<a href="#">2. 烧烤团购</a><br>
		<a href="#">3. 自助餐团购</a><br>
		<a href="#">4. 新春特惠</a>
		</div>
		</div>
		<div class="right">
		<marquee direction="up">
		<img src="img/good_1.jpg" width="150px" height="140px"/>
		<img src="img/good_2.jpg" width="148px" height="140px"/>
		<img src="img/good_3.jpg" width="148px" height="140px"/>
		</marquee>
		</div>
		</div>
		<div class="bottom">
		<hr color="#0000ff"/>
		<center style="font-family:'楷体' ";>版权所有&copy;呢心美食空间<br />
		地址：江门市大学路XXX号 邮编：5000000 电话：0750-9999999</center>
		</div>
		</div>
	</body>
</html>

亚v
关注
第五章 - CSS盒模型
zl960320的博客
11-18 269
我们学习页面布局要学习三大核心，盒子模型，浮动和定位，盒子模型能够非常好的帮助我们定位。接下来对这些内容进行详细介绍。 1. 盒模型 1. 1 看透网页布局的本质 我们在进行网页布局的过程中，需要做以下准备： 先准备好相关的网页元素，网页元素基本都是盒子BOX 利用CSS设置好盒子样式，然后摆放到相应位置 往盒子里面装内容 网页布局的核心本质：利用CSS摆放盒子 1.2 盒子模型组成 所谓的盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器。 CSS盒模型本
CSS第五章 CSS盒子模型/标签分类和嵌套规范
晓葉斑比
05-18 1246
CSS五、CSS盒子模型5.1 标准盒子模型5.2 box-sizing样式5.3 盒子模型的一些问题1. margin叠加问题2. margin传递问题扩展 五、CSS盒子模型 5.1 标准盒子模型 组成 : content -> padding -> border -> margin            物品     &
第五章CSS盒模型
2402_83287175的博客
10-11 1315
关注收藏加点赞 下期更新不会断
第五章 CSS盒模型
2402_87184304的博客
10-11 1166
Web页面上大部分的元素都可以看作一个盒子，盒子有所有网页的对象（段落，列表，标题，图片和层）。盒子的结构可以看作一个矩形框，包括边框、外边距、内边距、以及元素内容，元素会指定高度和宽度范围内在页面上显示出来。一个页面可以有很多的盒子。
第五章 CSS盒子模型
2402_87161397的博客
10-02 1544
width在CSS中，border属性是一个简写属性，可以用来一次性设置边框的宽度、样式和颜色。每个方向的边框也可以单独设置，如border-top和。这些属性各自接受三个值：宽度（）、样式（）和颜色（通过对border及其相关属性的灵活运用，你可以轻松地控制元素边框的各种细节，从而实现丰富多彩的视觉效果。无论是在简单的网页布局还是复杂的设计项目中，边框都是一个不可或缺的工具，它不仅提升了用户体验，也增强了页面的整体美观度。记住，在进行布局时考虑到边框的存在及其对元素尺寸的影响，合理利用。
第五章 CSS盒模型习题案例
KO2131855283的博客
10-12 343
【代码】第五章 CSS盒模型习题案例。
第五章 CSS盒模型 案例所需图片
10-09
第五章 CSS盒模型 案例所需图片
网页设计与制作教程(HTMLCSSJavaScript)第2版第5章CSS盒模型.pptx
11-13
网页设计与制作教程（HTML+CSS+JavaScript）第2版第5章CSS盒模型 本章节主要介绍CSS盒模型的概念和应用，包括盒模型的组成部分、边框和外边距、内边距、盒模型的宽度和高度、块级元素与行级元素的区别、margin叠加...
第16章 CSS盒模型[下].pdf
04-27
在HTML5中，CSS盒模型是构建网页布局的核心概念，它决定了元素框处理元素内容（content）、内边距（padding）、边框（border）以及外边距（margin）的方式。在给定的文件内容中，涉及到了CSS盒模型的三个主要学习...
第8章利用CSS制作导航菜单
KO2131855283的博客
11-12 1043
利用CSS为超链接重新设置样式，包括对a:link和a:visited这两个伪类的设置，以此来分别表示超链接未被访问和已被访问的状态，同时将其display属性设为block，这样就能把超链接变成块级元素，进而可以为超链接设置80像素的宽度，满足特定的页面布局需求。与此同时，针对大标题文字的 CSS 样式也要进行设定，这包括规定高度值，设置合适的行高，确定文字颜色（可依据设计风格选择不同色彩）以及文字的对齐方式（如居中对齐、左对齐等），以此来达到理想的视觉呈现效果，提升导航栏和标题的美观度与可读性。
第8章 利用CSS制作导航菜单.
w_wx8866的博客
11-11 739
我们在浏览网页的时候可以看见许多位于顶部的导航栏，供我们点击跳转。
css-50 Projects in 50 Days(4)
xwc999
11-14 151
【代码】css-50 Projects in 50 Days(4)
第七章利用CSS和多媒体美化页面
KO2131855283的博客
11-12 1308
当设置为show时，就意味着当表格中某个单元格没有内容时，依然会显示该单元格的边框，这样可以保持表格的完整性和视觉上的连贯性，让用户在浏览表格时，能清晰地看到每个单元格的范围。而当参数为hide时，则指定在表格的单元格无内容的情况下，隐藏该单元格的边框，这种设置在某些特定的设计场景中可能会更符合视觉上的简洁性需求。页面中的链接经过美化，呈现出按钮式的外观，列表使用了特定的图像和类型进行修饰，表格的边框和间距也经过了精心设置，同时还嵌入了视频和音频元素，为用户带来更加生动的体验。
24.11.10 css
2401_87910368的博客
11-11 475
属性用于创建浮动框，允许元素向左或向右浮动，使其脱离常规的文档流。浮动元素会移动到包含块的左端或右端，直到它的外边缘接触到包含块或另一个浮动元素的边缘。​ 行内块() 从走到右排列 宽高有效 图片 表单元素(输入框 选择框 按钮.....)div+css布局 实际上就是在页面中画格子 大格子中套小格子。​ 行内(inline) 从左到右排列 宽高无效。​ 块 (block) 从上到下排列 宽高有效。伪类选择器 (选取元素的交互状态)1,2 后加载的覆盖先加载的。选择器组合方式 (了解即可)
CSS中常见文本居中技巧详解
2301_76541209的博客
11-11 543
在网页设计中，文本居中是非常常见且重要的布局需求之一。无论是为了美观还是为了更好地传达信息，掌握文本居中的方法对于前端开发者来说都是必不可少的技能。本文将详细介绍几种常用的CSS文本居中方法，帮助读者解决实际开发中的问题。
css中的变量使用
qq505751223的博客
11-11 275
在 CSS 中，变量使用--前缀来定义。通常在:root选择器中定义全局变量，以便在整个文档中使用。:root {定义变量：使用--前缀在 CSS 中定义变量。使用变量：使用var()函数引用变量。全局变量：在:root选择器中定义，可在整个文档中使用。局部变量：在特定的选择器中定义，只在该选择器及其子选择器中有效。动态更新：可以通过 JavaScript 动态更新 CSS 变量，实现动态样式变化。CSS 变量可以在任何选择器中定义，不一定要写在:root里面。:root。
vue2项目启用tailwindcss - 开启class=“w-[190px] mr-[20px]“ - 修复tailwindcss无效的问题
Rudon滨海渔村的博客
11-11 707
Tailwind CSS是utility-first(功能类优先)的CSS框架，功能类优先是指在一组受约束的原始功能类的基础上构建复杂的组件，Tailwind CSS内置了很多CSS类，直接放在HTML class属性中，以代替CSS。 项目中安装配置Tailwind CSS很简单，这里不再赘述，看官网文档即可。使用Tailwind CSS后，我们不再去写内联样式或者css文件，而是在html标签的class属性中写一连串类名就行了。
css文字间距撑满横向距离
最新发布
weixin_69903461的博客
11-14 221
【代码】css文字间距撑满横向距离。
CSS权重与盒模型深入解析
在学习CSS的过程中，第三天的笔记主要涵盖了上节课的知识复习、权重问题深入、盒模型、标准文档流以及浮动等核心概念。 一、上节课知识复习 复习了CSS的基本属性，如文本样式（加粗、倾斜、下划线）、颜色设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值