前端(三)之选择器高级与盒模型


前端之 CSS 选择器高级与盒模型

前言

先回顾昨日的内容,昨天讲了 w3c 的整个架构,由结构层>布局层>内容层三部分组成,了解了 CSS 的三种引入方式,行间式最简单直接;内联式解耦合,可读性强;外联式适合团队高效开发,耦合性低,复用性强,了解了三种选择器,并且 id 选择器>类选择器>标签选择器>通配选择器,还有通过多类名选择器来操作标签。还有常用的长度单位包括 px、cm、mm、em、vw、in,颜色属性有 rgb、rgba 等,还有操作文本样式的属性调整字体大小,字体风格,文本对齐,缩进,字间距,词间距等,其中 font 是综合性描述:font: 风格 大小/行高 字族(风格可以省略),比如font: 100 normal 60px/200px 'STSong';最后讲的就是 display,这是一个重点难点,display 目前只介绍了三个属性值:inline:不支持宽高,宽高由文本内容撑开,只能嵌套 inline 标签同行显示;block:像 p 标签,h 标签的 display 属性就是 block,支持所有的 css 样式,默认有宽高(自定义后取自定义值),能嵌套所有标签,异行显示;inline-block:支持所有css 样式,默认没有宽高(由内容撑开(可以自定义宽高))不建议嵌套任意标签,同行显示。

选择器高级

组合选择器

群组选择器

群组选择器可以同时控制多个选择器,语法:逗号分隔,控制多个

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>群组选择器</title>
    <style type='text/css'>
        .d1,div,#a {
            color: green;
            }
    </style>
</head>
<body>
    <div class='d1'>001</div>
    <div>002</div>
    <div id='d3'>003</div>
</body>
</html>
  • 一次性控制多个选择器
  • 选择器之间以,隔开,每一个选择器位均可以为任意合法选择器或选择器组合

子代(后代)选择器

子代选择器用>连接
body > div {
    color: red;
}
后代选择器用空格连接
.sup .sub {
    color: red;
}
  • 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
  • 每一个选择器位均可以为任意合法选择器或选择器组合
  • 子代选择器必须为一级父子嵌套关系,后代选择器可以为一级及多级父子嵌套关系

相邻(兄弟)选择器

相邻选择器用+连接
.d1 + .d2 {
    color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
    color: red;
}
  • 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
  • 每一个选择器位均可以为任意合法选择器或选择器组合
  • 相邻选择器必须为直接相邻关系,兄弟选择器可以为直接相邻或间接相邻关系

交集选择器

<div class="d" id="dd"></div>
div.d#dd {
    color: red;
}

<div class="d1 d2 d3"></div>
.d1.d2.d3 {
    color: red;
}

组合选择器优先级

  • 组合选择器优先级与权值相关,权值为权重和
  • 权重对应关系
选择器 权重
通配 1
标签 10
类、属性 100
id 1000
!important 10000
  • 选择器权值比较,只关心权重和,不更新选择器位置
  • 不同级别的选择器间不具备可比性:1个类选择器优先级高于n个标签选择器的任意组合

属性选择器

  • [attr]:匹配拥有attr属性的标签
  • [attr=val]:匹配拥有attr属性,属性值为val的标签
  • [attr^=val]:匹配拥有attr属性,属性值以val开头的标签
  • [attr$=val]:匹配拥有attr属性,属性值以val结尾的标签
  • [attr*=val]:匹配拥有attr属性,属性值包含val的标签
v_hint:属性选择器权重等价于类
v_test:掌握所有选择器,并熟知选择器优先级

伪类选择器

1、a标签四大伪类

  • :link:未访问状态
  • :hover:悬浮状态
  • :active:活跃状态
  • :visited:已访问状态

2、内容伪类

  • :before:内容之前
  • :after:内容之后
:before, :after {
    content: "ctn";
}

3、索引伪类

  • :nth-child(n):位置优先,再匹配类型
  • :nth-of-type(n):类型优先,再匹配位置
v_hint:值可以为位置数,也可以为2n、3n...,代表2的倍数,3的倍数,且位置数从1开始

4、取反伪类

  • :not(selector):对selector进行取反

盒模型

盒模型概念

  • 广义盒模型:文档中所有功能性及内容性标签,及文档中所有显示性标签
  • 侠义盒模型:文档中以块级形式存在的标签(块级标签拥有盒模型100%特性且最常用)
  • 盒模型组成:margin + border + padding + content
v_hint:content = width x height

盒模型成员介绍

1、content

  • 通过设置width与height来规定content
  • 块级标签可以设置自身宽高,默认宽为父级宽(width=auto)、高为0,高度可以由内容决定
  • 内联标签不可以设置自身宽高,默认宽高均为0,宽高一定由内容决定

2、border

  • border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
  • border成员:border-left、border-right、border-top、border-bottom
  • border-width成员:border-left-width、border-right-width、border-top-width、border-bottom-width
  • border-color成员:border-left-color、border-right-color、border-top-color、border-bottom-color
  • border-style成员:border-left-style、border-right-style、border-top-style、border-bottom-style
风格 解释
solid 实线
dashed 虚线
dotted 点状线
double 双实线
groove 槽状线
ridge 脊线
inset 内嵌效果线
outset 外凸效果线
v_hint:border满足整体设置语法,eg:border: 1px solid red;

3、padding

  • padding成员:padding-left、padding-right、padding-top、padding-bottom
  • padding整体设置
值得个数 方位
1 上下左右
2 上下 | 左右
3 上 | 左右 | 下
4 上 | 右 | 下 | 左

4、margin

  • margin成员:margin-left、margin-right、margin-top、margin-bottom
  • margin整体设置
赋值个数 方位
1 上下左右
2 上下 | 左右
3 上 | 左右 | 下
4 上 | 右 | 下 | 左

边界圆角

border-radius

  • border-radius成员
成员 解释
border-top-left-radius 左上 方位
border-top-right-radius 右上 方位
border-bottom-left-radius 左下 方位
border-bottom-right-radius 右下 方位
  • 单方位设置
赋值个数(值类型:长度 | 百分比) 解释
1 横纵
2 横 | 纵
  • 按角整体设置
赋值个数(值类型:长度 | 百分比) 解释
1 左上 右上 左下 右下
2 左上 右下 | 右上 左下
3 左上 | 右上 左下 | 右下
4 左上 | 右上 | 右下 | 左下
  • 分向整体设置
格式 解释
1 / 1 横向 | 纵向

其他相关属性

  • max|min-width|height
  • overflow
描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
  • display
描述
inline 内联
block 块级
inline-block 内联块

作者:Eurekaa,发布于:2018/12/06
原文:https://www.cnblogs.com/zuanzuan/p/10077038.html