阅读 37

CSS一些常用的属性

box-sizing属性

  • content-box:默认值,指定的宽高不包括了边框 和 内边距。宽度和高度分别应用到元素的内容框。这种行为模式下,盒⼦子的宽和⾼只决定元素的content内容部分,⽽内边距padding和边框border是在content外部另外绘制 也就是说width = content
  • border-box:指定的宽高包括了边框 和 内边距。已设定的宽度和高度 = 内容的宽度和高度 + 边框 + 内边距。这种⾏为模式下,为盒⼦设定的宽和⾼决定了元素的边框border⼤小,那么盒⼦的内边距padding和边框border都将在已设定好的宽⾼内绘制 也就是说width = content + padding + border
  • inherit:从父元素继承 box-sizing 属性的值

display属性

display 属性规定元素应该生成的框的类型。

  • none: 隐藏元素,同时不占据空间
  • flow-root: 创建一个BFC(Block Formatting Context,块级格式化上下文)
  • table:此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
  • flex: 弹性布局。设置弹性布局后,不要设置width, 要不然display就会失效
  • inline:默认。此元素会被显示为内联元素,元素前后没有换行符。
  • inline-block:可以使多个div在同一行显示。
  • block:此元素将显示为块级元素,此元素前后会带有换行符。
  • contents:一个新的属性值。会导致其自身的盒子不生成但所有的子元素都会照常生成。如果希望一个弹性布局或网格布局中的非直接子元素能应用这些布局,这就会非常有用。
  • overflow属性

    overflow 属性规定当内容溢出元素框时发生的表现。

    • visible,默认值,内容不会被修剪,超出部分内容可见。
    • hidden: 如果元素超出所设置的宽和高,剩下的部分就会被隐藏。
    .item {
      background-color: blue;
      width:150px;
      height: 50px;
      overflow: hidden;
    }
    复制代码

    • scroll: 内容会滚动,有可能即使元素框中可以放下所有内容也会出现滚动条。

    • auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    • inherit: 从父元素继承 overflow 属性的值

    flex属性

    flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 用于设置或检索弹性盒模型对象的子元素如何分配空间。

    flex: 1 1 200px; /*flex-grow,flex-shrink,flex-basis*/
    复制代码

    margin属性

    margin属性可以在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

    margin: 10px;
    margin: 10px 5px; /* 上下10 左右5 */
    margin: 10px 5px 15px; /* 上10 左右5  下15 */
    margin: 30px 20px 10px 5px; /* 顺时针: 上 右 下 左*/
    复制代码

    border属性

    border属性可以在一个声明中设置一个元素的border-width、border-style (required)和 border-color

    border: 5px solid rgb(111,41,97);
    复制代码

    font属性

    font属性可以在一个声明中设置所有字体属性

    font:italic bold 12px/20px arial,sans-serif;
    复制代码

    可以按顺序设置如下属性:

    font-style  规定字体样式
    font-variant 规定字体异体
    font-weight 规定字体粗细
    font-size/line-height 规定字体尺寸和行高
    font-family 规定字体系列
    复制代码

    尺寸

    • px: 像素 (计算机屏幕上的一个点),相对长度单位,是相对于显示屏屏幕分辨率而言的。IE浏览器无法自适应使用px作为单位的字体大小,使用em或者rem作为字体单位的话,可以自适应。

    • em: 相对长度单位,相对于当前对象内文本的字体尺寸。1em 等于当前的字体尺寸。例如,如果某元素以 12pt 显示,那么 2em 是24pt。所以em的值不是固定的,另外em会继承父级元素的字体大小。
      在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。

    • rem是根em(root em)的缩写。rem是和根元素关联的,不依赖当前元素。不管在文档中的什么地方使用这个单位,1.2rem的计算值是相等的,等于1.2倍的根元素的字号大小。 根节点是文档里所有其他元素的祖先。它有一个特别的伪类选择器(:root),在样式表里可以用这个选择器表示。声明根元素的字号大小

    :root {
      font-size: 1em;
    }
    复制代码

    伪类 :root 等价于 html 选择器