CSS盒子weight、height和padding、border、margin的关系

最新推荐文章于 2023-02-28 05:15:00 发布
转载 最新推荐文章于 2023-02-28 05:15:00 发布 · 887 阅读 · 0
文章标签：

#css #padding #border #margin #height

博客主要探讨了在CSS里，定义的宽（weight）、高（height）何时包含padding、border、margin，何时不包含。同时提及了CSS3中盒子的box-sizing属性。

问题：我们定义的weight、height什么时候包括padding、border、margin或者什么时候不包括padding、border、margin？

?????????????

CSS3中盒子的box-sizing属性

前端css中盒子模型的各种属性
小蜗牛764号的博客
04-28 2192
本文讲解盒子模型的各种属性，大多数例子没有具体设置html的所有内容属性，只是针对某部分如何设值，或某个属性有什么参数，来进行一行代码的解释说明。聪明的读者肯定会自己创建个div盒子模型，然后自己设置好自己想调整的参数，创建符合自己的盒子模型。其实盒子模型还有关于布局的内容，本文没有写。因为布局可能涉及到弹性盒子模型flex，则笔者决定吧布局的内容放到弹性盒子模型中讲。部分内容可能还不够详细，如背景的样式的属性，多背景的内容本文便没有写等。本文主要是了解盒子模型的属性都有啥，常用属性的罗列一遍。
【前端知识之CSS】对盒子模型的理解
weixin_44337386的博客
05-10 4105
本系列主要整理前端面试中需要掌握的知识点。本节介绍对盒子模型的理解。
HTML5中weight属性的作用,css font-weight属性怎么用
weixin_35728636的博客
06-09 4363
css font-weight属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，700 等价于 bold。所有主流浏览器都支持 font-weight 属性。css font-weight属性怎么用？font-weight属性设置文本的粗细。语法：font-weight:normal|bold|bolder|lighter|数值|inherit;属性值：●　...
CSS之元素显示模式的分类（块元素、行内元素、行内块元素）及转换 Height和Weight的继承问题
蟹黄堡
05-12 862
元素显示模式概述 定义：元素显示模式就是元素以什么方式进行显示，比如：< div >独占一行，而< span >一行可以放多个。 元素显示模式的分类： 块元素 行内元素 行内块元素 块元素 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。 块元素的特点： 1、独占一行； 2、可以设置高度、宽度以及内外边距；
CSS布局中的几个重要属性,width,height,margin,padding,float,position
交换一个思想，能得到俩思想
03-22 3578
首先来看看CSS中的盒子模型，如下图： 我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围于其他物品要留出一定的空间。是不是这样就很容易理解盒模型了。 所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式
CSS设置Padding和Border包含进Width和Height
昊天的博客
01-11 1050
https://paper.knowlesea.top/post/6
CSS中的height和line-height与height和padding
L974521062的博客
05-30 1120
CSS中的height和line-height与height和padding 只有height时： 只有line-height时： height等于line-height时： height大于line-height： height小于line-height时： 除了使用line-height外，还可以使用padding将文字设置为垂直居中。 已知图片中使用的h1为32px，上内边距padding＝(高height－字体h1)/2，24px＝(80px－32px)/2，如下： ...
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
01-19
纯CSS3制作的 登录模板 简洁蓝白(非IE效果更好)</TITLE> <META content=”text/html; charset=unicode” http-equiv=Content-Type> <STYLE> h1, h2, h3, h4, h5, h6{ font-weight:normal; margin:...
CSS教程:CSS控制网页文字排版实例
01-19
有关CSS基本的排版控制虽然已有详细的使用说明和参考教程，但还有许多丰富的CSS排版能力，是很少能查到的。今天的这些实例，为您提供了很多想象和拓展的空间。 CSS功能的强大在jb51.net中早已经展现很多，而有关CSS...
CSS代码属性分组的写法例子
12-10
在这个例子中，`.new_list`的选择器包含了多个属性，如外边距(margin)、内填充(padding)、高度(height)、背景色(background)、边框(border)、颜色(color)、字体大小(font-size)和字体加粗(font-weight)。这些属性都...
CSS学习之width属性 height属性和Padding（内边距）
WarmAir2006的专栏
12-09 1877
CSS学习之width、height和padding属性
CSS盒模型、width、height、padding、border、margin（5）
sunnyaha12的博客
07-29 1413
一、CSS盒模型统计图解 CSS盒子模型(BoxModel)又称框模型，包含了元素内容(content)、内边距(padding)边框(border)、外边距(margin)几个要素。
CSS（CSS第二天）
pikaqiu19的博客
07-19 271
1、Emmet语法 （1）快速生成html语法 （2）快速生成CSS样式 简写tac---text-align：center 简写w100---weight：100px 格式化 新版本直接搜索format 打两个√ 2、CSS元素显示模式 （1）什么是元素的显示模式 元素以什么方式显示 div独占一行 一行存放多个span 元素分为块元素和行内元素 （2）元素显示模式分类 （3）元素显示模式转换 转换为块元素（常用） 简单案例实践 3...
height 用 padding, width 用 margin
kogo2005的专栏
12-12 467
这是前几天写一个网页的时候发现的. 最开始的时候height 和 margin 我都用了margin, 在IE7下看起来没有问题. 但是在FF下就会在纵向上多出一些空白. 换成padding就没有问题了. 
【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-28 8122
一、 CSS 2.0手册使用 1、 按照文档层次查找 2、 搜索关键字查找文档 二、 font-weight 字体粗细设置 1、 语法简介 2、 代码示例 三、 font-style 字体斜体设置 1、 语法简介 2、 代码示例 四、 font 字体样式综合写法 1、 语法简介 2、 代码示例 ① 不使用综合字体样式的代码 ② 使用综合字体样式的代码 ③ 执行效果
[前端基础] CSS3 篇
不定期更新 Web 开发及机器学习相关博客
11-03 2138
CSS3 使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。CSS3 作为 CSS 的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。CSS3 的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持 CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。
亲爱的老狼-css文字基本属性汇总
m0_60450677的博客
08-18 241
font四大项：font-{style、weight、size、family}-------style：格式（是否倾斜italic等）、weight：粗细（文字粗细400-700）、size：大小（文字大小）、family：样式（例如微软雅黑/5FAE/8F6F/96C5/9ED1/等） color：颜色、 text-{indent、decoration}-----indent：段落首行缩进、decoration：划线（划线细分为删除线line-through、下划线under-line） word-
深入了解font-weight
凹凸实验室
11-08 3839
问题提出font-weight的属性值有100、200、300、400、500、600、700、800、900和normal、bold、lighter、bolder，它们的区别是？另外，在实际开发中，我们应该使用数值表达还是文字表达呢？认识font-weight根据W3C Fonts节章的规范标准，可知：font-weight可取值：100～900和normal、bold、bolder、light...
CSS学习3-21
TomCruisePro的博客
03-21 244
1.外部样式表 当样式 通过外部引入时，需要使用link链接 2.text-align对齐方式 3.text-decoration:该属性主要是用来删除链接的下划线的 4.背景附着，属性指定背景图像是应该滚动的还是附着的 固定的：attachment:fixed 一起滚动的：scroll 5.边框border，可以设置大小，形状，颜色等属性 6.外边距，可以设置 auto:浏览器计算外边距 length：以px,em,pt等单位计算外边距 %：指定以包含元素宽度的百分比计的外边距，inherit指定从父元素
CSS3蓝白登录模板示例：非IE优化，简洁高效
4. **特殊元素处理**：如`ul`、`ol`、`dl`等列表结构，通过`padding`和`margin`属性将其内外边距设置为零，以确保整洁的布局。`li`元素设置为列表项目，`list-style-position: outside`让列表标记位于内容外部。 5....
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值