CSS详解（6.盒子模型）

最新推荐文章于 2024-04-17 13:35:42 发布
最新推荐文章于 2024-04-17 13:35:42 发布
阅读量8.7k 收藏
点赞数
分类专栏： 笔记 css 文章标签： css html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43623447/article/details/104016717
版权
笔记 同时被 2 个专栏收录
27 篇文章 5 订阅
订阅专栏
css
6 篇文章 2 订阅
订阅专栏

文章目录

一，盒子模型的内容

在这里插入图片描述

margin属性: margin-top, margin-bottom, margin-left, margin-right

border属性: border-color, border-style, border-width, border-top…

padding属性: padding-top, padding-bottom, padding-left, padding-right

content属性:

二，属性说明

1，margin:

围绕在内容边框的区域就是外边距，外边距默认为透明区域

外边距接任何长度单位，百分数

•margin:设置所有的外边距

•margin-top 设置上边的外边距

•margin-bottom, 设置下边的外边距

•margin-left, 设置左边的外边距

•margin-right 设置右边的外边距

•注意外边距合并的问题

2，border 复合属性

•border-width 边框宽度

•border-style 边框样式

•border-color 边框颜色

•border-radius 设置圆角边框

•border-shadow 设置对象阴影

•border-image 边框的背景图片

3，padding

内边距在content外，边框内

•padding 设置所有的内边距

•padding-top 设置上边的内边距

•padding-bottom, 设置下边的内边距

•padding-left, 设置左边的内边距

•padding-right 设置右边的内边距

三，盒子模型的分类

1，标准盒子：正常盒子模型、怪异盒子模型

2，伸缩盒：新、旧

四，正常盒子模型

1.<html>
2.	<head>
3.		<meta charset="UTF-8">
4.		<title></title>
5.		<style type="text/css">
6.			.outerbox{
7.				width: 200px;
8.				height: 200px;
9.				background-color: rosybrown;
10.			}
11.			.innerbox{
12.				width: 200px;
13.				height: 200px;
14.				background-color: royalblue;
15.			}
16.		</style>
17.	</head>
18.	<body>
19.		<div class="outerbox">
20.			<div class="innerbox">
21.				haha
22.			</div>
23.		</div>
24.	</body>
25.</html>

注意点：

1，padding内边距会在以前的基础上扩大，也就是会自动撑开，不用改原来的宽度

2，margin-top margin-bottom 会取它大的那一个值

五，怪异盒子模型

1.<!DOCTYPE html>
2.<html>
3.	<head>
4.		<meta charset="UTF-8">
5.		<title></title>
6.		<style type="text/css">
7.			.outerbox{
8.				width: 200px;
9.				height: 200px;
10.				background-color: rosybrown;
11.				padding: 20px;
12.				box-sizing: border-box;
13.			}
14.			.innerbox{
15.				width: 200px;
16.				height: 200px;
17.				background-color: royalblue;
18.			}
19.		</style>
20.	</head>
21.	<body>
22.		<div class="outerbox">
23.			<div class="innerbox">
24.				haha
25.			</div>
26.		</div>
27.	</body>
28.</html>

注意点：

使用怪异的特点是固定了盒子的大小，无论怎么加边距，盒子的大小是不会改变的

六，旧伸缩盒ccs3

1，css3引入一个种新的布局模式—flexbox布局，就是伸缩盒模型(flexible box) 用来提供一个更加有效的方式制定，调整和分布一个容器项目布局，即使它们的大小是未知或者动态的

2，FlexBox可以轻松的实现屏幕和浏览器窗口大小发生变化时，保持元素的相对位置和大小不变

属性说明

  • 1，box-orient 伸缩盒对象的子元素的排列方式

  • 2，box-pack 设置盒子里的内容垂直居中

  • 3，box-align 设置盒子里的内容水平居中

  • 4，box-flex 设置盒子内的对象按比例分配空间

  • 5，box-direction 盒子里面的对象排列顺序是否反转

1.<!DOCTYPE html>
2.<html>
3.
4.	<head>
5.		<meta charset="UTF-8">
6.		<title></title>
7.		<style type="text/css">
8.			.container{
9.				width: 500px;
10.				height: 500px;
11.				background-color: darkgray;
12.				display: -webkit-box;  
13.				/*变成盒子*/
14.				/*-webkit-box-pack: center;*/
15.				/*-webkit-box-orient: vertical;*/   
16.				/*-webkit-box-align: center;*/
17.				/*-webkit-box-direction: reverse;*/
18.			}
19.			/*div{
20.				display: inline-block;
21.			}*/
22.			
23.			.one{
24.				width: 100px;
25.				height: 100px;
26.				background-color: antiquewhite;
27.				-webkit-box-flex: 1;
28.			}
29.			.two{
30.				width: 100px;
31.				height: 100px;
32.				background-color: pink;
33.				-webkit-box-flex: 1;
34.				
35.			}
36.			.three{
37.				width: 100px;
38.				height: 100px;
39.				background-color: palegreen;
40.				-webkit-box-flex: 1;
41.				
42.			}
43.		</style>
44.	</head>
45.
46.	<body>
47.		<div class="container">
48.			<div class="one">
49.				d1
50.			</div>
51.			<div class="two">
52.				d2
53.			</div>
54.			<div class="three">
55.				d3
56.			</div>
57.		</div>
58.	</body>
59.
60.</html>

七，新伸缩盒css3

相关属性

  1. flex 复合属性，设置伸缩盒子对象的子元素如何分配空间

  2. flex-grow 弹性盒子扩展比率，按比例平均分配

  3. flex-flow 复合属性 设置伸缩盒子对象子元素排列方式

  4. flex-direction 伸缩盒子对象的子元素在父容器中的位置

  5. flex-wrap 设置伸缩盒对象的子元素超出父容器时是否换行

  6. order 设置伸缩盒对象的子元素出现的顺序

1.<!DOCTYPE html>
2.<html>
3.
4.	<head>
5.		<meta charset="UTF-8">
6.		<title></title>
7.		<style type="text/css">
8.			.container{
9.				width: 500px;
10.				height: 500px;
11.				background-color: darkgray;
12.				/*变成盒子*/
13.				display: -webkit-flex;  
14.				/*-webkit-flex-direction: column-reverse;*/
15.				/*-webkit-flex-wrap: wrap;*/
16.			}
17.			.one{
18.				width: 300px;
19.				height: 100px;
20.				background-color: antiquewhite;
21.			}
22.			.two{
23.				width: 200px;
24.				height: 100px;
25.				background-color: pink;
26.				/*-webkit-order: 3;*/
27.			}
28.			.three{
29.				width: 100px;
30.				height: 100px;
31.				background-color: palegreen;
32.			}
33.		</style>
34.	</head>
35.
36.	<body>
37.		<div class="container">
38.			<div class="one">
39.				d1
40.			</div>
41.			<div class="two">
42.				d2
43.			</div>
44.			<div class="three">
45.				d3
46.			</div>
47.		</div>
48.	</body>
49.
50.</html>
张兵游勇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css盒子模型详解
weixin_44992737的博客
06-10 2万+
css盒子模型，box model，弹性盒模型，怪异盒模型，浏览器内核
CSS（4）盒子模型
最新发布
2401_85687751的博客
06-19 1055
CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节
CSS盒子模型详解
月光晒了很凉快的博客
03-25 724
文章目录1. 看透网页布局的本质2. 盒子模型（Box Model）组成3. 边框（border）4. 表格的细线边框5. 边框会影响盒子实际大小6. 内边距（padding）7. 新浪导航案例：padding影响盒子好处8. padding不会撑开盒子的情况9. 外边距（margin）10. 外边距典型应用11. 外边距合并11.1 相邻块元素垂直外边距的合并11.2 嵌套块元素垂直外边距的塌陷12. 清除内外边距 1. 看透网页布局的本质 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子
CSS基础：盒子模型详解
u013179804的博客
04-17 1439
盒模型时，也叫"框模型"，指的是 CSS 中元素的布局方式和尺寸计算规则。盒模型定义了一个元素在页面布局中所占的空间，包括了元素的内容、内边距、边框和外边距，没错，而这些，正是我们前几篇文所提到的。CSS 基础：border 的 3 个基础属性和简写方法CSS基础：margin属性4种值类型，4个写法规则详解CSS基础：最详细 padding的 4 种用法解析CSS基础：width，height尺寸属性详解。
CSS盒子模型及弹性布局详解
小小码农
03-12 1285
CSS盒子模型及弹性布局详解
CSS标准盒子模型详解
weixin_55020138的博客
01-16 466
CSS标准盒子模型
CSS盒子模型及属性细节详解
Zhao_zee的博客
07-25 778
一. CSS盒子模型 1. 简介 2. 组成 3. 定位 二. 属性细节 1. 元素的宽度和高度 2.box-sizing属性 3. CSS边框属性（border） 4.CSS边距（margin） 5. CSS填充（padding） 6. 浏览器的兼容性问题
前端CSS盒子模型详解
weixin_42008209的博客
05-14 366
CSS盒子模型 盒子模型解释 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(pad...
CSS盒子模型之详解
weixin_39037804的博客
09-03 244
前言： 盒子模型是css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。 一、css盒子模型概念 CSS盒子模型又称框模型(Box Model) ，包...
css盒子模型实验报告总结_css盒子模型详解加示例
weixin_31922807的博客
12-29 726
CSS盒子模型：W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在)一个盒子的构成：盒子中的内容：content盒子的边框：border盒子边框与内容之间的距离：称为填充---padding内边距(内补丁)如果有多个盒子存在，盒子与盒子之间的距离：称为边界---margin，外边距(外补丁)整个盒子模型在网页中所占的宽度：左边界+左边框+左填...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS盒子模型详解.pdf
04-15
CSS盒子模型详解，自己学习总结的，希望对你有用。自己也做个笔记
CSS3盒子模型详解
12-13
本章将介绍CSS3中各种盒的知识点；主要包含以下内容： CSS3中各种各样盒的类型概念、浏览器支持情况； 当盒中内容超出容纳范围时，如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示； 掌握给盒添加阴影...
CSS详解（1.什么是css）
热门推荐
qq_43623447的博客
01-17 1万+
目录一，优势二，学习要点 CSS是层叠样式表（Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。CSS现在已经被大多数浏览器所支持，成为网页设计者必须掌握的技术之一。 W3C自1996年12月发布第一个CSS正式推荐版CSS 1.0以来，一直在对CSS标准进行修订、升级。1999年1月，CSS 2.0 正式推荐版发布，增加了对其它...
JavaScript详解（2.如何在网页中使用脚本语言）
qq_43623447的博客
01-18 1万+
文章目录一，JS的引用方式二，<script>标记的使用要点 一，JS的引用方式 1，在HTML文档中插入脚本语言可以使用1.<html> 2. <head> 3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4. <title>JavaScr...
HTML详解（1.html简介）
qq_43623447的博客
01-16 1万+
文章目录 HTML（HyperText Mark-up Language）即超文本标记语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图 形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的 具体内容。 HTML语言被...
HTML详解（2.html起源和历史）
qq_43623447的博客
01-16 9834
文章目录 HTML作为定义万维网的基本规则之一，最初由蒂姆·本尼斯李（Tim Berners-Lee）于1989年在CERN（Conseil Europeen pour la Recherche Nucleaire）研制出来。HTML的设计者是这样考虑的：HTML格式将允许科学家们透明地共享网络上的信息，即使这些科学家使用的计算机差别很大。因此，这种格式必须具备如下几个特点： 独立于平台，即独...
HTML详解（4.编写第一个html页面）
qq_43623447的博客
01-16 9718
文章目录一，说明二，创建HTML程序 一，说明 HTML文件是普通的文本文件，只是文件扩展名为：.html或者.html。下面我们开始创建我们的第一个HTML程序。 二，创建HTML程序 1，新建文本文件 1.html 2，使用记事本打开写入如下代码 1.<html> 2. <head> 3. <title>my first pag...
CSS盒子模型与排版详解
盒子模型是理解CSS布局的基础，它将网页元素视为具有内容(content)、边框(border)、内边距(padding)和外边距(margin)的盒子。 盒子模型中，内容区域(content)包含了元素的实际内容，如文本或图像。边框(border)则...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值