CSS

2021-12-27  本文已影响0人  涛涛抄书

常用

软件

vscode：可以登陆GitHub账户，进行设置的同步，常用插件：

pxcook：像素量取

操作

box-sizing: border-box;

white-space:nowrap #空白折叠会发生但不会换行
overflow:hidden #溢出隐藏
text-overflow:ellipsis #超出文本如何处理

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}

语法糖

  1. 多个选择器用逗号分隔，表示两个选择器使用同一个声明块
  2. 简写属性：多个属性合在一起书写，例如padding（[[t b] [l r]]）=padding-left + padding-right + padding-top + padding-buttom，中括号内值相同时可只写一次，浏览器检查窗口中可看到折叠三角形，若只写三个值则第四个值取用第一个值
    注意：简写属性的其他未设置属性会设置为默认，所以通常简写属性需要写在具体属性之前

基础知识

CSS规则=选择器+声明块

1. 选择器（用于选中元素）

通配符选择器

ID选择器：选中对应ID元素，ID名，#id名
元素选择器：选择一类元素，元素名
类选择器【常用】：html中定义class，.class名称

#css
 .linka{
  color: #ccc;
}
#html
<a class="linka" href="https://www.jianshu.com/u/2c9847303b69">baidu</a>

属性选择器：可以根据需要进行筛选，[属性名=“属性值”]

[href]{
  color:red;
}
- [foo |= "bar"] 选择元素有foo属性，且其值以bar和一个英文破折号开头，或者其值就是bar本身；
- [foo ~= "bar"] 选择元素有foo属性，且其值是包含bar的一组词，以空格分隔；
- [foo ~= "bar"] 选择元素有foo属性，且其值是包含子串bar；
- [foo ^= "bar"] 选择元素有foo属性，且其值以bar开头；
- [foo $= "bar"] 选择元素有foo属性，且其值以bar结尾；

伪类选择器：选中某些元素的某种状态，伪类的效果是把某种幽灵类应用到伪类依附的元素上，:选择器

  1. UI状态伪类：enabled，disabled，checked，indeterminate，default，valid，invalid，in-range out-of-range， required，optional，read-write，read-only
  2. target伪类，lang伪类，否定伪类

伪元素选择器：::选择器

选择器的组合

选择器的优先级（层叠）

重要性

  1. 作者样式表中<!important>样式
  2. 作者样式表
  3. 浏览器默认

特殊性

  1. 千位：内联=1，其他=0
  2. 百位：等于选择器中所有ID选择器数量
  3. 十位：等于选择器中所有类选择器、属性选择器、伪类元素选择器数量
  4. 个位：等于选择器中所有元素选择器、伪元素选择器数量

比较源次序：代码书写靠后的胜出

2. 声明块

下面是常用的声明块：

color background-color

font-size

font-weight：加粗

font-family

font-style：斜体

text-decoration：文本修饰，可以在中间或者上下加上横线，a、s、del元素会默认带有该属性，为简写属性，可以设置样式、颜色
text-indent：缩进，1em，0，30%

text-align：元素内部文字水平排列方式

line-height：1、1px

height、width：1em，1px；容器的高宽

letter-space：em、px；符间距

opacity：设置元素的透明度，取值是0~1

cursor：鼠标样式

display：设置元素盒类型，重要！

visiblility：hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间

background：仅用于美化，不包含内容时使用背景，包含内容应该用html的img元素

  1. 可通过逗号分割放置多个背景图（只有最后一个可以设置背景色）
  2. size 值必须紧随position后面，两者之间要以斜线/隔开，行向在前，纵向在后，origin在前，clip在后

阴影：

样式选择流程

每个元素的所有属性都必须有值，才能在页面上显示

  1. 确定声明值
  2. 层叠冲突（按照选择器来进行选择）
  3. 使用继承（继承父元素取值）
  4. 使用默认值（此处默认值为标准规定，不是浏览器定义值，浏览器定义值在第2步进行比较）

应用

  1. 强制继承：在声明值处填写inherit属性，使继承也参与1或2的选择
  2. 强制默认：在声明值处填写auto属性，使默认值也参与1或2的选择

书写位置

<link rel="stylesheet" href="./文件相对路径">
- rel属性：为relation的缩写，
* 还可取 “alternate stylesheet”，为候选样式表，仅当用户自己选择，才会使用候选样式表渲染
- media属性：指定什么情况下样式表生效，默认适用于全部媒体，可选print，screen等

盒模型

网页中所有内容都是以盒子的形式展示的

盒子类型

  1. 行盒：display属性为inline的元素，在页面中不换行（例如默认情况下两个a元素会并排），常见有span、a、img、video、audio
  2. 块盒：display属性为block的元素，块盒独占一行（例如默认情况下两个p元素不会在同一行）
  3. 行块盒：display属性为inline-block的元素，同时具备行盒和块盒的特点，因为空白折叠应用较少
  4. 弹性容器：display属性为flex的元素，用来实现单行布局
  5. 栅格容器：display属性为grid的元素，用来实现二维栅格布局

盒子的参数：由内到外类似地球结构

  1. 内容盒（content-box）：内容部分，参数width、height
  2. 填充盒（padding-box）：填充区+内容区，padding-left、padding-right、padding-top、padding-bottom，简写属性padding
  3. 边框盒（boder-box）：边框区+填充区+内容区，简写属性boder（boder-style、boder-width、boder-color），当然里面三个也是简写属性
  4. 外边距（magin）：magin

行盒特性：

  1. 盒子沿着内容延伸
  2. 行盒不能设置宽高，应该使用字体大小、行高、字体类型，间接调整
  3. 内边距（填充区）：水平方向有效，垂直方向不会实际占用空间
  4. 边框：水平方向有效，垂直方向不会实际占用空间

块盒

  1. 盒子占满宽度
  2. 可以设置宽高，所有属性水平与垂直方向均生效

行块盒（display:inline-block）特性：

  1. 不独占一行
  2. 盒模型中所有尺寸都有效
  3. 空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间

弹性容器、栅格容器：新版排布方式

视觉格式化模型

1. 常规流（默认）：别名文档流、普通文档流、常规文档流

块盒

  1. 每个块盒总宽度，必须等于包含块的宽度
    宽度默认auto（将剩余空间吸收掉）
    margin取值可以为auto，默认为0
    width吸收能力强于margin
    若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收
    常规流块盒包含块居中方式：定宽，然后左右margin设置为auto。
  2. 每个块盒垂直方向上的auto值
    height：auto，适应内容高度
    magin：auto，表示0
  3. 百分比取值
    padding、宽、margin可以取值为百分比
    以上所有百分比相对于包含块的 宽度
    高度百分比：若包含块高度取决于元素高度，百分比无效；包含块高度不取决于子元素高度，百分比相对于父元素高度
  4. 上下外边距合并（行盒不会）
    两个常规流块盒，上下外边距相邻，会进行合并（父子之间也会合并），取最大值

2. 弹性布局：适用于一维内容分布（沿一个方向布置内容）

display: flex block(inline)

属性

3. 栅格布局：与弹性布局类似，二维布局方式 grid

概念

属性

grid-template-rows: [start] 1em [1] 50% [2] 1fr [end]
minmax(min,max),设定最大最小值，具体取值视情况而定
minmax(min, fr)
fr弹性栅格，份数单位，可以用1fr来占满剩余空间
min-context:尽量少占据空间，能够显示内容即可，当行列都设为该值时，因为先解析列尺寸，所以相当于只有列应用该参数
max-context:宽度尽量大，以防换行
fit-content(argment)--> min(max-content, max(min-content, argment))
repeat(10,5em 1fr 1fr)：表明以后面规则重复放置轨道，总共放置10个
repeat(auto-fill,20em):填充尽可能多次，占满可用空间，auto-fit参数没有栅格元素的轨道将被剔除

gred-template-areas:
"head head head head"
"left . . right"
"footer footer footer footer";

grid-row: R / span R 2
grid-column: col-A 3 / col-A 4
参数可以为数字（负值表示从后往前数），栅格名（重复的需要加上标签）、span
span：表示跨多少，开始结束之前都能使用，后可接数字或者栅格名
auto：对开始线来说，通常指吓一条可用的列线或航向，对结束线来说，通常指跨一个栅格单元后的栅格线

还可以用 row-start/column-start/row-end/column-end，来指定位置

row
column
dense：从起点扫描整个栅格，找到能放下栅格元素的位置就把元素放在那里

grid:
"head head head head" 3em
"left . . right" 1fr
"footer footer footer footer" 5em /
2em 3fr minmax(10em 1fr) 2em;

grid: dense row 2em / 2em

grid:subgrid , 容器中的栅格元素根据父容器定义的栅格对齐

grid-gap: 12px 2em

4. 定位：手动控制元素在包含块中的精确位置，position

position

一个元素，只要position不是static，认为该元素是定位元素
定位元素会脱离文档流（常规流），相对定位除外
文档流中的元素摆放时，会忽略脱离了文档流的元素
文档流中元素自动计算高度时，会忽略脱离了文档流的元素

相对定位

绝对定位

固定定位

居中方式和块盒相似，不过可以通过设置margin垂直居中

多个定位元素重叠

常见场景

5. 浮动（文字环绕，横向排列）

修改float属性

  1. left：左浮动
  2. right：右浮动

当元素浮动之后display属性默认变成block，包含块也为父元素内容盒

盒子尺寸

  1. 宽度为 auto 时，适应内容宽度
  2. 高度为 auto 时，与常规流一致
  3. magin为 auto 时，为0
  4. 边框、内边距、百分比设置与常规流相同
  5. 浮动元素的四周外边距不折叠

盒子排列

  1. 左（右）浮动的盒子靠左（右）排列
  2. 浮动盒子在包含块中排列时，会避开常规流块盒
  3. 常规流块盒在排列时，无视浮动盒子
  4. 行盒在排列时，会避开浮动盒子（如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行和叫做匿名行盒）

高度坍塌：常规流盒子的自动高度，在计算时，不会考虑浮动盒子，所以要用到clear参数

视觉效果

1. 变形

属性

平移：可取百分比或具体值
- translate（translateX translateY）：若只提供一个参数，Y默认为0
- translate3d（X Y Z）：三个参数必须都提供
缩放：可取正值数字
- scale（X Y）：若只提供一个参数，X和Y均使用该参数
- scale3d（X Y Z）：仅当元素有深度时，才可以缩放，XY轴旋转可以产生深度
旋转：可取数字，角度单位（deg、grad、rad、turn），超出常规值范围之后将转化为范围内值（对于动画来说时有区别的）
- rotate（Z）：水平面进行旋转
- rotate3d（num，num，num，angle）：前三者确定一个向量、然后绕该向量旋转angle度
倾斜：skew、skewX、skewY，取值为角度
- skew与X，Y不同，
- skew若只提供一个值，Y值默认为0

Apple指出，
小于300px的视域值得到的效果特别失真，
大于2000px像素的值失真“十分温和”，
而500px到10000px之间的值产生“适中的视域”

2. 过渡

在一段时间内从一个值变到另一个值，属性需要支持动画，有中间值；过渡的目的是增强效果，不能牺牲用户体验

属性

nav ul li {
    transition: transform 200ms ease-in 50ms; opacity 200ms ease in 50ms
}
- transition-property：限制受影响的属性，默认all，多个属性需用逗号分隔，一一列出。all必须放在首位
* 禁用过度效果可将其设置为none或者延迟时间设置为0
- transition-duration：持续时间，默认0秒，多时间可逗号分隔
- transition-timing-function：调整过渡时序，默认ease，
* 可选linear、ease-in、ease-out、ease-in-out，或使用cubic-bezier（）自定义贝塞尔曲线
* 可选步进时序函数：steps（n，start/end），分N步阶梯变化
- transition-delay：延迟过渡，默认0秒，立即开始过渡，可取正或者负的时间单位
* 为负值时过渡将从中间开始，负值绝对值超过duration时属性值瞬间变化，不触发transitionend事件

3. 动画

建议动画可选择去除：

@media（prefers-reduced-motion）{
    * {animation：none !important; transition none !important;}
}
@media not (prefers-reduced-motion){
    所有动画和过渡
}

属性

@keyframes change_bgcolor{
    20%,
    45%{ background-color: green;}
    75%{ background-color: blue;}
}

animated：{
    animation： 200ms，ease-in，50ms，1 ， normal，running，forwards，slidedown
}
- animation-name：可逗号分隔，如果其中一个失效会继续应用其他动画
* 为相同属性设置的多个动画在同一时刻播放时，起作用的是后列出的动画；
* 当最后的动画没有0%/100%关键帧时，会从前面的动画进行查找应用
- animation-duration：动画持续一次的时间，单位s或ms，默认0s，以逗号分隔
* 如果其中又一个无效值，整组声明均失效；
* 会自动重复使用
- animation-iteration-count：动画迭代次数，默认为1，可取infinite无限重复
* 如果不是整数，将在最后一次循环中途结束
- animation-direction：动画方向，可取normal、reverse、alternate、alternate-reverse
* alternate指第一次从0%到100%，第二次从100%到0%
- animation-delay：延迟，可取正值或负值，与过渡类似
- animation-timing-function：改变动画内部时序，默认值ease，同过渡
* 可以添加在关键帧中，使不同区间使用不同时序函数
- animation-play-state：暂停和继续播放动画，取值默认running，可取paused
- animation-fill-mode：动画的填充模式，动画播放结束后是否继续使用原来属性值，默认none，可取both或以下值：
* forwards：动画结束后结束帧一直应用，
* backwards：添加动画后0%立即应用

其他待整理

可替换元素（img） 和 非可替换元素

浏览器解析：解析组成文件的顺序：当浏览器向服务器发送请求获取 HTML 文件时，HTML 文件通常包含 "link" 和 "script" 元素，这些元素分别指向了外部的 CSS 样式表文件和 JavaScript 脚本文件。了解这些文件被浏览器解析的顺序是很重要的：

规则

背景图：背景图是属于CSS的概念，img元素属于HTML的概念
一般当图片属于网页内容时，必须使用img元素
一般当图片仅用于美化页面时，必须使用背景图

方法

@media projection{
    body { background : yellow; }
}

@supports (color : black) {
    body { color: yellow; }
}

响应布局：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design

表单

在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用body中或者一个父元素中定义的字体，你需要向你的CSS中加入这条规则。为了保证统一，将所有元素的内外边距均设为0，然后在单独进行样式化控制的时候将这些加回来。除了上面提到的规则以外，你也应该在<textarea>上设置overflow: auto 以避免IE在不需要滚动条的时候显示滚动条：

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0; margin: 0;
}
textarea {
  overflow: auto;
}

将以下 CSS 应用于它们会删除系统级样式。

input {
  -webkit-appearance: none;
  appearance: none;
}

表单元素样式

  1. 重置表单元素样式
  2. 设置textarea是否允许调整尺寸（both默认都可以调整、none不能、horizontal水平可以、vertical垂直方向可以
  3. 文本框边缘到内容的距离
  4. 控制单选和多选的样式
上一篇 下一篇

猜你喜欢

热点阅读