这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
三种方式添加CSS
一、外部（外联）样式表
1.CSS保存在.css文件中
2.在HTML里使用引用
css选择器（developer.mozilla.org/en-US/docs/…）有很多种，最简单的选择方式为上图
他有两个属性（上图）
有三种选择HTML的方式（下图）
第一种:select直接指向p标签，让color变色
第二种:通过class（类）选择标签，HTML中有一个class叫paragraph，现在通过.paragraph通式选择class是paragraph的标签让颜色变红
第三种:选择id使用#的选择器的方式让那段变为红色
id和class的不同是id指的是HTML文件中唯一的一个，而class是可以将多个tag赋予同一个名字
将之前的文件包裹起来
再创一个container，把box1包裹进去如图
意为段落宽度占整个网页的80%且位置居中
修改整个网页的背景和字体颜色
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在标签内）使用标签将css样式文件链接到HTML文件内，如下面代码
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内
二、内部（嵌入）样式表
1.不使用外部CSS文件
2.将CSS放在HTML<style>里
嵌入式css样式，就是可以把css样式代码写在 <style type="text/css"></style> 标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间
三、内联样式（不推荐）
1.仅影响一个元素
2.在HTML元素的style属性中添加
内联式css样式表就是把css代码直接写在现有的HTML标签中
并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开
<p style="color:red;font-size:12px">这里文字是红色</p>
四、三种链接方式的优先级
内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。
其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下
五、补充权值
1.特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码，浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种CSS样式
规则标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低
选择器
每一条css样式声明（定义）由两部分组成，形式如下
选择器{
样式;
}
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
一、标签选择器
标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>
二、类选择器
类选择器在css样式编码中是最常用到的
语法
.类选器名称{css样式代码;}
注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/
三、ID选择器
1、使用ID选择器，必须给标签添加上id属性，为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号 # 号，而不是英文圆点 . 。
3、id属性的值既为当前标签的id，尽量见名思意，语义化。
类选择器与ID选择器的区别
相同点： 可以应用于任何元素 不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。 我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
四、子选择器
即大于符号(>),用于选择指定标签元素的第一代子元素
.food>li {
border: 1px solid red;
}
这行代码会使class名为food下的子元素li加入红色实线边框。
五、后代选择器（包含选择器）
即加入空格,用于选择指定标签元素下的后辈元素
.first span {
color: red;
}
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择
总结： > 作用于元素的第一代后代，空格作用于元素的所有后代
六、通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
* {
color: red;
}
七、伪类选择器
为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover {
color: red;
}
关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
八、分组选择器
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符，，如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}
相当于
h1{color:red;}
span{color:red;}
九、样式的继承
CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代
但注意有一些css样式是不具有继承性的
十、选择器的优先级
1、如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。
2、选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
十一、选择器的最高层级!important
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意：!important要写在分号的前面
样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式
字体
font-family字体
font-family:Arial,Helvetica,sans-serif;
1.Arial是一个字体族名，也叫字体名，由两个或者两个以上的单词组成的字体名需要加双引号，一个单词组成的字体名不需要加双引号
2.Helvetica也是字体名
3.sans-serif是无衬线字体
font-family:"Gill Sans",sans-serif;
1."Gills Sans"也是一个字体名
font-family:"Times New Roman",serif;
1."Times New Roman"也是一个字体名
2.serif为有衬线字体（字体的棱角部位有一些好看的修饰，例如宋体）
font-family:Didot,serif;
font-family:"Andale Mono",monospace;
font-family:"IBM Plex Mono",monospace;
例如
font-size字体大小
font-weightziti粗细
normal是正常粗细
bold是加粗
上图三行也可缩略为一行如下图
若要更改box1,h1中的字体，则（第三大块）
font-style字体样式
italic是字体属性是斜体，用于字体本身就有倾斜的样式。
oblique是字体倾斜，与斜体有区别，强制将字体倾斜
normal是默认值，为正常字体
color字体颜色
1.关键词
black,silver,white等
2.十六进制值
原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff
#ff0000等
3.RGB
red,green,blue，三个值表示红绿蓝，每一个颜色的取值在0~255，所以共有256个值可以选择
rgb(255，0，0)等
4.RGBA
A为α通道，最后多了一个逗号和一个值
这个值在0~1之间，0代表完全透明，1代表完全不透明
rgb(255，0，0，0.5)等
5.HSL
Hue, Saturation, Lightness，三个值表示色相，饱和度，亮度
色相在0~360°之间，0°代表红色，120°代表绿色，240°代表蓝色
饱和度0%为完全没有饱和度，任何一个颜色在0%的饱和度时都会显示灰色
在100%的饱和度时会显示为颜色的全彩
亮度任何一个颜色亮度在0%时都会显示黑色
在100%时都会显示白色
hsl(0,100%,50%)等
6.HSLA
A为α通道，最后多了一个逗号和一个值
这个值在0~1之间，0代表完全透明，1代表完全不透明
hsl(0,100%,50%,0.5)等
7.相关知识的网址
developer.mozilla.org/en-US/docs/…
8.font样式的简写
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛
例如
body{
font-style:italic;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
body{
font:italic bold 12px/1.5em "宋体",sans-serif;
}
text-decoration文本修饰
1、text-decoration可以设置添加到文本的修饰。
2、text-decoration默认值为none, 定义标准的文本。
3、text-decoration的值为underline为定义文本下的一条线。
4、text-decoration的值为overline为定义文本上的一条线。
5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。
text-indent首行缩进
注意：2em的意思就是文字的2倍大小
text-height行间间距
letter/word-spacing字符间的空白
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现
h1{
letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>
这个样式使用在英文单词时，是设置字母与字母之间的间距。
英文单词之间的间距可以使用 word-spacing 来实现
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
text-transform：uppercase是给文本添加大写效果
效果如下
text-align文本对齐方式
为块状元素中的文本、图片设置居中样式
长度值总结
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位
1.像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位
2.em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。
注意但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）
3.百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）
相关网址
developer.mozilla.org/en-US/docs/…
thetype.com
元素分类
一、块状元素
常用
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
特点
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
二、内联元素（行内元素）
常用
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
div{
display:inline;
}
......
<div>我要变成内联元素</div>
特点
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
三、内联块状元素
常用
<img>、<input>
就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
特点
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
none
none设置此元素不会被显示，当想要元素隐藏的时候可以使用此值。
盒子模型（box）
border：边框
padding：内边距（content与border之间的距离）
margin：外边距
但是当很多个盒子在一起时是如图
当两个盒子靠在一起时，他们的外边距只会取两个盒子之间最大的一个外边距作为他们两个之间的外边距，所以说外边距只会有一份不会有两份，这种行为叫做外间距塌陷或者外间距重叠或者外间距合并
内容范围（宽度和高度）
css内定义的宽（width）和高（height），指的是填充以里的内容范围
一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
元素的高度也是同理
css:
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
html
<body>
<div>文本内容</div>
</body>
背景色
网页中的标签不论是行内元素还是块状元素都可以给它设置一个背景色
div{background-color:red;}//为块状元素设置
a{background-color:green;}//为行内元素设置
margin如何指定外间距
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左
padding和margin的区别，padding在边框里，margin在边框外。
margin和padding的使用是很类似的
以margin为例
p{
margin-top : 5px ;
margin-bottom : 5px ;
margin-right : 10px ;
margin-left : 10px;
}
上下五个像素，左右十个像素
更简单的三种方式
1.
p{
margin : 5px 10px 5px 10px;
}
第一个5指的是margin-top
第二个10指的是margin-right
第三个5指的是margin-bottom
第四个10指的是margin-left
按照上右下左的顺时针的顺序指定的，一定要注意每个数字之间要用空格隔开，最后要用分号标明
2.
p{
margin : 5px 10px;
}
第一个5指的是上下边距margin-top和margin-bottom
第二个10指的是左右边距margin-right和margin-left
上下边距一样，左右边距一样的时候可以使用这种形式
如果上下左右边距全一样则可以写为
P{
margin : 5px;
}
3.
p{
margin : 5px 10px 5px;
}
第一个5指的是上边距margin-top
第二个10指的是左右边距margin-right和margin-left
第三个5指的是下边距margin-bottom
可以用于上下边距不同但是左右边距相同的情况
padding如何指定内边距
与margin相同，把所有的margin改为padding即可
元素内容与边框之间是可以设置距离的，称之为“内边距（填充）”。填充也可分为上、右、下、左(顺时针)
border如何指定边框
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性）
注意
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用像素（px）。
例如给box1指定边框
效果：
例二：
再次更改某一部分的宽度
继续更改
所有的形式都以最新的定义的为标准
继续加
内边距增加（不明显），可右键进入检查看
box1的内容太贴近上方：利用指定外边距来使整体往下移
雀氏往下移了
圆角border-radius
圆角可分为左上、右上、右下、左下
div{border-radius: 20px 10px 15px 30px;}
或者
div{
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 30px;
}
值顺序为左上右上右下左下
如果四个圆角都为10px;可以这么写：
div{ border-radius:10px;}
如果左上角和右下角圆角效果一样为10px，右上角和左下角圆角一样为20px，可以这么写：
div{ border-radius:10px 20px;}
需要特别注意的：一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形。例如：
div {
width: 200px;
height: 200px;
border: 5px solid red;
border-radius: 100px;
}
也可以写为百分比50%
div {
width: 200px;
height: 200px;
border: 5px solid red;
border-radius: 100px;
}
对第二个box也做一些改动
因为加了border-radius属性，所以后面的值越大，框框的圆角越圆
把标题二移到中间位置
布局模型
布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS3 布局样式或 CSS3 布局模板。如果说布局模型是本，那么 CSS3 布局模板就是末了，是外在的表现形式。
一、Flow流动模型
是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
特征
1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%**。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
2.在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
二、Float浮动模型
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
三、Layer层模型
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
1.绝对定位position:absolute
作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
也可以做上下左右的值的偏移，但是通常情况下他会和relative一起去使用，也就是说他会把relative的定位作为一个参考，然后来做偏移
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div> /*可以实现div元素相对于浏览器窗口向右向下移动*/
还是以第二段文字为例
此时他的top100px是从整个页面开始来看的，
absolute在没有上下文relative时，是参考当前是视窗页面做偏移的
修改标题
此时需要添加东西
relative是相对位置，他先有一个应该在的地方，在相对它应该在的地方进行偏移；absolute就是绝对位置，只与后面给的left，right这些有关
2.相对定位position:relative
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动， 移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动
如下代码实现相对于以前位置向下移动50px，向右移动100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
偏移前的位置保留不动：
从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。
和静态定位相似，都可以指定top，left，right等做偏移
以box2为例
发现第二段文字向下向左偏移且与下面的字粘在一起，但是他本身的原来的位置还依然被保留着
3.固定定位position:fixed
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
相对于窗口，视窗做定位
例如以一个button为例
如果想要将button固定在整个页面的最下角且位置不变
4.absolute和relative组合使用
使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
flex弹性盒子模型
1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上，改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。
1.justify-content属性（横轴排列方式）
本属性定义了项目在主轴上的对齐方式。结合上一节的布局例子进行理解，属性值分别为：
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start：交叉轴的起点对齐
.box {
background: blue;
display: flex;
justify-content: flex-start;
}
实现效果：
flex-end：右对齐
.box {
background: blue;
display: flex;
justify-content: flex-end;
}
实现效果：
center： 居中
.box {
background: blue;
display: flex;
justify-content: center;
}
实现效果：
space-between：两端对齐，项目之间的间隔都相等。
.box {
background: blue;
display: flex;
justify-content: space-between;
}
实现效果：
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
.box {
background: blue;
display: flex;
justify-content: space-around;
}
实现效果：
2.align-items属性（纵轴排列方式）
本属性定义了项目在交叉轴上的对齐方式。属性值分别为：
align-items: flex-start | flex-end | center | baseline | stretch;
结合右侧编辑器中的布局以及下面的样式设置进行理解：
flex-start：默认值，左对齐
.box {
height: 700px;
background: blue;
display: flex;
align-items: flex-start;
}
实现效果：
flex-end：交叉轴的终点对齐
.box {
height: 700px;
background: blue;
display: flex;
align-items: flex-end;
}
实现效果：
center： 交叉轴的中点对齐
.box {
height: 700px;
background: blue;
display: flex;
align-items: center;
}
实现效果：
baseline：项目的第一行文字的基线对齐。
.box {
height: 700px;
background: blue;
display: flex;
align-items: baseline;
}
三个盒子中设置不同的字体大小，可以参考右侧编辑器中的代码进行测试。
实现效果：
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
.box {
height: 300px;
background: blue;
display: flex;
align-items: stretch;
}
.box div {
/*不设置高度，元素在垂直方向上铺满父容器*/
width: 200px;
}
实现效果：
3.给子元素设置flex占比
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。
水平居中设置
分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。
1.行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
html代码：
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
css代码：
<style>
.txtCenter{
text-align:center;
}
</style>
2.块状元素
1.定宽块状元素
(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
html代码：
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
css代码：
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
也可以写成：
margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin” 是可以随意设置的。
已知宽高实现盒子水平垂直居中
通常使用定位完成，例如想要实现以下效果：
我们有如下两个div元素
要实现子元素相对于父元素垂直水平居中,我们只需要输入以下代码：
技术点的解释：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：
3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。
2.不定宽块状元素
宽高不定实现盒子水平垂直居中
通常使用定位以及translate完成。参考下面例子：
<div class="box">
<div class="box1">
慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网
</div>
</div>
添加样式：
.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;
}
.box1 {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
效果如下：
技术点的解释：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%。
3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。
表单
效果
图标太大，改改
点击图片编辑自定义大小改为10*10，刷新
但是他除了image也还有很多自带的style
按钮
在第二段中按一个按钮
先做一点装饰
继续改变他的一些状态
意为当鼠标放在button上面的时候，他会变为红色（若是鼠标在其他位置则还是黑色）
意为当鼠标点击按钮时，他会变成白色（没有覆盖上两步操作）
因为button是一个tag，所以如果把他在第一段也cv一下，两段的button的状态就会一样
解决方法：加class或者id，指定给某一个按钮添加样式
超链接
给刚才的增加超链接
为默认样式
改样式
进入style.css
第一段：没有下划线
第二段：鼠标覆盖在它上面时字体改变成的颜色
第三段：访问过该网址之后的字体颜色
在表单下复制粘贴三段一样的文字
做修饰
变化不明显
给他添加边界
但是
这是因为添加了边界之后他就无法达到33.3%的宽度，所以第三大列自动往下移了
解决：
添加box-sizing
意思是他是一个有边框的box，效果如图
最后使用
将网页整体往上推
再来两段文字试一试
看起来一切正常，给他们加一个边框
出问题了，同样，我们需要使用boxsizing：borderbox解决这一问题
使用完float之后一定需要注意的一点是一定要在每一个不需要使用float之后加上clear，要清楚这个浮动，一般的做法是在好几段使用float的文字段下面使用clear或者clearfix，如下图
然后在style里面
注意40是.clearfix不是.clear
clear：both中的both指的是left和right
选择器的选择方式
在container中写点
修饰
定位
static-静态定位
所有元素都默认的一种定位方式
sticky
例如导航栏一样随着页面的滚动但是会粘在视窗的最顶部
developer.mozilla.org/en-US/docs/…
CSS语法
css 样式由选择符和声明组成，而声明又由属性和值组成
选择符： 又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明： 在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔
注意：
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内
注释
/*注释*/
CSS3
CSS3是CSS2的升级版本
CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。
CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。
选择器
以前我们通常用class、 ID 或 tagname 来选择HTML元素，CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。
圆角效果
以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了 border-radius 帮你轻松搞定。
块阴影与文字阴影
可以对任意DIV和文字增加投影效果。
色彩
CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL ， CMYK ，HSLA and RGBA。
渐变效果
以前只能用Photoshop做出的图片渐变效果，现在可以用CCS写出来了。IE中的滤镜也可以实现。
个性化字体
网页上的字体太单一？使用@Font-Face 轻松实现定制字体。
多背景图
一个元素上添加多层背景图片。
边框背景图
边框应用背景图片。
变形处理
你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。
多栏布局
可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。
媒体查询
针对不同屏幕分辨率，应用不同的样式。
等等
CSS3使代码更简洁、更高效。可以极大的提高工作效率，打造更高级的用户体验。使web应用的界面设计进入一个新的台阶。
