理解CSS

CSS是什么？

Cascading Style Sheets
用来定义页面元素的样式
设置字体和颜色
设置位置和大小
添加动画效果

页面中使用CSS的三种方法

外链（推荐）

<!--外链--> <link rel="stylesheet"href="/assets/style.css">

嵌入（组件式开发常用）

<!--嵌入--> <style> li margin:0;list-style:none; p margin:lem 0;} </style>

内联

<!--内联--> <p style="margin:1em 0">Example Content</p>

CSS是如何工作的？

CSS选择器

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置

通配选择器：对页面中所有元素生效

* {
    margin: 0;
    padding: 0;
}

标签选择器

h1 {
    color: red;
}

id选择器(id是唯一的）

#logo {
    font-size:60px;
    font-wight: 200;
}

类选择器（class可重复使用，所以是常用的办法）

.done {
    color: gray;
}

属性选择器，根据元素的属性来设置样式

<input value="zhao" disabled>
<input type="password" value="123456">
<style>
    [disabled] {
        background: #eee;
        color: #999;
    }
    
    input[type="password"] {
        border-color: red;
        color: red;
    }
</style>

上面第二种方式是对属性的值来选择，当某个标签中的某个属性的值等于某个值时选择出来也可以通过匹配的方式来选择属性值.

^=表示以某某开头
$=表示以某某结尾

<p><a href:="#top">回到顶部</a></p>
<p><a href:="a.jpg">查看图片</a></p>
<style> 
    a[href^="#"] {
    co1or:#f54767;
        background:0 center/1em url(https://assets.codepen.io/59477/arrow- up.png)no-repeat; 
        padding-left:1.1em;
    }
    a[href$=".jpg"] { 
    color:deepskyblue;
        background:0 center/1em url(https://assets.codepen.io/59477/image3.p ng）no-repeat; 
        padding-left:1.2em;
    }

伪类选择器能选择不同状态下的标签，用户在和元素交互时会处于不同状态，不同的状态需要表现的样式不同时，可以使用伪类选择器.

a链接的伪类和状态

link 默认状态
visited 访问后的状态
hover 鼠标悬浮状态
acive 鼠标按下去的状态

input输入框的状态

focus 聚焦状态

a:link {
    color:black;
}
a:visited {
    color:gray; 
}
a:hover {
    color:orange; 
}
a:active {
    color:red;
}
:focus { 
    outline:2px solid orange;
}

除了状态伪类选择器，还有结构伪类选择器，它能根据元素在dom树中的位置来选择

first-child 第一个子标签
last-child 最后一个子标签

<ol> 
    <Li>阿凡达</1i>
    <Li>泰坦尼克号</1i> 
    <1i>星球大战：原力觉醒</Li>
    <1i>复仇者联盟3</Li> 
    <11>侏罗纪世界</11>
</o1>
<style>
1i {
    list-style-position:inside;
    border-bottom:1px solid;
    padding:0.5em;
   } 
li:first-child { 
    color:coral 
   }
li:last-child {
    border-bottom: none;
}
<style>

选择器的组合

选择器组，当某些选择器的样式完全相同时，可以写成选择器组

body,h1,h2,h3,h4,h5,h6,ul,ol,li {
    margin:0;
    padding:0; 
}
[type="checkbox"],[type="radio"] {
    box-sizing:border-box;
    padding:0;
}

经常用css修饰的属性

颜色

RGB 红绿黄
HSL H：色相， S：饱和度， L：亮度
alpha 不透明度0 - 1

字体

font-family

通用字体族

Serif衬线体： Georgia、宋体
Sans-Serif无衬线体： Arial、Helvetica、黑体、微软雅黑
Cursive手写体： Caflisch Script、楷体
Fantasy： Comic Sans MS,Papyrus,
Monospace 等宽字体： Consolas、Courie、中文字体

font-size 字体大小

font-style 字体样式

font-weight 字的粗细（100-900）

line-height 行高（基准线之间的距离）

white-space 对空格和换行的处理

normal 有空格和换行，但是多的空格和换行会合并
nowrap 强制不换行
pre 保留原有的空格和换行
pre-wrap 保留原有空格，换行会合并
pre-line 保留原有换行，但是空格会合并

深入CSS

CSS的特异度和优先级

blog.csdn.net/Mq_sir/arti…

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。例如字体相关的属性都是可以继承的，但是盒模型的属性（宽度、高度等）是不可继承的。

可以通过给属性设置inherit来强制某个属性继承

* {
    box-sizing: inherit;
}

初始值

当没有指明样式，也没有样式可以继承时，就会表现为初始值 CSS中，每个属性都有一个初始值

background-color的初始值为
- transparent
- margin-left的初始值为0
可以使用initial关键字显式重置为初始值
- background-color:initial

布局（layout）

盒模型

content-box

width/height
- 指定content box宽度/高度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的content box宽度/高度
padding
- 指定元素四个方向的内边距（border和content之间的距离）
- 百分数相对于容器宽度
border
- 指定容器边框样式、粗细和颜色
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
- margin collapse，元素之间的边距不会简单相加，而是取最大值
overflow 超出部分的显示
- visible
- hidden
- scroll

border-box

和content-box不同，border-box的width和height指的是border的宽高

常规流

根元素、浮动和绝对定位的元素会脱离常规流，其它元素都在常规流之内(in-low) 常规流中的盒子，在某种排版上下文中参与布局

行级

和其他行级盒子一起放在一行或拆开成多行
盒模型中的width和height不适用
行级排版上下文
- Inline Formatting Context(IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
  - 盒子在一行内水平摆放
  - 一行放不下时，换行显示
  - text-align决定一行内盒子的水平对齐 ·
  - vertical-align决定一个盒子在行内的垂直对齐
  - 避开浮动(float)元素*

块级

不和其他盒子并列摆放
适用所有的盒模型属性
块级排版上下文
- Block Formatting Context (BFC)
- 某些容器会创建一个BFC
  - 根元素、浮动、绝对定位、inline-block
  - Flex子项和Grid子项
  - overflow值不是visible的块盒
  - display:flow-root;
- BFC内的规则
  - 盒子从上到下摆放
  - 垂直margin合并
  - BFC内盒子的margin不会与外面的合并
  - BFC不会和浮动元素重叠

行级元素

生成行级盒子
内容分散在多个行盒(line box)中
span em strong cite code 等
display: inline

块级元素

生成块级盒子
body article div main section h1 p ul li等
display: block

行内块元素

本身是行级，可以放在行盒中
可以设置宽高
作为一个整体不会被拆散成多行
display: inline-block

表格布局

FlexBox

一种新的排版上下文
它可以控制子级盒子的：
- 摆放的流向（→←↑↓）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
- flex-grow有剩余空间时的伸展能力
- flex-shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度