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

CSS（cascading style sheet）

选择器

css 三种选择器

标签选择器
id选择器
类选择器

属性选择器

[disabled] {
    background: #eee;color: #999;
}

<input>

disable
<input value="zhao" disable>  属性应该用 “罩起来”  
<style>{
	[disable]{
		background:#eee;
	}
	input[type="password"]{
		color red
	}
}

<a>

href的选择

a[href^="#"]  表明 以#开头的话就会被匹配上
a[href$=".jpg"] 表明 以指定的结尾结束的话就会被匹配上
就可以设定相应的样式

伪类选择器

通过选择 a 的伪类选择器来设置css
:link
:visited
:hover
:focus
:active

复合选择器

element1 + element2：选择紧跟 element1 的 element2 元素。

颜色

RGB

最常用的

HSL

Hue Saturation Lightness

alpha 透明度

字体

通过通用字体族就会一层一层匹配一如这一层没有就会乡下寻找下一个字体

h1{
    font-family: Optima, Georgia, serif;
}

通用字体族

##line—height（与基线有关）

权重（特异度）

4、在CSS中权重最低的是哪一项 A #game div B #game .name C #game .name span D #game div .name

默认有边距的元素

HTML元素margin、padding的默认值

element	margin(单位像素)	padding的默认值
html	0	0
body	8	0
h1 ~ h6	有	0
p	16 0 16 0	0
ul	16 0 16 0	0 0 0 40
li	0	0
td	0	1
dl	16 0 16 0	0
dt	0 0 0 40	0

body,h1,h2,h3,h4,h5,h6,p,ul,dl,dd{
	margin:0;
	padding:0
}

以下那几个标签默认有padding 值（）

```
body
```
```
div
```
```
form
```
```
img
```

没有正确答案

A C D有margin 没有padding

垂直居中

设定margin:0 auto；或是text-align:center；

BFC 是什么？

BFC（会计格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠的问题。

BFC 是值浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

border-radius

border-radius:100% 效果等于 border-radius：50%；

但是动画会有所不同

em和rem

rem （root）em 与html的根的font-size有关
em 与父元素的 font-size有关首先与自己的有关
em先查询自己是否有font-size 如果没有在查询父元素

flex

常见的盒子垂直居中的方法有哪些请举例 3 种？

1. 利用子绝父相定位的方式来实现

#container {
  width: 500px;
  height: 500px;
  position: relative;
}
#center {
  width: 100px;
  hight: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

2. 利用 Css3 的 transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

#container {
  position: relative;
}
#center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. flex

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#center {
}

栅格系统布局 优点：可以适用于多端设备

课后个人总结

通配符选择器？ a的匹配href ^= *= 的区别

参考引用

前端常见面试题（56道） - 掘金 (juejin.cn)

Web——2.CSS - AcWing

css重温|青训营笔记