理解CSS理解CSS CSS知识回顾 css是什么用来定义页面元素的样式页面中使用css 外链嵌入内联 CSS是

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

`CSS`知识回顾

`css`是什么

用来定义页面元素的样式

页面中使用`css`

外链

<link rel="stylesheet" href="/assets/style.css"></link>

嵌入

<style>
 li{
     margin:0;
     lst-style:none;
 }
</style>

内联

<p style="margin:0 auto">
 hello
</p>

CSS是如何工作的

graph LR
    id1[加载HTML]-->id2[解析HTML]
    id2-->id4[创建DOM树]
    id2-->id3[加载css]
  	id3-->id5[解析css]
  	id5--添加样式节点到DOM节点-->id4
  	id4-->id6[展示页面]

选择器

标签选择器，类选择器，id选择器
属性选择器

例子

<label>用户名</label>
<input disabled value="summer" />
<label>密码</label>
<input type="password"/>
<a href="#top">回到顶部</a>
<a href="a.jpg">查看图片</a>

<style>
//属性选择器，例如，disabled和value=“summer”就全部都是input的属性
    [disabled]{//含义匹配所有disabled的属性的标签
        background:#eee;
        color:#999
    }
//属性也可以有写为这种
    [href^='#']{//意思是：以{#}开头的href属性值
        color:blue
    }
    [href$='.jpg']{//意思是：以{.jpg}结尾的属性值
        color:gray
    }
</style>

按照DOM树的位置
通配符

伪类

状态形伪类

<a href="#">点击</a>
<input/>
<style>
    a:link{//未访问的链接
        color:black
    }
    a:visited{//已经访问过的
        color:gray
    }
    a:hover{
        color:orange
    }
    a:active{//表示鼠标按下去之后是这个颜色
        color:red
    }
    input:focus{
        outline:2px solid orange//outline设置的是轮廓
    }
</style>

补充

p>hello</p>
<style type="text/css">
p 
{
border:red solid thin;
outline:#00ff00 dotted thick;//轮廓
}
    //轮廓位于border的外边
</style>

结构伪类

<ol>
    <li>hello</li>
    <li>你好</li>
    <li>summer</li>
    <li>夏天</li>
</ol>

li:first-child{//选父元素中的第一个li
color:black
}
li:last-child{//父元素中的最后一个li
border-bottom:none
}

组合选择器

名称	语法	说明	示例
直接组合	AB	选择同时满足A，B的标签	`input:focus`
后代组合	A B	选择A标签后面的所有B选择器	`nav a`
亲子组合	A>B	选择A的子元素B	`section>p`
兄弟组合	A~B	选择和A后面且和A同级的B	`h2~p`
相邻组合	A+B	选择紧跟在A后面的B	`h2+p`

选择器组

p,li,a{
    
}

颜色

rgb
hsl

hsl(色相，饱和度，亮度)

hsl(12,55%,23%),常用于点击按钮之类的，这样就可以直接调整亮度就可以了

rgba,a表示的是透明度

字体

font-family

serif和sans-serif等是一类字体，不是一个字体

font-weight

400表示不加粗

700表示加粗

font-size：字体大小

line-height:行高

布局

text-align

spacing

text-indent

white-space:空白符

normal:不会有空格
nowrap：一直不换行，一行显示全部
pre：显示空格，会换行
pre-wrap：显示空格，会换行
pre-line：显示换行，但是有多少空格都不会显示

`CSS`深入

优先级--特异度

	id	（伪）类	标签
`#nav .list li a:link`	1	2	2
`.hd ul:link a`	0	2	2

那么很显然，我们可以看到第一个的特异性更高 实现复用，我们一般使用特异度进行覆盖，从而实现复用

继承

某些属性不会自动继承其父元素的计算值，除非显式指定一个值

显示继承

html{
	box-sizing:border-box
}
*{
    box-sizing:inherit
}

初始值

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

当非继承元素没有设置值，或者继承元素没有找到值时，我们都会直接使用初始值

`css`求值过程

声明值：经过filtering(根据选择器的匹配等)之后，所匹配的元素的0或1个或多个属性值
层叠值：根据选择器的特异性，书写顺序等选择出优先级最高的那一个值
指定值：因为有些你可能没有指定，所以就需要使用初始值，总之指定值总会有一个值
计算值：在浏览器不进行实际布局也可以获得到的值，一般是那种url这种东西
使用值：在布局的时候计算出来的绝对的值，比如将一些百分数，关键字转化
实际值：渲染时实际生效的值，一般我们在这个时候就考虑一些小数点问题，一些media问题

布局（Layout）

常规流
- 行级(IFC)
  - 盒子在一行内水平摆放
  - 一行放不下，会换行
  - text-align决定一行盒子的水平对齐
  - vertical-align决定一个盒子在行内的垂直对齐
  - 避开float元素
- 块级(BFC)
  - 盒子从上往下摆放
  - 垂直margin进行合并
  - BFC内盒子的margin不会与外边的合并
  - BFC不会和浮动元素重叠（用于清除浮动）
- 表格布局
- flexBox
  - 定义在父级盒子上
    - flex-direction
      
      定义：决定主轴方向（项目的排列方向）
      - row：主轴为水平方向，起点为左端
      - row-reverse:主轴为水平方向，起点为右端
      - column：主轴为垂直方向，起点在上沿
      - column-reverse：主轴为垂直方向，起点为下沿
    - justify-content:flex-start|flex-end|center|space-between|space-around|space-evently 定义：定义了项目在主轴上的对齐方式（x轴）
      - flex-start:左对齐
      - flex-end:右对齐
      - center:居中
      - space-between:两端对齐，项目之间间隔相等
      - space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框大一倍
    - align-items:flex-start|flex-end|center|stretch|baseline
      
      定义：定义项目在交叉轴对齐方式（y轴）
      1. flex-start:交叉轴的起点
      2. flex-end:交叉轴的终点
      3. center：交叉轴的中点对齐
      4. baseline：项目的第一行文字基线对齐
      5. stretch：如果项目未设置高度，就占满整个容器的高度
    - flex:flex-grow、flex-shrink、flex-basis的缩写
    - flex-wrap
      
      定义：默认情况下，所有项目都排在一条线上。 flex-wrap就是定义了如何换行
      - nowrap：不换行
      - wrap：换行，第一行在上边
      - AAAAAAAAA
      - AAA
      - wrap-reverse：换行，第一行在下面
        
        9 10 11 12
        
        1 2 3 4 5 6 7 8
    - align-content
      
      定义：定义了多根轴线的对齐方式，如果项目只有一根轴线，那么属性不起作用
      - flex-start：交叉轴的起点对齐
      - flex-end：交叉轴终点对齐
      - center：交叉轴中点对齐
      - space-between：与交叉轴两侧对齐，轴线之间平均分布
      - space-around：每根轴线之间的间隔都相等，所以轴线之间间隔比轴线与边框的间隔大一倍
      - stretch：轴线占满整个交叉轴
  - 作用于个别
    - align-self:fkex-start|flex-end
    - order：定义项目的排序顺序，从小到大
      
      定义：允许单个项目与其他项目的不一样的对齐方式
      1. auto：继承父元素的align-items的属性，如果没有父元素，那么就是等同于stretch,占满整个容器的高度
      2. flex-start:交叉轴的起点
      3. flex-end:交叉轴的终点
      4. center：交叉轴的中点对齐
      5. baseline：项目的第一行文字基线对齐
      6. stretch：如果项目未设置高度，就占满整个容器的高度
- Grid布局:二维布局方式
浮动
定位

position属性
- static:默认值，非定位元素
- relative:相对定位，不脱离文档流
- absolute:绝对定位，相对于非static祖先元素定位
- fixed:相对于视口绝对定位

理解CSS

CSS知识回顾

css是什么

页面中使用css

选择器

颜色

字体

布局

CSS深入