盒模型

发表于 2024-06-12 更新于 2024-06-17 分类于学习笔记

认识盒模型

行内元素
块级元素
所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”

width和height属性详解

width
- 盒子内容的宽度
- width属性通常是px，移动端开发会涉及百分数，rem等单位
- 当块级元素（div、h系列、li等）没有设置width属性是，它将自动撑满，但这并不意味着width可以继承
height
- 表示内容的高度
- width属性通常是px，移动端开发会涉及百分数，rem等单位
- 盒子的height属性如果不设置，它将被内容被自动撑开，如果没有内容，则height默认是0
- 高度省略掉，内容能被自动撑开

padding属性详解

padding 是盒子的内边距，即盒子边框内壁到文字的距离
padding 是四个方向的
- padding-top
- padding-left
- padding-right
- padding-bottom
padding 四数值写法
- padding:10px 20px 10px 20px 上右下左
padding 三数值写法
- padding:10px 20px 30px 上左右下
padding 二数值写法
- padding:10px 20px 上下，左右
padding 一数值写法
- padding:10px 四个方向都是10px

margin属性详解

margin是盒子的外边距，盒子和其它盒子之间的距离
margin 是四个方向的
- margin-top
- margin-left
- margin-right
- margin-bottom
margin 四个方向
- margin:10px 20px 10px 20px 上右下左
margin 三数值写法
- margin:10px 20px 30px 上左右下
margin 二数值写法
- margin:10px 20px 上下，左右
margin 一数值写法
- margin:10px 四个方向都是10px

margin 的塌陷

垂直方向的margin有塌陷现象：小的margin 会塌陷到大的margin 中，从而margin不叠加，只以大的值为准

 .box5{
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin-bottom: 24px;
    }   
 .box6{
        width: 200px;
        height: 200px;
        background-color: rgb(28, 206, 108);
        margin-top: 32px;
    }
以margin-top 32px 为准

左右方向不会发生塌陷现象

一些元素有默认的margin

比如（body、ul、p) 等，在开始制作网页的时候，要将它们清除

 *{
        margin: 0;
        padding: 0;
    }

    body,
    ul,
    p {
        margin: 0;
        padding: 0;
    }
* 通配符有效率问题

盒子的水平居中
- 将盒子左右两边的margin都设置为auto，盒水平居中
- margin:0 auto
- 文本居中 text-align:center 和盒子水平居中是两个概念

盒模型计算

盒子的总宽度 = width + 左右border + 左右padding
盒子的总高度 = height + 上下border + 上下padding

box-sizing属性

将盒子添加 box-sizing:border-box 之后，padding、border 变为内缩，不再外扩

display

行内元素
- 能并排显示
- 不能设置宽高
- width自动收缩
- a、span、em、b、u、i 等
块级元素
- 不能并排显示
- 能设置宽高
- width自动撑满
- div、section、header、h系列、li、ul等
行内块元素
- img、input等
- 既能并排显示、又能设置宽高
行内元素和块级元素的互相转换
- display:block
  - 转换为块级元素
- display:inline
  - 转为行内元素
- disaplay:inline-block
  - 即将元素转为行内块
- display:none
  - 可以将元素隐藏，元素将彻底放弃位置，如同没有写标签一样
- visibility:hidden
  - 也可以将元素隐藏，但是元素不放弃自己的位置

0%