css中的盒模型

最新推荐文章于 2024-10-17 20:27:26 发布
最新推荐文章于 2024-10-17 20:27:26 发布
阅读量106 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38577700/article/details/108263705
版权

引言

html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型.

w3c盒模型

在这里插入图片描述

1.页面上的每个元素可以看成一个矩形框，每个框由元素的内容，内边距，边框和外边距组成。
2.如果在元素上添加背景，则背景是边框, 内边距和内容组成的区域.
3. 在css中width和height指的是内容区域的宽度和高度。增加内边距，边框和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸。即width=element

IE的盒模型

在这里插入图片描述
在IE盒子模型中，width表示content+padding+border这三个部分的宽度

切换盒模型

 box-sizing: content-box 是W3C盒子模型
 box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box

qq_38577700
关注
专栏目录
CSS之盒子模型
从来无所求，所得皆惊喜！
08-07 1013
盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）四个要素。
浅谈CSS中盒模型的理解
01-21
今天突然看到一篇关于CSS中盒模型的文章，忽然觉得自己竟然遗忘了很多小的地方，所以写一篇文章来记忆一下 （ 摘抄于千与千寻写的CSS盒子模型理解，并在自己基础上添加了一些东西，希望更完善，对大家有帮助 ） 1....
css中盒模型
xxh20171777的博客
12-23 1222
文章目录CSS盒模型一、标准盒模型二、IE盒模型（怪异盒模型）三、flex弹性伸缩盒模型四、多列布局盒模型 CSS盒模型 Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。 一、标准盒模型 box-sizing:content-box 平常最常用的就是标准盒模型，即box-sizing中的content-box，
css中盒子模型的属性
当路danglu0010
05-19 1957
css中盒子模型的属性
css中盒子模型
zsl15039718107的博客
10-15 1002
css中盒子模型 css盒模型 简介：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。 box-sizing(有3个值哦)：content-box | border-box | inherit 标准盒子模型： box-sizing: content-box; IE盒子模型： box-sizing: border-box; 从上图可以看出标准盒子模型与I...
css中的盒子模型
L_csdn123的博客
02-15 1348
css中的盒子模型
CSS中的盒子模型
小何代码咖啡馆
04-19 1965
在网页布局时，主要关注的就是如何利用CSS摆放盒子先准备好相关的网页元素，网页元素基本都是盒子利用 CSS 设置好盒子样式，然后摆放到相应位置往盒子里面装内容。
css相关内容:盒子模型
weixin_74384492的博客
08-06 985
在HTML学习中，我们了解到，每个标签的本质都是形成一个独立的空间，用于各种操作。各种标签形成的独立的空间就是盒子模型。简单来说，盒子模型就是各种标签的抽象化产物。我们可以针对盒子模型进行各种参数设置，达到样式优化的效果。
CSS的盒子模型！
最新发布
CH040708的博客
10-17 818
盒子模型的内容包含了宽度（ width）和高度（height）等属性来定义。盒子模型相当于一个相框，相片就是盒子的内容（content），相框之间的距离就是内边距(padding)，相框的宽度就是边框(border)；w就是外边距(margin)。内边距作用于控制内容与编剧之间的距离。padding属性用于定义元素内容与元素边框之间的空白区域。（内边距属性不允许负值）边框的外围即为元素的最外围，围绕元素内容和内边距的一条或多条线。边框的复合写法该属性是复合属性，可以将多个单属性合并一起写。
css盒子模型
2301_80840100的博客
06-22 3667
CSS盒子模型是网页布局的基础，它描述了元素在页面上的排列方式。Content(内容) - 盒子的内容，显示文本和图像。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。
css中盒模型相关设置
lap2004的专栏
02-13 957
默认的盒模型box-sizing属性为content-box，设置宽或高后，只指内容的宽和高，而边距，内边框等宽度都是叠加到内容宽和高上的。 尺寸计算公式： width = 内容的宽度 height = 内容的高度 宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。 为避免产生魔术数值在布局时一般将属性改为border-box包括内容，内边距和边框，但不包括外边距。详细举例见下面链接： box-sizing - CSS（层叠样式表） | MDN ...
深入讲解CSS中盒模型的用法
09-24
在标准盒模型中，`width`和`height`只包括内容区域的大小，而在IE盒模型中，这两个属性包含了内容、内边距和边框的总和。可以通过`box-sizing`属性来切换这两种模式，`box-sizing: border-box;`表示使用IE盒模型，`...
CSS+盒模型,css盒模型面试题,HTML
09-10
**CSS盒模型详解** 在网页设计与开发中，CSS（层叠样式表）盒模型是理解元素布局和尺寸计算的关键概念。盒模型定义了元素如何占据空间，包括内容区域、内边距、边框和外边距。了解CSS盒模型对于优化页面布局和解决...
深入理解CSS中的盒子模型
09-27
CSS中的盒子模型（Box Model）是网页布局的基础，它定义了元素如何占据空间并与其他元素交互。这个模型将每个HTML元素视为一个矩形盒子，包含了内容区、内边距、边框和外边距四部分。 1. **内容区（Content Area）*...
1rem、1em、1vh、1px各自代表的含义
qq_38577700的博客
09-03 4336
rem rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。 em 子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用em的话是相对于该元素的font-size vw/vh 全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。 px
CSS中support, media各自的含义及用法
qq_38577700的博客
09-09 798
support CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。但是这里有一点需要注意的是：@support对于浏览器的版本也是有要求的，不是说所有的浏览器以及其所有的版本都是支持@support的 基本语法 @supports (display: flex) { div { display: flex; }} //如果浏览器支持display:flex属性的话，那么div的样
HTML行级标签和块级标签
qq_38577700的博客
08-24 673
一，块级标签 独占一行，不和其他元素待在同一行 能设置宽高,如果不设置宽度，那么宽度将默认变为父级的100% 常见的块级标签：div，p，h1-h6，ul，li，dl，dt，dd 二，行级标签 能和其他元素待在同一行 不能设置宽高,默认的宽度就是文字的宽度 常见的行级标签：a ，span，strong，u，em 三，行内块标签 能和其他元素待在一行 2 能设置宽高 常见的行内块标签：img，input，textarea 在HTML的角度来讲，标签分为： 文本级标签：p , spa
CSS sprites
qq_38577700的博客
09-08 560
CSS sprites是什么？ CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。 优点 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和； 减少了命名困扰：只需对一张集合的图片命
css水平、垂直居中的写法
qq_38577700的博客
09-03 213
水平居中 行内元素: text-align: center 块级元素: margin: 0 auto position:absolute +left:50%+ transform:translateX(-50%) display:flex + justify-content: center 垂直居中 设置line-height 等于height position: absolute+top: 50%+left: 50%+transform: translate(-50%, -50%); display:fl
深入剖析CSS弹性盒模型Flex布局
CSS 弹性盒模型（flex）是一种新的布局模型，引入于 CSS3 中，提供了一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕。flex 是 flexible box 的缩写，通常称之为弹性盒模型。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值