CSS选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
* /* 通配符 */
p /* 元素选择器 */
#ele /* id选择器 */
.ele /* 类选择器 */
div.class1 /* 交集选择器 */
.class1.class2.class3 /* 交集选择器 */
#id1, div.clas1, #id1 /* 并集选择器 */
div > p /* 子代选择器 */
div p /* 后代选择器 */
p + span /* 下个兄弟选择器 */
div ~ p /* 选择div后面的全部p */

p[title] /* 属性选择器 既是 p 又有title 属性*/
p[title=abc] /* 属性选择器 既是 p 又有title等于abc 属性*/
p[title^=abc] /* <p title='abcxasas'>hello</p> abc开头*/
p[title$=abc] /* <p title='asasfsfabc'>hello</p> abc结尾*/
p[title*=abc] /* <p title='asasasdfsfabcxas'>hello</p> 含有abc*/

ul > li:first-child /* 伪类选择器 第一个li */
ul > li:last-child /* 最后一个li */
p:only-child /* 属于p并且在父级元素中是唯一一个子元素 */
ul > li:nth-child(n) /* 全选li */
ul > li:nth-child(2n) /* 偶数 或者写 :nth-child(even) */
ul > li:nth-child(2n+1) /* 奇数 或者写 :nth-child(odd) */
ul > li:first-of-type /* 同类型元素第一个li */
ul > li:last-of-type /* 同类型的元素最后一个li */
ul > li:nth-of-type(2n+1) /* 同类型的元素 奇数li */
ul > li:not(:nth-child(2)) /* 选中ul下所有li,除了第二个li */

a:link /* 还没访问的超链接 */
a:visited /* 访问过的超链接 */
a:hover /* 鼠标悬停 */
a:active /* 鼠标点击 */

p::first-letter /* 伪元素 p标签内容的第一个字母 */
p::first-line /* 伪元素 p标签内容的第一行 */
p::selection /* 伪元素 鼠标选中的内容选中 */

/* 元素开始位置 */
div::before {
    content: '[';
    color: aquamarine;
}
/* 元素结束位置 */
div::after {
    content: ']';
}

css基础知识点

  • 继承特性:
    背景相关, 布局相关 不会被继承

  • 选择器权重
    内联样式 > id选择器 > 类和伪类选择器 > 元素选择器 > 通配选择器 > 继承样式
    优先级相同，优先使用下面的

  • 长度单位

    • 屏幕像素 px
    • 相对于父级元素的 百分比 10%
    • em : 1 em = 1 font-size 大小
    • rem: 相对于根元素 html 的 font-size 字体大小

  • 颜色单位：

    • HSL: H 色相 0 - 360，S 饱和度 100%， L 亮度 100%
    • rgb: rgb(0,233,255) 0-255

  • 文档流

    • 块级元素： 默认宽度为父级全部， 高度默认是内容高度
    • 行内元素：默认高度和宽度都是内容的宽高

  • 盒子模型：盒子大小：边框 + 内边距 + 内容

    • border：10px red solid; 影响盒子的整体大小，边框外部就是 盒子外部
      • border-width 默认3px 三个值代表上、左右、下,
      • border-color 默认使用 color 值，不指定的话
      • border-style: solid; 默认 none
    • padding: 会影响盒子大小，背景颜色延申到内边距
    • content : width, height 指定的是 content 内容区的大小
    • margin

  • 水平布局

    • margin-left + border-left + padding-left + content + padding-right + border-right + margin-right = 父级元素的内容 content 宽度
    • margin-right 会自动调整 正负数时的等式成立
    • width 和 margin 同时为 auto 时，width 最大，margin 为 0

  • 垂直布局

    • 溢出：overflow： hidden，visible，scroll滚动条，auto根据需要生成滚动条

  • 垂直相邻元素外边距重叠

    • div1 margin-bottom: 100, div2 margin-top: 200px, 两个元素距离 200px 一正一负取和

  • 子元素外边距会传递到父元素

  • 行内元素不支持宽高设置

  • 垂直方向的padding，border，margin不影响布局，盖住其他元素，水平方向相邻元素不重叠

  • display: inline-block 可以设置宽高，不会独占一行

  • visibility: hidden; 隐藏后占据位置，display: none; 隐藏后不占据位置

  • 去除默认样式 * { margin: 0;padding: 0; }

  • 设置字体垂直居中于父级，设置父级的 line-height 为父级高度即可

  • box-sizing: 设置盒子尺寸计算方式，设置width height 的作用方式

    • box-sizing: content-box, width height 指的是内容content的宽高
    • box-sizing: border-box, width, height 指的是 content + padding + border 的总宽高

  • 轮廓

    • outline： 1px solid red 轮廓不影响布局、大小，只是添加了个轮廓

  • 阴影

    • box-shadow: black; 默认跟元素大小一致， 处于元素正下方
    • box-shadow: 10px 10px red; 水平偏移量 和 垂直偏移量 不影响布局
    • box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 水平偏移量、垂直偏移量、阴影模糊半径，颜色以及透明度

  • 圆角

    • border-radius: 10px; 圆角半径
    • border-radius： 10px/20px; x轴半径，y轴半径
    • border-top-left-radius： 10px 20px; x轴半径，y轴半径
    • border-radius： 10px 20px 30px; 左上 右上和左下 右下
    • border-radius: 50%; 画圆

  • float: left/right;

    • 元素脱离文档流；
      • 块级元素不会独占一行，宽高被内容撑开
      • 行内元素变成块级元素，可以设置宽高
    • 元素靠父级元素边界左/右侧移动
    • 浮动元素间不会重叠
    • 上边y轴位置不会超过兄弟元素
    • 浮动元素不会盖住文字

  • 解决父元素因没有设置宽高而子元素浮动带来的高度塌陷或子元素带来外边距的影响

    • BFC(Block Formatting Context) 块级格式化环境，
      • 开启方法：overflow: hidden/auto （父子关系）
      • 元素开启BFC后会变成一个独立的布局区域
      • 不会被兄弟浮动元素覆盖
      • 子元素外边距不会传递到开启BFC的父元素
      • BFC父元素可以包含浮动子元素
    • 设置clear属性为left/right/both （兄弟关系）
      • left清除左侧浮动元素带来的影响
      • right清除右侧浮动元素带来的影响
      • both清除两侧中较大高度的浮动元素带来的影响
    • 父元素添加一个属性设置clear:both的元素（内墙法），通过html结构解决css表现上的问题
    • （优）通过伪类解决：父元素.box1::after{ content: ''; display: block; clear:both; }，也可以解决外边距重叠

  • 封装同时解决高度塌陷和外边距重叠问题的解决方案

    1
    2
    3
    4
    5
    6
    .clearfix::before,
    .clearfix::after {
        content: '';
        display: table;
        clear: both;
    }

  • 相对定位relative：位置相对于原来自身位置，提高层级，不会改变性质，块还是块，行内还是行内

  • 绝对定位absolute：位置相对于离自己的最近开启定位的祖先元素或者根元素（html初始包含块）提高层级，会改变性质，行内变成块，不写宽高块的宽高被内容撑开

    • left + margin-left + border-left + padding-left + content + padding-right + border-right + margin-right + right = 父级元素的内容 content 宽度
    • 绝对定位元素水平居中需要left和right设置为0，在使用margin:0 auto居中，因为left、right默认为auto，垂直居中同理，top和bottom设置为0

  • 固定定位fixed：位置相对于浏览器窗口，会改变性质，行内变成块，不写宽高块的宽高被内容撑开

  • 粘滞定位sticky：top0px; 滚动窗口到顶部后就不动了，粘滞

  • 可以auto的值：width, left, right, margin

  • 字体

    • color
    • font-family: serif衬线字体/sans-serif非衬线字体/monospace等宽字体
    • font-size
    • 服务器提供字体 @font-face{ font-family: 'name'; src: url() }

  • 文本

    • text-align 水平对齐
    • vertical-align 垂直对齐
    • 解决img元素底部出现空白缝隙，使用vertical-align解决
    • text-decoration 文本修饰
    • white-space: nowrap不换行/pre保留空白原本输出文本格式与内容
    • text-overflow: ellipsis超出的文本用省略号代替，还需要容器设置宽度、文本不换行nowrap

  • 背景

    • background-color
    • background-image:
      • url()
      • linear-gradient(red,yellow,…)上到下渐变
      • linear-gradient(red 50px起始渐变位置,yellow)上到下渐变
      • linear-gradient(to right/to top/0deg/45deg度/.25turn圈,red,yellow)不同方向渐变
      • repeat-linear-gradient(red,yellow,…)重复渐变
      • radial-gradient(circle正圆,red,yellow,…)径向渐变（中心向四周）
      • radial-gradient(100px 100px at 0 0在哪个个位置开始大小为100x100,red,yellow,…)
      • radial-gradient(at top right,red,yellow,…)
      • radial-gradient(closest-side/closest-corner/farthest-side/farthest-corner,red,yellow,…)近远边近远边远角
    • background-image: repeat-x/repeat-y/no-repeat 容器大于图片的图片重复方式
    • background-position: center center 图片位置 需要两个值 或者是水平和垂直的偏移量
    • background-clip: padding-box背景不会出现在边框/content-box背景只出现在内容区
    • background-origin: border-box/padding-box/content-box 背景图片偏移量的计算源点
    • background-size: 100%背景图片宽度撑满容器高度auto/cover图片比例不变撑满容器/contain图片比例不变将图片完整显示在容器
    • background-attachment: fixed; 背景不会跟随元素滚动
    • background: #bfc url() center center/contain no-repeat

  • table

    • border-collapse; 合并边框
    • div可设置display:table-ceil; 使用vertical-align垂直居中