CSS
这是我参与「第四届青训营 」笔记创作活动的的第1天
CSS的作用：用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
使用CSS的方式（三种）
```<! --外链-->
<link rel= " stylesheet" href= " / assets / style.css" >
<! -―嵌入-—之
< style>
li {margin : 0 ;list- style : none;}p {margin : l em 0 ;}
</ style>
<!—内联-->
<p style= " margin: 1 em 0 " >Example Content</ p>
复制代码
CSS选择器（Selector）
-
找出页面中的元素，以便给他们设置样式
-
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
伪类（pseudo-classes）
-
不基于标签和属性定位元素
-
几种伪类
- 状态伪类
- 结构性伪类
颜色-HSL
-
Hue
- 色相(H)是色彩的基本属性,如红色、黄色等;取值范围是0-360.
-
Saturation
- 饱和度(S)是指色彩的鲜艳程度，越高约鲜艳;取值范围0-100%。
-
Lightness
- 亮度(L)指颜色的明亮程度;越高颜色越亮;取值范围是0-100%。
font-family使用建议
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
font-size
-
关键字
- small、medium、large
-
长度
- px、em
-
百分数
- 相对于父元素字体大小
调试CSS
-
右键点击页面，选择【检查】
-
使用快捷键
- Ctrl+Shift+I（Windows）
- Cmd+Opt+I（Mac）
CSS的继承
- 某些属性会自动继承其父元素的计算值，除非显式指定一个值
初始值
- CSS中，每个属性都有一个初始值
- 可以使用initial关键字显式重置为初始值
布局（Layout）
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
-
常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
-
浮动
-
绝对定位
width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
border
- 指定容器边框样式、粗细和颜色
margin
- 指定元素四个方向的外边距
- 取值可以使长度、百分数、auto
- 百分数相对于容器宽度
块级元素
- 不和其他盒子并列摆放
- 适用所有的盒模型属性
行级元素
- 和其他行级盒子一起放在一行或拆开成多行
- 盒模型中的width、height不适用
display属性
- block
- inline
- inline-block
- none
常规流Normal Flow
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其它元素都在常规流之内（in-flow）
- 常规流中的盒子，在某种排版上下文中参与布局
Flex Box
-
一种新的排版上下文
-
它可以控制自级盒子的：
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
position属性
- static： 默认值，非定位元素
- relative： 相对自身原本位置偏移，不脱离文档流
- absolute： 绝对定位，相对非static祖先元素定位
- fixed： 相对于视口绝对定位
学习CSS的建议
- 充分利用MDN和M3C CSS规范
- 保持好奇心，善用浏览器的开发者工具
- 持续学习，CSS新特性还在不断出现
