对于前端来说，CSS需要精通十分的有难度的，就光对我来说，用的最多的也就是对象选择器了,对于其它来说只能说其用法都还不懂呢。。。。

CSS

属性选择器

<label>用户名</label>
<input value="name" thisname></input>

<style>
    [thisname] {
        background:#eee;
        color: #999;
    }
</style>

这里代表的是，只要有thisname这个属性就有其的样式

特定值——属性选择器

<label>密码</label>
<input type="password" value="123456"></input>

input[type = "password"] {
    border-color : red;
    color : red;
}

这个地方也可以一眼便可以看清楚,这里的属性多加了特定的input(输入框)及type的类型password

^=""表示属性寻找前缀，就表示当前样式

$=""表示属性寻找后缀，就表示当前样式

伪类选择器

伪类选择器触发，是在鼠标在对内容的时候触发。

通常在a上使用

:link 默认状态

:visited 已访问过状态

:hover 鼠标滑到内容上的状态

:active 鼠标按下的状态

:focus 当按下内容时，触发focus状态

通常在li上使用

:first-child 孩子们的第一个孩子

:last-child 孩子们的最后的一个孩子

选择器组

RGB

颜色 -HSL

Hue: 色相(H)是色彩鹅基本属性，如红色、黄色等；取值范围是0 ~ 360%;

Saturation: 饱和度(S)是指色彩的鲜艳程度，越高越鲜艳；取值范围0 ~ 100%;

Lightness: 高度(L)是指颜色的明亮程度；越高颜色越亮；取值范围是 0 ~ 100%;

alpha 透明度

#ff0000ff

rgba(255,0,0,1)

hsla(0,100%,50%,1)

字体

布局(Layout)

常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
浮动
绝对定位

width

指定content box 宽度
取值为长度、百分数、auto
auto取值由内容计算得来
百分数相对于容器得content box 高度
容器有指定的高度时，百分数才生效 (当一个容器中有明确的高度的时候，需通过百分数生效)

hegiht

指定 content box 高度
取值为长度、百分数、auto
auto取值由内容计算得来
百分数相对于容器的content box 高度
容器有指定的高度时，百分数才生效

padding

指定元素四个方向的内边距
百分数相对于容器的宽度

border

块级元素及行级元素

块级元素：display：block;

行级元素：display: inline;

Flex Box

justify-content

align-items

Flexibility

Grid布局

diplay: grid 使元素生成一个块级的Grid容器
使用 grid-template 相关属性将容器划分为网格

grid line 网格线 grid area 网格区域

菜鸡写前端文章——Day01

CSS