• 04-内边距、外边距、盒子模型


    # CSS间距

    ### 内补白(内补丁)
    ```
    padding: 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
    padding-top: 检索或设置对象顶边的内部边距
    padding-right: 检索或设置对象右边的内部边距
    padding-bottom:检索或设置对象下边的内部边距
    padding-left: 检索或设置对象左边的内部边距
    ```

    ### 外补白(外补丁)
    ```
    margin: 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
    margin-top: 检索或设置对象顶边的外延边距
    margin-right: 检索或设置对象右边的外延边距
    margin-bottom: 检索或设置对象下边的外延边距
    margin-left: 检索或设置对象左边的外延边距
    ```
    **margin相关技巧**
    ```angularjs
    1、设置元素水平居中: margin:x auto;
    2、margin负值让元素位移及边框合并
    ```


    # 盒子模型

    元素在页面中显示成一个方块,
    类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,
    帮助我们设置元素对应的样式。

    > 把元素叫做盒子,设置对应的样式分别为:
    > 盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

    ```angularjs
    盒子真实尺寸
    盒子宽度 = width + padding左右 + border左右
    盒子高度 = height + padding上下 + border上下
    ```

    在布局中,如果我想增大内容和边框的距离,又不想改变盒子显示的尺寸

    ```angularjs
    box-sizing:content-box | border-box
    ```

    # 块元素,内联元素,内联块元素

    > 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,
    >了解这三种元素的特性,才能熟练的进行页面布局。

    ### 块元素
    块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,
    它在布局中的行为:

    - 支持全部的样式
    - 如果没有设置宽度,默认的宽度为父级宽度100%
    - 盒子占据一行、即使设置了宽度

    ### 内联元素

    内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为:

    - 支持部分样式(不支持宽、高、margin上下)
    - 宽高由内容决定
    - 盒子并在一行
    - 代码换行,盒子之间会产生间距
    - 子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置垂直对齐方式

    ### 内联块元素

    内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,它们在布局中表现的行为:

    - 支持全部样式
    - 如果没有设置宽高,宽高由内容决定
    - 盒子并在一行
    - 代码换行,盒子会产生间距
    - 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置子元素垂直对齐方式

    # 块元素,内联元素,内联块元素之间的转换

    display属性是用来设置元素的类型及隐藏的,常用的属性有:

    1、none 元素隐藏且不占位置

    2、block 元素以块元素显示

    3、inline 元素以内联元素显示

    4、inline-block 元素以内联块元素显示


  • 相关阅读:
    Spring基础——小的知识点
    Spring总结—— IOC 和 Bean 的总结
    UML 类图
    Spring基础—— 泛型依赖注入
    Spring重点—— IOC 容器中 Bean 的生命周期
    Spring基础—— SpEL
    《大话设计模式》学习笔记13:适配器模式
    《大话设计模式》学习笔记12:状态模式
    《大话设计模式》学习笔记11:抽象工厂模式
    《大话设计模式》学习笔记10:观察者模式
  • 原文地址:https://www.cnblogs.com/zifeng001/p/10828328.html
Copyright © 2020-2023  润新知