CSS 表格+流式布局+怪异盒模型篇

最新推荐文章于 2023-10-31 13:35:59 发布

believealone

最新推荐文章于 2023-10-31 13:35:59 发布

阅读量371

点赞数

分类专栏： HTML+ CSS 学习笔记

本文链接：https://blog.csdn.net/believealone/article/details/106982492

版权

19 篇文章 1 订阅

订阅专栏

表格

注：

流式布局：百分比布局

我们一般会把元素的 width， height， margin， padding值由之前的px数值改写成百分比

1. width相对的是父级的width为参考

2. height相对的是父级的height为参考

3. 任何一个方向的padding相对的是父级的width为参考（与父级的height没有关系）

4. 任何一个方向的margin相对的是父级的width为参考（与父级的height没有关系）
百分比布局需要注意的问题
1. 不管是块元素还是行元素，只要不设置高度，它们的高度都是由内容撑出，如果此时元素的子元素的高度设置了百分比，而该元素的高度没有确定值，此时形成了高度的相互依赖，导致父子元素都无法确认高度
2. 如果html标签设置百分比，那么其相对的父元素是没有的，那么就参考整个浏览器窗口
3. 因为使用了百分比布局之后，元素的宽高都会随着浏览器窗口的变化而变化。
有些时候大小可能会失控（尺寸过小）

我们可以为元素添加最小宽度或者高度；最大的宽度或者高度

box-sizing: 盒模型类型改成怪异盒模型

1. content-box 普通盒模型

2. border-box 怪异盒模型
以上两种盒模型的组成部分相同（content， padding， border， margin）写法相同，区别仅仅是：

1.盒子大小的计算规则不同
1. 主流浏览器的盒模型默认普通盒模型， ie浏览器的盒模型默认是怪异盒模型
计算规则：

普通盒模型：对应方向上的所有有效值累加

怪异盒模型：

盒子的宽 = width（content的宽 + 左右padding + 左右的border） + 左右的margin

盒子的高 = height（content的高 + 上下padding + 上下的border） + 上下的margin

怪异盒模型下的padding和border回去侵蚀原有的content区域，导致content区域变小

注：有些时候元素的总大小确定之后不宜改变（增大），而在不增大元素大小的情况下，我们还想添加一些padding或者border，可以考虑怪异盒模型。