CSS学习记录9

杂项：

常用长度单位

• px ：像素。
• em ：相对单位，相对于元素 font-size 的倍数。
• rem ：相对单位，相对与根字体大小，html标签就是根。
• % ：相对父元素计算。

元素的显示模式（再次总结）

分类：

1.块元素（block）

• 独占一行
• 默认高度由内容多少决定
• 可通过CSS设置宽高

2.行内元素（inlin）

• 不独占一行
• 默认宽高由内容多少决定
• 不可通过CSS设置宽高

3.行内块元素（inline-block）

• 不独占一行
• 默认宽高由内容多少决定
• 可通过CSS设置宽高

 修改元素显示模式：

属性名：display

属性值：

• none：隐藏
• block：块级元素
• inline：行内元素
• inline-block：行内块元素

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
            display: inline;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: aqua;
            display: block;
        }
    </style>

盒模型：

盒模型的组成

CSS会把HTML文件看成一个盒子的模型，所有样式都基于这个盒子

1. margin：外边距    盒子与外界的距离
2. border：边框        盒子边框
3. padding：内边距  补白
4. content：内容       元素中的文本或元素

    <style>
        div{
            /*content 内容*/
            width: 100px;
            height: 100px;
            /*padding 内边距*/
            padding: 20px;
            /*border 边框*/
            border: 20px blue solid;
            /*margin 外边距*/
            margin: 10px;
            font-style: 20px;
            background-color: aqua;
        }
    </style>

 盒子大小与 content   padding  border  有关 。

外边距 margin 不会影响盒子的大小，但会影响盒子的位置。

盒子内容区

• max-width：最大宽度
• min-width：最小宽度
• max-height：最大高度
• min-height：最小高度

    <style>
        div{
            max-width: 900px;
            min-width: 300px;
            max-height: 900px;
            min-height: 300px;
            background-color: aqua;
        }
    </style>

 盒子内边距

padding为复合属性

使用规则：

1. 一个值：padding：10px（上下左右）；
2. 两个值：padding：10px（上下） 20px（左右）；
3. 三个值：padding：10px（上） 20px（左右） 30px（下）；
4. 四个值：padding：10px（上） 20px（右） 30px（下） 40px（左）；

其他：

• padding-top：上
•  padding-right ：右
• padding-bottom：下
• padding-left： 左

属性值都是长度。 

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

    <style>
        .test01 {
            background-color: aqua;
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 30px;
            padding-bottom: 40px;
        }
        .test02 {
            background-color: aqua;
            padding: 10px;
        }
        .test03 {
            background-color: aqua;
            padding: 10px 20px;
        }
        .test04 {
            background-color: aqua;
            padding: 10px 20px 30px;
        }
        .test05 {
            background-color: aqua;
            padding: 10px 20px 30px 40px;
        }
    </style>

盒子边框

边框属性跳转学习记录8：学习记录8

 盒子外边距

宽度设置可以参考盒子内边距

margin 注意事项

1. 子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着 子元素）

2. 上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素 的位置。

3. 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。

4. margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级 元素会在父元素中水平居中。

5. margin 的值可以是负值。

margin 塌陷问题

塌陷问题：第一个子元素的上 margin 和最后一个子元素的下 margin 会作用在父元素上（被父元素抢走）。

解决方案：

• 方案一： 给父元素设置不为 0 的 padding 。
• 方案二： 给父元素设置宽度不为 0 的 border 。
• 方案三：给父元素设置 css 样式 overflow:hidden

 margin 合并问题

合并问题：上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并叠加。

没必要解决，设置上下的兄弟元素，只设置一个上下外边距就可以。