CSS新手入门笔记整理:CSS盒模型

在"CSS盒子模型"理论中,页面中的所有元素都可以看成一个盒子,并且占据着一定的页面空间。

一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两个方面来理解:

  • 一是理解单独一个盒子的内部结构(往往是padding);
  • 二是理解多个盒子之间的相互关系(往往是margin);

可以把每个元素都看成一个盒子,盒子模型是由4个属性组成的:content(内容)、padding(内边距)、margin(外边距)和border(边框)。此外,在盒子模型中,还有宽度(width)和高度(height)两大辅助性属性。

|---------|-------------------------------------------|-------------------------------------------------------------------------------------------|
| 结构 | 说明 | 属性 |
| content | 内容,CSS盒子模型的中心,它呈现了盒子的主要信息内容,可以是文本或图片。 | * width(宽) * height(高) * overflow(溢出) |
| padding | 内边距,用于定义内容与边框之间的距离。 | * padding-top(内边距-上) * padding-bottom(内边距-下) * padding-left(内边距-左) * padding-right(内边距-右) |
| margin | 外边距,用于定义当前元素与其他元素之间的距离。 | * margin-top(外边距-上) * margin-bottom(外边距-下) * margin-left(外边距-左) * margin-right(外边距-右) |
| border | 边框,用于定义元素的边框。 | * border-width(边框宽度) * border-style(边框类型) * border-color(边框颜色) |


宽高:width、height

  • 元素的宽度(width)和高度(height)是针对内容区而言的。padding不是内容区的一部分。
  • 只有块元素才可以设置width和height,行内元素是无法设置width和height的。行内元素设置的width和height无法生效,它的宽度和高度只能由内容区撑起来。

语法

复制代码
width:像素值;
height:像素值;

边框:border

语法

复制代码
border:1px solid red;

第1个值指的是边框宽度(border-width),第2个值指的是边框外观(border-style),第3个值指的是边框颜色(border-color)。


拓展:border:0 和 border:none的差异

|-------------|-------------|-----------------------------------------------------------------------------------------------------|
| 性能差异 | border:0 | 表示把 border 定义为 0 像素。虽然 0px 在页面上看不见,但是浏览器依然会对 border 进行渲染,渲染之后,实际上是一个像素为 0 的 border。border:0 需要占用内存。 |
| 性能差异 | border:none | 表示把 border 定义为"none(无)",浏览器解析 border:none 时并不会对它 进行渲染。 border:none 不需要占用内存。 |
| 兼容差异 (了解即可) | * 兼容差异只存在于 IE6 和 IE7 的 <input type="button"/> 标签以及 <button></button> 标签中, 其他浏览器不存在兼容问题。 * border:0 在所有的浏览器中的效果都一样,都是把边框隐藏(不是去掉)。 * border:none 对IE6和IE7按钮的边框无效,在其他浏览器中则会去掉按钮的边框。 ||
| 兼容差异 (了解即可) | * 兼容差异只存在于 IE6 和 IE7 的 <input type="button"/> 标签以及 <button></button> 标签中, 其他浏览器不存在兼容问题。 * border:0 在所有的浏览器中的效果都一样,都是把边框隐藏(不是去掉)。 * border:none 对IE6和IE7按钮的边框无效,在其他浏览器中则会去掉按钮的边框。 ||


内边距:padding

语法

复制代码
padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;

padding简写形式

语法

复制代码
/*表示4个方向的内边距都是20px*/
padding:20px;

/*表示padding-top和padding-bottom为20px,padding-right和padding-left为40px。*/
padding:像素值20px 像素值40px;

/*表示padding-top为20px,padding-right为40px,padding-bottom为60px,padding-left为80px*/
padding:像素值20px 像素值40px 像素值60px 像素值80px;

外边距:margin

语法

复制代码
margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;

外边距指的是两个盒子之间的距离,它可能是子元素与父元素之间的距离,也可能是兄弟元素之间的距离。


margin简写形式

语法

复制代码
/*表示4个方向的外边距都是20px*/
margin:20px;

/*表示margin-top和margin-bottom为20px,margin-right和marginleft为40px*/
margin:像素值20px 像素值40px;

/*margin-top为20px,margin-right为40px,marginbottom为60px,margin-left为80px*/
margin:像素值20px 像素值40px 像素值60px 像素值80px;

拓展:外边距叠加

外边距叠加,又称"margin 叠加",指的是当两个垂直外边距相遇时,这两个外边距将会合并为一 个外边距,即"二变一"。其中,叠加之后的外边距高度,等于发生叠加之前的两个外边距中的最大值。

外边距叠加的意义:CSS 定义外边距叠加的初衷就是为了更好地对文章进行排版。

|--------|---------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 同级元素叠加 | 当一个元素出现在另外一个元素上面的时候,第 1 个元素的下边距(margin-bottom)将会与第 2 个元素的上边距(margintop)发生合并。 | |
| 父子元素叠加 | 当一个元素包含在另外一个元素中时(呈父子关系),假如没有 padding 或 border 把外边距分隔开,父元素和子元素的相邻上下外边距也会发生合并。 | |
| 空元素 | * 当一个空元素 有上下外边距时,如果没有 border 或者padding,则元素的上外边距与下外边距就会合并。 * 如果空元素的外边距碰到另外一个元素的外边距,它们也会发生合并。 | |

总结

  • 水平外边距,永远不会有叠加,水平外边距指的是 margin-left 和 margin-right。
  • 垂直外边距只有在以上 3 种情况下会叠加,垂直外边距指的是 margin-top 和 margin、bottom。
  • 外边距叠加之后的外边距高度,等于发生叠加之前的两个外边距中的最大值。
  • 外边距叠加针对的是 block 以及 inline-block 元素,不包括 inline 元素。因为 inline 元素的 margin-top 和 margin-bottom 设置无效。

拓展:负margin技术

当margin取值为负数时,margin 对普通文档流元素和对浮动元素的影响是不一样的。其中,负 margin 对普通文档流元素的影响,可以分为两种情况。

  • 当元素的 margin-top 或者 margin-left 为负数时,"当前元素"会被拉向指定方向。会将"当前元素"拉出,然后覆盖"其 他元素"。
  • 当元素的 margin-bottom 或者 margin-right 为负数时,**"后续元素"会被拉向指定方向。**将"后续元素"拉进,然后覆盖"当前元素"。

使用技巧

|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 图片与文本对齐 | 当图片与文本放到一起的时候,它们在底部水平方向上往往都是不对齐的。这是因为在默认情况下,图片与周围的文本是"基线对齐",如果想让它们在底部水平方向对齐,可以使用负 margin 技术。 |
| 自适应两列布局 | 自适应两列布局,指的是在两列布局中,其中一列的宽度是固定的,而另外一列宽度自适应。 如果使用浮动来做的话,只能实现固定的左右两列布局,并不能实现其中一列为自适应的布局,可以使用负 margin 技术来实现。 |
| 元素垂直居中 | 给父元素写上 psition:relative;,这样做是为了给子元素添加 position:absolute 的时候不会被定位到"外太空"去;然后给子元素添加如下属性。 父元素 {position:relative; } 子元素 { position:absolute; top:50%; left:50%; margin-top: "height值一半的负值" ; margin-left: "width值一半的负值" ; } |


相关推荐
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖7 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖7 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台8 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121388 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css