理解CSS ｜ 青训营笔记

彼岸an
80 阅读10分钟

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

理解CSS

一、CSS-层叠样式表

1 选择器组成

h1{//选择器
//color-属性值
color:white;//声明
}

2 页面中使用CSS

1. 外链

<link rel...>

2. 嵌入

<style>
....
</style>

3. 内联

  • 1. 直接在当前元素的style属性写样式
  • 2. 一般推荐外链：涉及到内容和样式的分离、功能上的分工。或者组件式开发：会把css.html.js放在一个文件。不太推荐内联

3 CSS如何工作？

  • 分别解析html和css文件，创建DOM树，计算每一个DOM结点是如何的
  • 再进行渲染成页面。 image.png

4 选择器

  1. 标签名字、类名、id
  2. 属性

1. 通配选择器

*{
}

2. id选择器#-一般值唯一

#id{
}

3. 类选择器-可出现多次

.class{
}

4. 属性选择器

[disable]{//只要有disable属性即选中
}

input[type="password"]{//属性值为特定值
}

ps:1. href^="#"//以#开头，$=".." 以..结尾

5 伪类

  • 状态/结构性伪类

1. 状态性伪类

a:link{
}

1. 例如a标签，link默认、visited访问过、hover鼠标悬浮、active鼠标按下后

2. focus输入框点击后状态。outline边框属性

2. 结构性伪类

  • 根据DOM属性-根据父级结点的相对位置来选中

1. 例如ol中的第一个li

li:first-child{
}
//还有last-child

2. 还可以奇数标签、偶数标签、满足多少倍数标签

6 通过组合方式

image.png

1. 直接组合

input.error{
}
//input标签同时类名为error-直接组合

2. 后代组合

后代组合中凡是nav后代的所有a标签都会被选中

3. 亲子组合

亲子组合只会选中紧跟的下一级p标签

4. 兄弟组合

兄弟-h2所有同级p标签

7 选择器组

1.

 body,h1,h2{
}

2.

 [type="checkbox"],[type="radio"]{
}

8 颜色

1. RGB-通过color属性值设置

rgb(0,0,0)//0-255
#ffffff//16进制表示

2. HSL-与特征关联色相、饱和度、亮度

image.png

  • 色相H：0-360
  • 饱和度S：0%-100%//鲜艳程度
  • 亮度L：0%-100%
hsl(0,0%,0%)

运用在颜色变化时，比如：点击按钮后颜色改变

3. alpha透明度-不透明度

  1. alpha为1时不透明
  2. 直接加在rgb，hsl后面即可。例如：
hsl(0,0%,0%,0.5)

9 字体

1. 属性font-family字体族

image.png

  • 因为网页可能被不同设备访问，指定多个字体，从前到后运用字体值。

1.serif衬线体通用字体族-尾部修饰

2.Sans-Serif运用的相对多一点，尾部无修饰

  • ps:一般末尾加上通用字体族。推荐中英文混排：先英文字体族再中文字体族。（因为可以对于英文会先遇到英文字体族，而中文字体族遇到英文字体族无法用再下一个中文字体族。这样就可以使得中英文对应字体族运用）

2. web Fonts

  1. 严格字体显示，会带来字体开销
  2. 中文字体包比较大，需要另外裁剪

image.png

3. font-size

  1. section设置了20px，section h1再设置20%。呈现出20*0.2=16

4. font-style

  1. normal非斜体
  2. Italic

5. font-weight-字重、字体粗细

  1. 取值100-900，normal-400，bold-700

ps：页面如果设置不同发现没区别，是字体可能不支持这么多字重

6. line-height-行高，两行文字的基准线

  1. 若没有单位，表示的字体的倍数。1.6则为字体倍数行高

7. font

font属性包含：大小，斜体、粗体、行高。一个总和

8. 其他

text-aline文本对齐，left...

letter-spacing字间距

word-spacing单词间距

text-indent缩进

9. white-space-空格/换行处理

1.normal：多个空格合并为一个

2.nowrap：强制不换行

3.pre：保留所有的

4. pre-wrap：保留空格，自动换行

5. pre-line空格合并，保留换行

二、走进css

1 特异度

  • 如何多个选择器匹配到同一个元素时候哪个生效？

根据特异度：特殊程度，越特殊优先值越高

  • 如何计算特异度？

id>伪类>标签各有几个？

ps：1. class="btn primary"//两个类名

2. 需要特殊处理的时候可以利用多加一个class，增加特异度，覆盖原有样式

2 继承

1. 自动继承

  1. 某一元素可能自动继承父元素。color是一个可继承属性

例如：当一个元素的color没有赋值，会从父级元素开始寻找color值，若没有再往上寻找。

ps：一般css相关属性可以继承，与盒模型div相关一般不继承。

2. 显示继承

  • 若有一些值不继承，但是就想要继承

1. 通配选择器

*{
box-sizing:inherit;
}

ps：box-sizing不可继承

3 初始值

在css当中每个属性都有一个初始值

  • 若当一个元素无法继承，又没有赋值，则会使用初始值/可以继承但没找到

ps：例如：

background-color：transparent//透明

初始值：initial

4 css求值过程

CodePen - 青训营/CSS/取值过程 (cdpn.io)

1. filtering

筛选：根据现有规则将所有匹配的样式拿出来，然后进行筛选得到'一组'匹配到的一些规则-声明值。 声明值：是一组，0到n个。

2. cascading

  • 声明值最后用哪个？cascading

根据来源：important？特异度？书写顺序？等选出一个优先级最高的属性值。得到层叠值(优先级比赛赢得的声明值

3. defaulting

  • 有些时候层叠值是空的。这时候就会用到默认值策略-继承/初始值.
  • -defaulting之后得到唯一一个'指定值'。

4. resolving

  • 但是不能直接用还需要进行处理：比如相对值em->px，图片相对路径改为绝对路径等。-得到计算值

ps：并不是所有情况相对值会转换：比如60%

5. farmatting

  • 将计算值转换为绝对值。进一步转换。得到使用值

6. constraining

  • 有些时候得到的值无法直接用比如400.2px。
  • 将小数转换为整数。得到实际值
  • 实际值：渲染时实际生效的值。
  • ps：有些时候会有限制。比如100%是500，但是限制了最大400.实际只会用400计算值与使用值区别

计算值： 浏览器拿到css可以直接转换出来的。 比如：60%可以根据父级直接算出来。背景图是相对地址，可以直接寻找到。

使用值： 单纯拿到css、html计算不出来的值。 比如：需要实际布局才需要决定的值，比如页面100%大小。

  • ps：继承：有些属性继承到的是父元素的计算值。

5 布局（Layout）-盒模型

  • 确定内容大小和位置的算法
  • 元素、容器、兄弟节点、内容等信息来计算
  • 在css中三种大的布局方式
  • 常规流-正常流

1. 块级

2. 行级

3. 表格布局

4. FlexBox

5. Grid布局

1. 盒模型div标签-content box

image.png

默认指定的height和width指定的是内容的。

默认的box-sizing：content box 高度 宽度。

  • 取值：长度、百分数-根据当前盒模型content box、auto-根据内容计算，内容高度加起来。
  • ps：容器有指定高度时候，百分数才生效。例如： 父级有指定高度，或者一层层都用了百分数。

2. 另一种盒模型的概念-内边距

image.png

  • 10px-全部
  • 10px 20px-上下、左右
  • 10 20 10 20-顺时针一圈上右下左
  • padding也可以百分数-相对于容器宽度。

border

  1. 样式：none、soild、dashed、dotted。实线、虚线、点线

image.png

  • 当四条边框颜色不一样-是斜着切

image.png

应用：单独一个红色三角形-内容高宽为0，其他三个色透明。可以做各种各样形状的一个技巧

margin

image.png

应用

  1. margin 左边右边都auto-水平居中
  2. margin collapse边距合并规则
*第一个div* margin-bottom：100px;
*第二个div*  margin-top：100;

中间边距是100，只会取相对大的那个值

3. box-sizing:border-box

  • box-sizing:border-box包含border、padding在内的所有的宽度。
  • 里面的内容只能是减去border，再减去padding。

ps：

  1. 实际用border-box用的比较多
  2. 若盒子指定宽度高度，可以根据overflow属性处理溢出部分visible-可看见，hidden-隐藏，scroll-超出部分用滚动

6 块级vs行级-不同摆放的方式

1. 盒子-css概念

image.png

2. 元素-html概念

  • 可以根据display属性：block/inline来生成盒子 image.png

inline-block：可以与其他的一些行级元素一起在一行。但作为一个整体不能被拆散成多行。

none：布局时忽略。

image.png

3. 行级排版上下文IFC

  • 只包含行级盒子的容器会创建一个IFC

image.png div内只有行级的元素会创建一个IFC

ps：若一个单词太长在div中没换行可使用overflow-wrap：break-word;使得文字换行

  • Q:inline-block：是指本身可以和其他元素放在一行，但是自身的元素在一行里分行放置？

4. 块级排版上下文BFC

image.png

image.png

应用

  1. 如果不想margin合并：可以嵌套一个div更改属性overflow、display让其变为块级排版上下文。
  2. 一个盒子内只能都是行级或者都是块级。
  3. 若行级块级都含有，会创建匿名的盒子将其他的包裹起来。

image.png

这里体现了一个整体是一行，因为第一行的右边没有边框，最后一行的左边没有边框。

  • Q：两个空div会有margin合并现象，说明内部不符合BFC规则？

5. Flex box排版-比较灵活的布局方式，使用较多

  • 流式布局，单一方向布局方式

image.png

  • 控制子级盒子-根据一些属性
display：flex;//不再遵循BFC、IFC，可以利用flex的一些属性

flex-direction：默认是row，从左到右的排版。

row-reserve：从右到左。column：从上到下。

column-reserve：从下到上。

主轴和侧轴

  • 对齐方式：引入主轴和侧轴的概念（在BFS和IFS中是垂直和水平对齐）

1 根据justify-content更改

image.png

2 侧轴align-items默认是stretch完全撑开

image.png

3 align-self 可以给单独的一个盒子设置，比如全部都是flex-start，单独给一个设置flex-end。

4 order 利用该属性给元素进行排序，可以用css控制页面摆放方式。

flexibility-弹性 压缩伸展

  1. flex-grow-将元素剩余弹力空间根据伸展能力按比例分配、不代表真的空间比例，是'剩余空间'。
  2. flex-shrink-容器空间不够时，。进行比例压缩
  3. flex-basis-没伸展或者压缩时的基础长度。
  4. 这三个值可以缩写成flex属性
  5. auto-1 1 auto; none-0 0 auto;
  6. 不设置flex-basis会去读取优先设置的高宽度的值。

image.png

  • 多的属性直接看mdn文档

position - CSS: Cascading Style Sheets | MDN (mozilla.org)

6. Grid布局-二维的布局方式；

display:Grid;

  • Grid元素生成一个块级的Grid的容器
  1. 根据grid-template相关属性将容器划分为一个二维网格状
  2. 设置每一个子元素占哪些行/列。-可以占多个格子
grid-template-columns、grid-template-rows划分为n列n行//fr是指份数

grid line-如何划分。每条线编号

  1. 通过线编号来设置
  • 简便：grid-area属性

7 浮动 float

  1. 图片，图文环绕

8 绝对定位-top、bottom、left、right对于窗口定位。

  1. 例如有一个常规流，直接盖在常规流上，不对其有影响。

position:relative; 相对于自身原本位置偏移，原有位置会被占掉，但是是相对于原本'自身位置'。不脱离文档流。

  • relative：对于其他元素没影响，其他元素不动。好像原有位置还有那个元素。

absolute：相对于最近的非static祖先元素定位，忽略该元素存在。默认：static

flexd： 总是相对于窗口定位。可以用于导航条、返回顶部这些。

sticky： 原先不在最顶部，但是向下滑动顶到顶部不动。

avatar
文章
阅读
粉丝