CSS盒子模型

最新推荐文章于 2024-11-01 16:54:21 发布

执迷原理

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量74

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/ddd2501/article/details/127607973

版权

1.如何掌握盒子模型（学习块元素、行内元素之后）

理解单独一个盒子的内部结构；
理解多个盒子之间的相互关系；

2.盒子模型的组成

content: 内容区
- 内容区呈现了盒子的主要信息内容：可以是文本、图片等多种类型
- 内容区有三个属性：width、height和overflow（指定溢出处理的方式）
padding: 内边距
- 内容区和边框之间的空间，可以看成是内容区的背景区域
- 当设置padding值时，整个盒子被撑大
- padding再元素内部
margin: 外边距
- 指两个盒子之间的距离，可能是父子元素之间的距离，也可能是兄弟元素之间的距离
- 注意：CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此产生盒子的重叠效果（传说中的“负margin技术”）
- margin在元素外部
- 外边距叠加三种情况（重点理解）（叠加规则：以较大的外边距为合并外边距）
  - 同级元素：
    - 当一个元素出现在另一个元素上面的时候，第一个元素的下外边距和第二个元素的上外边距发生合并
  - 父子元素
    - 当一个元素包含在另外一个元素里面，且没有padding和border将它们隔开，父元素和子元素的相邻上下外边距也会发生合并
  - 空元素
    - 指的是没有子元素或者没有文字内容的元素，例如，<br/>、<hr/>等，当一个空元素有上下外边距时，如果没有border或者padding，则元素的上外边距和下外边距就会合并
  - 注意：（重点理解记忆）
    - 外边距叠加只针对margin-top/margin-bottom,不针对左右
    - 外边距叠加只针对block以及inline-block元素，不包括inline元素，因为inline元素的margin-top和margin-bottom设置是无效的
border: 边框
- boder: 0 与 border: none的区别
  - 性能上的差异(差异虽然不大，面试可能会遇到)
    - border: 0px虽然视觉上看不见，但是浏览器依旧会渲染border，会占用内存
    - border: none也是视觉上看不见，但它不占用内存
  - 兼容性上的差异
    - border: none对于IE6和IE7的按钮边框无效，在其他浏览器就会去掉按钮边框
    - border: 0 适用于所有浏览器，不是去掉，而是隐藏了
width: 宽度（区别盒子）
- 针对标准盒子，指定的是content内容区的宽
- 针对IE盒子，指定的是content/padding/border的和
height: 高度（区别盒子）
- 针对标准盒子，指定的是content内容区的高
- 针对IE盒子，指定的是content/padding的和

3.外边距叠加的意义

CSS定义外边距叠加的初衷就是为了更好地对文章进行排版
建议：统一使用margin-top和margin-bottom，不要混合使用，从而降低风险（不是必要的，是一个良好的习惯）
外边距叠加原理很复杂，跟BFC（块级格式上下文）有着紧密关系

4.负margin技术(重点理解)

在CSS中，margin属性取值可以是正数，也可以是负数，无论取正数还是负数，margin都可以让当前元素或者周围元素进行移动
常用技巧有以下4个：
- 图片与文本对齐
  - 原因：当图片和文本一起的时候，是以“基线对齐”的，所以会出现对不齐的问题
- 自适应两列布局（重点掌握）（利用浮动和负margin一起实现自适应）
  - 指的是在两列布局中，其中一列的宽度是固定的，而另外一列宽度自适应（区别浮动，浮动只能实现固定的左右两列布局，并不能实现其中一列为自适应的布局），结合浮动和负margin来实现
  - 注意细节：负margin的像素值是固定盒子的宽度的相反
- 元素垂直居中（万能方法：适用于任何元素）
- ```
//父元素
{
    position:relative; //目的：方便子元素给 position:absolute; 来很好的完成定位
                       // 当这样设置时，子元素就会相对于父元素来定位，而不是相对于浏览器来定位
                       // 当然这里需要理解 position 定位知识（后续会提到）
}
//子元素
{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:"height值的一半的负值";
    margin-bottom:"width值得一半的负值"
}
```