CSS框架型

来源：互联网发布：电脑编程和手机编程编辑：程序博客网时间：2024/05/18 01:33

一、CSS 框模型
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。

    内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
    * {
        margin: 0;
        padding: 0;
    }

    在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
    提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
    提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

二、CSS 内边距
    1、CSS padding 属性
        CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
        cm em px ex %

    2、单边内边距属性
        也通过使用下面四个单独的属性，分别设置上、右、下、左内边距。
        padding-top
        padding-right
        padding-bottom
        padding-left

3、内边距的百分比数值
注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

三、CSS 边框
每个边框有 3 个方面：宽度、样式，以及颜色。

1、边框与背景
CSS 规范指出，边框绘制在“元素的背景之上”。

    2、边框的样式
        A、定义多种样式
            top-right-bottom-left

        B、定义单边样式
            border-top-style
            border-right-style
            border-bottom-style
            border-left-style

3、边框的宽度
A、为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值）和 thick

        B、定义单边宽度
            您可以按照 top-right-bottom-left 的顺序设置元素的各边边框。
            当宽度值小于4的时候，复制值就起作用。
            您也可以通过下列属性分别设置边框各边的宽度。
            border-top-width
            border-right-width
            border-bottom-width
            border-left-width

C、没有边框
border-style: none;

4、边框的颜色
A、可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值。

        B、定义单边颜色
            您可以按照 top-right-bottom-left 的顺序设置元素的各边边框。
            当宽度值小于4的时候，复制值就起作用。
            还有一些单边边框颜色属性。
            border-top-color
            border-right-color
            border-bottom-color
            border-left-color

C、透明边框
border-color: transparent;

四、CSS外边距
元素边框外面的空白区域就是外边距。
margin属性，接受任何长度单位、百分数值甚至负值。

1、CSS margin属性
margin: top right bottom left

    2、CSS值复制
        如果缺少左外边距的值，就使用右外边距的值；
        如果缺少下外边距的值，就使用上外边距的值；
        如果缺少右外边距的值，就使用上右边距的值。

    3、单边外边距属性
        margin-top
        margin-right
        margin-bottom
        margin-left

五、CSS外边距合并
外边距合并，指当两个垂直外边距相遇时，合并成一个外边距。
合并后的外边距的高度等于两个垂直外边距较大的值。

    1、外边距合并
        上下垂直外边距合并后的值等于较大外边距的值；
        内外垂直外边距合并后的值等于较大外边距的值(没有内边距和边框的条件下)；
        上下外边距合并后的值等于较大外边距的值(元素没有内容、没有内边距和边框)。
        以上情况可以合并后继续合并。