盒模型的一些介绍

た入场券 2022-10-01 08:43 240阅读 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 条评论，240人围观）

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

相关阅读

相关 css盒模型(css盒模型包括)

威龙模型1:35系列还有白盒、橙盒、p版、z版、sk版各是什么意? 白盒是限量版，价格都相对较贵;橙盒都是老货，虽然价格便宜，但是有些老板件不如新货给力;P版是精装版，Z

妖狐艹你老母/ 2023年09月26日 13:13/ 0 赞/ 126 阅读

相关盒模型

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

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

相关盒模型

css盒模型 box-shadow box-shadow：none | <shadow> [ , <shadow> ] 1. none：无阴影 2.

矫情吗；*/ 2023年06月09日 07:56/ 0 赞/ 79 阅读

相关行盒的盒模型

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

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

相关盒模型及盒模型应用

文章目录盒模型盒子的组成部分盒模型应用改变宽高范围改变背景覆盖范围溢出处理断词

「爱情、让人受尽委屈。」/ 2023年02月19日 11:23/ 0 赞/ 74 阅读

相关盒模型的一些介绍

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

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

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

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

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

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

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

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

相关盒模型

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

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

相关盒模型

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

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