盒模型的一些介绍

た入场券 2022-10-01 08:43 140阅读 0赞

###  ###

### 盒模型: ###

在html中每一个标签都有一个盒模型,和模型有以下内容组成

1.  content(内容)
2.  padding(内边距)
3.  border (边框)
4.  margin (外边距)

content:

用来承载当前标签中的内容,通过width和height两个属性来设置

padding:

控制当前标签内容与边框之间的间距,通过padding属性来设置

border:

控制当前标签的边框,通过属性border来设置

margin:

控制当前标签与相邻标签之间的间距,通过属性 margin来设置

### padding margin 属性复合了以上四个属性; ###

padding: 20px ; 一个值代表:上下左右都是50px;

padding: 20px 20px; 两个值代表:上下 左右分别都是20px;

padding: 10px 20px 30px; 三个值代表;上 左右 下 分别是10px 20px 30px;

padding: 10px 20px 30px 40px; 四个值代表:上 右 下 左 分别是10px 20px 30px 40px;

border属性复合了以上三个属性:

其中border-width,border-style是边框比不可少的两个元素

border-color 默认为 黑色

如果各个边的边框不一致需要单独设置

### 边框样式: ###

*         solid 实线
 *         dotted 点线
 *         dashed 虚线
 *         double 双实线

### margin的两个坑: ###

1, 上下排布的两个标签,上边元素的margin-bottom与下边元素的margin-top两者取最大关系,不会叠加.

2, 父子嵌套的两个标签: 如果父元素没有边框,同时给子元素设置了垂直方向的margin,此时子元素的margin会传递给父级(父子共用margin)

### 最佳解决方案: 给父元素设置overflow:hidden; 属性 ###

闲来无事,总结下...

转载于:https://juejin.im/post/5c8f4773f265da60f5610736

发表评论取消回复

表情：

评论列表（有 0 条评论，140人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 的盒模型

CSS 盒模型的讲解

我不是女神ヾ/ 2024年05月06日 21:23/ 0 赞/ 71 阅读

相关盒模型

\1.盒模型的组成：由里到外分别是content（内容），padding（内边距），border（边框），margin（外边距） \\\2.盒模型的两种标准：\\标准模

阳光穿透心脏的1/2处/ 2023年06月27日 08:41/ 0 赞/ 16 阅读

相关行盒的盒模型

文章目录行盒的盒模型显著特点行块盒空白折叠可替换元素和非可替换元素行盒的盒模型常见的

忘是亡心i/ 2023年02月19日 13:23/ 0 赞/ 17 阅读

相关盒子模型，标准盒模型，怪异盒模型，两种盒模型的区别，box-sizing属性

什么是盒子模型 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型（Box Modle）可以用来对元素进行布局，包括实际内容，内边距，边

迷南。/ 2022年12月03日 08:28/ 0 赞/ 236 阅读

相关盒模型的一些介绍

盒模型: 在html中每一个标签都有一个盒模型,和模型有以下内容组成 1. content(内容) 2. padding(内边距) 3. bor

た入场券/ 2022年10月01日 08:43/ 0 赞/ 141 阅读

相关 css3盒模型、弹性盒模型、怪异盒模型

一、CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒

ゝ一纸荒年。/ 2022年05月28日 00:58/ 0 赞/ 476 阅读

相关 CSS-标准盒模型 & 怪异盒模型

CSS中Box model分类 CSS中Box model是分为两种:: W3C标准和 IE标准盒子模型。大多数浏览器采用W3C标准模型，而IE中则采用Micros

缺乏、安全感/ 2022年05月19日 03:49/ 0 赞/ 311 阅读

相关盒模型

盒模型定义: 由内而外 content padding border margin 盒模型分两种 1.标准和盒模型标准盒模型就是w3c盒模型 width= cont

r囧r小猫/ 2022年04月10日 02:54/ 0 赞/ 253 阅读

相关标准盒模型和IE怪异盒模型

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（qui

野性酷女/ 2021年10月09日 04:14/ 0 赞/ 466 阅读

相关盒模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（...

小鱼儿/ 2021年05月03日 16:18/ 0 赞/ 579 阅读