CSS3选择器、border、background、flex

发表于 更新于 分类于 ， 阅读次数： Changyan： 本文字数： 3.2k 阅读时长 ≈ 3 分钟
CSS3 的各种选择器：关系选择器、属性选择器、伪类选择器

选择器：

关系选择器：

  • + ：下一个满足条件的兄弟元素节点。
    div + P{} //选出div的兄弟节点并且是p标签

  • ~ ： 后面的满足条件的所有兄弟节点
    div ~ p{} //选出div兄弟节点中所有的p节点

属性选择器：

  • [attribute~=”value”] 选择器选取属性值包含指定词的元素。
  • [attribute|=”value”] 选择器用于选取指定属性以指定值开头的元素,该值必须是一个完整的单词。
  • [attribute^=”value”] 选择器用于选取指定属性以指定值开头的元素。
  • [attribute$=”value”] 选择器用于选取指定属性以指定值结尾的元素。
  • [attribute*=”value”] 选择器选取属性值包含指定词的元素。
  • ::placeholer 选择带placeholeder元素
  • ::selection 设置页面字体选中后的状态

伪类选择器：

当前元素的状态（全部是当前元素的限制条件,想操作谁就选谁）

  • :not 不是什么什么
  • :root 根目录选择器（HTML下是html标签）
  • :target 选择被锚点标记之后的元素

要考虑其他元素（要关注其他元素）：

  • :first-child 第一个子元素
  • :last-child 最后一个子元素
  • :only-child 仅有一个子元素
  • :nth-child(n) 第n 个子元素 （可写计算公式 ，n从0开始查数）CSS从1开始查数
  • :nth-last-child(n) 第n 个子元素,倒着数 （可写计算公式）

不用考虑其他元素(不关注其他类型元素)：

  • :first-of-type 当前类型的第一个
  • :last-of-type 当前类型的最后一个
  • :only-of-type 当前类型的仅有一个
  • :nth-of-type 当前类型的第n个
  • :nth-of-last-type 当前类型的第n个，倒着查
  • :empty 元素内容为空
  • :checked 元素被选中状态
  • :disabled 被禁用的
  • :ready-only 只能读,不能写的
    :ready-write 可读可写的

当给html和body设置高度为100%后，再给里面的元素高度设置100%可充满整个页面。

border：

border-radious :

(左上，右上，右下，左下)
（上，上，下，下 / 左，右，右，左）不常用

可写为border-top-left-radious:左上角
用正方形画四分之一圆：一个角的值等于正方形的边长

box-shadow：

普通写法：
（inset（内阴影默认为外阴影（不写）），水平偏移量（正是向右，负是向左），垂直偏移量（正值向下，负值向上），阴影模糊程度（基于原边框向两侧同时模糊），传播距离（可选）（在四个方向上同时增大阴影的大小），颜色）。

可设置多个box-shadow值，先写的在上面，重复的会加重颜色。

阴影在背景颜色是上面，在文字的下面

border-image：

border-image-source:url() 引入图片

  • border-image-slice：(1-5个参数，前四个参数只能为数值，不能带px表示图片的分割方式，最后一个参数填上fill会把内容区也填充)
  • border-image-ouset 向外延伸多少
    border-image-width 图片显示的宽度（为1表示完全填充，默认为1）
  • border-image-repeat 默认为stretch将被分割的图像使用拉伸的方式来填充满边框图像区域。
  • repeat：将被分割的图像使用重复平铺的方式来填充满边框图像区域。当图像碰到边界时，如果超过则被截断。
  • round：与 repeat 关键字类似。不同在于，当背景图像不能以整数次平铺时，会根据情况缩放图像。
  • space： 与 repeat 关键字类似。不同在于，当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。

background：

渐变两种生成方法：

  • linear-gradient()线性渐变，
  • radial-gradient()径向渐变，当成一个图片来看待

常用属性

  • background-image ： 可以添加多个背景图片，多url
  • background-origin:图片的起始位置（结束位置无法确定），
    • border-box；从边框开始，
    • padding-box：从padding开始(默认值)
    • content-box:从content开始
  • background-clip:图片的截断部分，从哪开始以外部分都不显示，
    • border-box：（默认值），
    • padding-box：,content-box:，text（除了文字展示范围内展示图片（只在文字下面展示），以外区域不展示图片，只在webkit下可以用，需配合谷歌特有属性
  • -webkit-text-fill-color:transparent使用，用完之后文字会变成背景的一部分，这时候在设置阴影，阴影会显示在文字的前面，可以适当设置阴影的透明度来缓冲效果）
  • background-attchent:
    • fixed：背景图像相对于视口（viewport）固定，当范围超出原来容器就不会再显示了。；
    • scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身，但会随元素的祖先元素或窗体一起滚动。（默认值）；
    • local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容
  • background-repeat: 可以填两个值代表水平和垂直方向，
    • repeat-x：背景图像在横向上平铺;
    • repeat-y：背景图像在纵向上平铺;
    • repeat：背景图像在横向和纵向平铺;
    • no-repeat：背景图像不平铺(默认值);
    • round：当背景图像不能以整数次平铺时，会根据情况缩放图像。;
    • space：当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。
  • background-size:
  • background-position:定位开始位置参考图片的起始位置（background-origin）

渐变：

linear-gradient(方向(可选，默认为自下到上 to bottom,to top right ：到右上)，起始颜色，结束颜色)

参考

border-color的默认值等于color

Text：

  • text-shadow：（水平偏移，垂直偏移，模糊值，颜色 ）
  • -webkit-text-stroke:描边（宽度，颜色）

调用外部的字体包：

1
2
3
4
@font-face{
font-family:  字体的名称;
src:url() /*地址*/
}

user-select: none; /*禁止文字被复制*/

box:

IE6混杂模式的盒模型
box-width = width;
触发方式：box-sizing = border-box;

overflow:

  • hidden(溢出部分隐藏);
  • scroll(溢出之后出现滚动条) ;
  • auto(溢出之后出现滚动条，更标准)，
    可单独设置x,y轴（overflow）

resize: 必须配合overflow来使用，不然没效果

  • none：不允许用户调整元素大小。
  • both：用户可以调节元素的宽度和高度。
  • horizontal：用户可以调节元素的宽度。
  • vertical：用户可以调节元素的高度。

弹性盒模型：flex

弹性盒

flex-shrink:计算要计算加权，而且压缩的部分是盒子的内容区。

压缩大小 = 自己真实内容区 * flex-shrink / 所有元素（真实内容区 * flex-shrink）的总和 * 要压缩的总范围。

只设置 flex-basis 或flex-basis > width代表元素的最小宽度，会随内容区增大；
设置width后，并且width > flex-basis，width表示元素的最大宽度，则flex-basis < realwidth < width。