回忆系列之css sixday

用户1774600246736
204 阅读5分钟

盒子模型

文档中的每个元素都会生成一个矩形框，我们成为元素框。这个框体用来描述元素在文档布局中所占的空间。

默认的情况下，各个元素的排布在视觉上不会出现重叠。但是如果元素框是手动定位的那家如有可能出现重叠。

  • 内容区：用来存放具体的内容。
  • 宽度：用来定义内容区的宽度。
  • 高度：用来定义内容区的高度。
  • 内边距：用来定义内容区和边框的距离。
  • 边框：边框是内容区或内边距周围的一条或多条线。
  • 外边距：定义元素和元素之间的距离。

宽度

元素的宽度指的是内容区左边界到右边界的距离。

格式： width:value

值：

  • auto，默认值。无特定的宽度指。
    • 对于块状元素来说，auto是父元素的宽度。
    • 对于行内元素和行内块状元素来说，auto是内容的宽度。
  • px，像素
  • em，按照当前的字体大小来进行计算。
  • %，相对于包含的块元素的宽度来计算的。

高度

元素的高度指的是内容区的上边界到下边界的距离。

格式：height:value

  • auto，默认值。没有特定的高度。
    • 块状元素，看行高。
    • 行内元素，即使设置了行高也不会影响高度但是会影响垂直的距离。
  • px，像素值
  • em，按照当前的字体大小来进行计算。
  • %，相对于包含的块元素的高度来进行计算。

宽度、高度的最大值和最小值

  • 元素的内容区域可以使用min-width和min-height来定义最小值。（不能小于它）
  • 元素的内容区域可以使用max-width和max-height来定义最大值。（不能超过它）

宽度和高度可以用在块状元素和行内块状元素。

内边距

适用于所有的元素（块状、行内），元素默认没有内边距（0px）。

内边距使用padding属性：

  • px，像素
  • em，当前字体大小。
  • %，使用百分比来设置内边距，水平、垂直都是相对于父级元素的宽度来计算的。

简写格式：

  • padding:top/right/bottom/left

  • padding:top/bottom left/right

  • padding:top left/right bottom

  • padding: top right bttom left

    注意：顺序是顺时针。

单内边距：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

行内元素&行内块状元素的内边距

行内元素上设置的左右边距可以正常使用。但是上下内边距对行高没有影响。

行内块状元素可以正常的设置内边距。

边框

  • 边框有三个要素：宽度（border-width）、样式（border-style）、颜色（border-color）

20210223175417248_26947.png

  • 宽度，默认为medium。具体宽度由浏览器自己决定。一般是2px或3px，我们使用border-width来进行设置。
  • 样式，默认为none，所以即使有边框宽度但是没有样式仍然看不到边框。使用border-style来设置。
  • 颜色，默认的边框颜色，是元素自身的文本的颜色。使用border-color来进行设置。

边框样式

  • 边框样式的取值：
    • none，没有样式，如果说为none时即使有宽度也不会显示出来边框。
    • solid，实线。
  • 简写格式：
    • border-style:top/right/bottom/left
    • border-style:top/bottom left/right
    • border-style:top right/left bottom
    • border-style:top right bottom left
  • 单边设置样式
    • border-top-style
    • border-left-style
    • border-right-style
    • border-bottom-style

边框宽度

  • 边框宽度取值为:

    px，像素

    em，相对于元素字体大小来设置。

  • 简写格式：

    • border-width:top/right/bottom/left
    • border-width:top/bottom left/right
    • border-width:top right/left bottom
    • border-width:top right bottom left

  • 单边设置样式

    • border-top-width
    • border-left-width
    • border-right-width
    • border-bottom-width

边框颜色

简写格式：

  • border-color:top/right/bottom/left
  • border-color:top/bottom left/right
  • border-color:top right/left bottom
  • border-color:top right bottom left

单边设置样式

  • border-top-color

  • border-left-color

  • border-right-color

  • border-bottom-color

    边框的颜色可以为透明：transparent

简写属性

  • border-top:width style color
  • border-bottom:width style color
  • border-left:width style color
  • border-right:width style color

设置整个边框

border:width style color

我现在要一个三角形。

    div {
        width: 0px;
        height: 0px;
        border: 100px solid red;
        border-top-color: yellow;
        border-right-color: blue;
        border-bottom-color: pink;
        /* 宽高设置为0，当要实现三角形时，将另外三个边框颜色设置为透明transparent */
    }

内联元素的边框

行内元素左右边框可以正常使用，但是上下边框对行高没有影响。

外边距

CSS中设置任何元素的外边距都可以使用margin属性。外边距是添加在边框的外侧。

外边距是0。但是浏览器会给很多元素提供预设的样式其中就包括外边距。比如p标签、body标签。ul

  • 外边距取值
    • px，像素
    • em，相对于字体的大小。
    • %，像对于父元素的宽度来进行设置。
  • 简写格式：
    • margin:top/right/bottom/left
    • margin:top/bottom left/right
    • margin:top left/right bottom
    • margin:top right bottom left
  • 单独的设置外边距
    • margin-top:上外边距
    • margin-right：右外边距
    • margin-bottom：下外边距
    • margin-left：左外边距。

__注意： __

  1. 元素的外边距可以设置为负值，但是设置为负值之后有可能让元素从父元素中冒出来。
  2. html、body都是块状元素，并且body一般有8px的外边距。
avatar
文章
阅读
粉丝