2.4 CSS 盒子模型

HuaLuLemon

于 2023-11-04 16:53:14 发布

阅读量206

点赞数 1

分类专栏： Web 文章标签： css 前端

本文链接：https://blog.csdn.net/Yuanshigou9/article/details/134220409

版权

Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一. 盒子模型

CSS会把所有的 HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。

盒子的大小= content +左右padding +左右border

默认宽度：所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度。

总宽度=父的 content - 自身的左右margin 。
内容区的宽度= 父的content - 自身的左右margin - 自身的左右border - 自身的左右padding 。

1.margin(外边距)

margin：盒子与外界的距离。
margin注意事项：

- 子元素的margin，是参考父元素的content计算的。(因为是父亲的content中承装着子元素)
- 上margin、左margin:影响自己的位置;下margin、右margin:影响后面兄弟元素的位置。
- 块级元素、行内块元素，均可以完美地设置四个方向的margin;但行内元素，左右margin可以完美设置,上下margin设置无效。
- margin的值也可以是 auto，如果给一个块级元素设置左右margin都为 auto，该块级元素会在父元素中水平居中。
- margin的值可以是负值。

margin塌陷问题

- 描述：第一个子元素的上margin 会作用在父元素上，最后一个子元素的下margin 会作用在父元素上
- 解决margin塌陷

- - 方案一:给父元素设置不为0的 padding
  - 方案二:给父元素设置宽度不为0的border
  - 方案三:给父元素设置CSS样式 overflow: hidden;

margin合并问题

- 描述：上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
- 解决：无需解决合并问题，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

2.border(边框)

border：盒子的边框。

3.padding (内边距)

padding：紧贴内容的补白区域。
padding复合属性的使用规则

- 二个值：上下，左右
- 三个值：上，左右，下
- 四个值：上，右，下，左

行内元素的左右内边距是没问题的,上下内边距不能完美的设置。

4.content(内容)

content：元素中的文本或后代元素都是它的内容。
overflow处理内容溢出问题：

- visible :显示，默认值
- hidden:隐藏
- scroll:显示滚动条，不论内容是否溢出
- auto:自动显示滚动条，内容不溢出不显示

隐藏元素：

- 方式一: visibility属性，visibility属性默认值是show，如果设置为hidden，元素会隐藏。元素看不见了，还占有原来的位置(元素的大小依然保持)。
- 方式二:display属性,设置display: none; ，就可以让元素隐藏。彻底地隐藏，不但看不见，也不占用任何位置,没有大小宽高。

5.新增属性

box-sizing：怪异盒模型

- content-box：width和height设置的是盒子内容区的大小。(默认值)
- border-box：width和height设置的是盒子总大小。(怪异盒模型)

resize：调整盒子大小

- 注意：需要与overflow配合使用
- none：不允许用户调整元素大小。(默认)
- both：用户可以调节元素的宽度和高度。
- horizontal：用户可以调节元素的宽度。
- vertical：用户可以调节元素的高度。

box-shadow：盒子阴影

- h-shadow：水平阴影的位置，必须填写，可以为负值
- v-shadow：垂直阴影的位置，必须填写，可以为负值
- blur：可选，模糊距离
- spread：可选，阴影的外延值
- color：可选，阴影的颜色
- inset：可选，将外部阴影改为内部阴影

opacity：不透明度

- opacity属性能为整个元素添加透明效果，值是0到1之间的小数，0是完全透明，1表示完全不透明。
- opacity 与 rgba 的区别：opacity 是一个属性，设置的是整个元素(包括元素里的内容)的不透明度。rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

二. 浮动

1.元素浮动的特点

脱离文档流。
不管浮动前是什么元素，浮动后:默认宽与高都是被内容撑开（尽可能小)，而且可以设置宽高。
不会独占一行，可以与其他元素共用一行。
不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding 。
不会像行内块—样被当做文本处理(没有行内块的空白问题)。

2.浮动产生的影响

对兄弟元素的影响:后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面;对前面的兄弟无影响。
对父元素的影响:不能撑起父元素的高度，导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素。

3.清除浮动产生的影响

方案一:给父元素指定高度
方案二:给父元素也设置浮动，带来其他影响。
方案三:给父元素设置overflow:hidden
方案四:在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear: both
方案五:给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===>推荐使用

.parent::after {
  content: '';
  display: block;
  clear: both;
}

布局中的一个原则:设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

三.定位

1.相对定位

1.1 设置相对定位position : relative

- 可以使用left .right . top . bottom四个属性调整位置。
- 参考自己原来的位置

1.2 相对定位的特点:

- 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

- - 定位的元素会盖在普通元素之上。
  - 都发生定位的两个元素，后写的元素会盖在先写的元素之上。

- left(生效)不能和right一起设置,top(生效)和bottom不能一起设置。
- 相对定位的元素，也能继续浮动，但不推荐这样做。
- 相对定位的元素，也能通过margin调整位置，但不推荐这样做。

1.3 绝大多数情况下，相对定位，会与绝对定位配合使用。

2.绝对定位

2.1 设置相对定位position : absolute

- 可以使用left .right . top . bottom四个属性调整位置。
- 参考包含块位置

- - 对于没有脱离文档流的元素:包含块就是父元素;
  - 对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位，那包含块就是整个页面)。

2.2 绝对定位元素的特点:

- 脱离文档流，会对后面的兄弟元素、父元素有影响。
- left(生效)不能和right一起设置,top(生效)和bottom不能一起设置。
- 绝对定位、浮动不能同时设置，如果同时设置,浮动失效,以定位为主。
- 绝对定位的元素，也能通过margin调整位置，但不推荐这样做。
- 无论是什么元素(行内、行内块、块级)设置为绝对定位之后，都变成了定位元素。

- - 定位元素：默认宽、高都被内容所撑开，且能自由设置宽高。

3.固定定位

3.1 设置固定定位position : fixed

- 可以使用left .right . top . bottom四个属性调整位置。
- 参考视口的位置

3.2 固定定位元素的特点

- 脱离文档流，会对后面的兄弟元素、父元素有影响。
- left(生效)不能和right一起设置,top(生效)和bottom不能一起设置。
- 固定定位和浮动不能同时设置，如果同时设置,浮动失效，以固定定位为主。
- 固定定位的元素，也能通过margin调整位置，但不推荐这样做。
- 无论是什么元素(行内、行内块、块级)设置为固定定位之后，都变成了定位元素。

4.粘性定位

4.1 设置粘性定位position : sticky

- 可以使用left .right . top . bottom四个属性调整位置。
- 参考位置：离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先

4.2 粘性定位元素的特点

- 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
- 最常用的值是top值。
- 粘性定位和浮动可以同时设置，但不推荐这样做。
- 粘性定位的元素，也能通过margin调整位置，但不推荐这样做。
- 粘性定位和相对定位的特点基本一致，不同的是:粘性定位可以在元素到达某个位置时将其固定。

5.定位层级

定位元素的显示层级比普通元素高，无论什么定位，显示层级都是-样的。
如果位置发生重叠，默认情况是:后面的元素，会显示在前面元素之上。
可以通过css属性z-index调整元素的显示层级。
z-index的属性值是数字,没有单位,值越大显示层级越高。
只有定位的元素设置z-index 才有效。
如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级。

6.特殊应用

发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。

应用一：让定位元素的宽充满包含块

- 块宽想与包含块一致，可以给定位元素同时设置left 和right 为 0。
- 高度想与包含块一致，top 和bottom设置为0。

应用二：让定位元素在包含块中居中(该定位元素必须设置宽高)

/* 方法一 */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

/* 方法二 */
left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

四.布局

1.版心

在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
版心的宽度一般是960~1280像素之间。
版心可以是一个，也可以是多个。

2.常用布局名词

顶部导航条	topbar
页头	header ，page-header
导航	nav 、 navigator .navbar
搜索框	search . search-box
横幅、广告、宣传图	banner
主要内容	content . main
侧边栏	aside . sidebar
页脚	footer . page-footer

3.重置默认样式

方案一：使用全局选择器

* {
  padding: 0;
  margin: 0;
}

方案二：reset.css（定制化）
方案三：Normalize.css(标准化) Normalize.css: Make browsers render all elements more consistently.

- Normalize.css是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式。
- 相对于reset.css , Normalize.css有如下优点:

- - 保护了有价值的默认样式，而不是完全去掉它们。
  - 为大部分HTML元素提供一般化的样式。
  - 新增对HTML5元素的设置。
  - 对并集选择器的使用比较谨慎，有效避免调试工具杂乱。

- 备注: Normalize.css的重置，和reset.css相比，更加的温和，开发时可根据实际情况进行选择。

4..布局的小技巧

行内元素、行内块元素，可以被父元素当做文本处理。

- 即:可以像处理文本对齐一样，去处理:行内、行内块在父元素中的对齐。例如: text-align . line-height . text-indent等。

如何让子元素，在父亲中水平居中:

- 若子元素为块元素，给父元素加上: margin: 0 auto;
- 若子元素为行内元素、行内块元素，给父元素加上:text-align: center;

如何让子元素，在父亲中垂直居中:

- 若子元素为块元素，给子元素加上: margin-top，值为:(父元素content - 子元素盒子总高)/2。

- - overflow: hidden; 解决塌陷问题

- 若子元素为行内元素、行内块元素:

- - 让父元素的height = line-height，每个子元素都加上: vertical-align:middle;。
  - 补充:若想绝对垂直居中，父元素font-size设置为0。

元素中间的空白问题

- 描述：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
- 解决：给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小(推荐)。

行内块的幽灵空白问题

- 描述：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
- 解决方案:

- - 方案一:给行内块设置vertical，值不为 baseline即可，设置为middle、bottom、top均可。
  - 方案二:若父元素中只有一张图片，设置图片为display: block 。
  - 方案三:给父元素设置font-size: 0。如果该行内块内部还有文本，则需单独设置font-size。