深入CSS | 青训营笔记

无限月读A
74 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

1.选择器权重

  • 内联 - 1000
  • id - 100
  • class - 10， 伪类 - 10，属性 - 10
  • 标签 -1 伪元素 -1
  • 相邻兄弟选择器 -0 子选择器 -0 后代选择器 -0 通配选择器 -0

2.选择器特异度

高优先级中样式可覆盖低优先级的样式

图片.png

(1)中 => id选择器数量为1，（伪）类选择器数量为2（.link, :link），（伪）元素选择器数量为2（li, a） ===> 特异度为 122

(2)中 => id选择器数量为0，（伪）类选择器数量为2（.hd, .links），（伪）元素选择器数量为2（ul, a） ===> 特异度为 22

END: 所以(1)的优先级高于(2)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

</head>

<body>

    <button class="btn">普通按钮</button>

    <button class="btn primary">主要按钮</button>

    <style>

        .btn {

            display: inline-block;

            padding: .36em .8em;

            margin-right: .5em;

            line-hekght: 1.5;

            text-align: center;

            cursor: pointer;

            border-radius: .3em;

            border: none;

            background: #e6e6e6;

            color: #333;

        }

        .btn.primary {

            color: #fff;

            background: #218de6;

        }

    </style>

</body>

</html>

图片.png

给所有按钮共同部分写在.btn里，不同的可用高优先级覆盖；先写基础的，再写特殊的

3.CSS的继承

一.无继承的属性
display：规定元素应该生成的框的类型
文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
盒子模型的属性：width、height、margin、border、padding
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二.有继承的属性

1.字体系列属性

  • font-family：字体系列
  • font-weight：字体的粗细
  • font-size：字体的大小
  • font-style：字体的风格

2.文本系列属性

  • text-indent：文本缩进
  • text-align：文本水平对齐
  • line-height：行高
  • word-spacing：单词之间的间距
  • letter-spacing：中文或者字母之间的间距
  • text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
  • color：文本颜色

3.元素可见性

  • visibility：控制元素显示隐藏

4.列表布局属性

  • list-style：列表风格，包括list-style-type、list-style-image等

5.光标属性

  • cursor：光标显示为何种形态

4.布局常规流

布局

确定内容的大小和位置的算法；
依据元素、容器、兄弟节点和内容等信息来计算。

布局相关技术三大类：常规流、浮动、绝对定位

行级、块级、表格布局、FlexBox、Grid布局

content、padding、border、margin

width:(内容)

指定content box宽度；

取值为长度、百分数、auto；

auto由浏览器根据其它属性确定；

百分数相对于容器的content box宽度。

height：

指定content box高度；

取值为长度、百分数、auto；

auto 取值由内容计算得来；

百分数相对于容器的content box高度；

容器有指定的高度时，百分数才生效。

padding：

指定元素四个方向的内边距

百分数相对于容器宽度

10px:四个方向；

10px 20px:上下10px左右20px

10px 20px 10px 20px:上左下右

border:

指定容器边框样式、粗细和颜色

solid/dashed/dotted实线/虚线/点状线 三种属性四个方向：

border-width；border-style；border-color border-top；boder-right；border-bottom； border-left

内容为0，只有边框：四个三角形组成（模拟三角形）

margin

指定元素四个方向的外边距；

取值可以是长度、百分数、auto；

百分数相对于容器宽度。

5.块级行级

Block Level Box：不和其它盒子并列摆放，适用所有的盒模型属性

Inline Level Box：和其它行级盒子一起放在一行或拆开成多行；盒模型中的width、height不适用

块级元素：

生成块级盒子（body、article、div、main、section、h1-6、p、ul、li等）display: block

行级元素：

生成行级盒子；内容分散在多个行盒(line box)中（span、em、strong、cite、code 等）display: inline

avatar
文章
阅读
粉丝