css书写顺序：
盒子模型属性
文字样式
圆角阴影
（十五）标准流（文档流）
标签在页面中默认的排布规则（如：块元素独占一行，行内元素可一行显示多个）
（十六）浮动
1.让块级元素水平排列
属性名：float
属性值：left（左对齐）、right（右对齐）
特点：顶对齐 具有行内块的特点（加宽高有效），图中img为行内级标签（加宽高无效）
注：1.浏览器会认为加了浮动的块元素不存在（因为该元素脱离了标准流的范围）因此
当只有一个块元素加浮动时会出现以下情况：（脱标现象）
因此要么都用浮动，要么都不用
2.如果父级的宽度不够，浮动会跳到下一行，解决方式：增大父级宽度（可通过减小外边框，内边框方式）
练习经验：遇到多个小型块元素时大多用无序列表来排列，注意消除项目标记list-style:none;
2.清除浮动：（清除浮动带来的影响）
浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度，将导致页面布局错乱
（父级没有高度，浏览器将认为父级不存在，不显示父级）
解决方法：
（1）.额外标签法（了解）
在父元素内容的最后添加一个块级元素，设置css属性 clear:both;（清楚左右两侧浮动，也可left/right）
一般设这个块级元素的类名为clearfix（作用为清除浮动）
（2）.单（伪元素)法
也是在父级元素最后加块级标签，设置clear:both; 但是用伪元素法
.clearfix::after {
content="";
display:block;
clear:both;
}
（3）.双伪元素法（推荐）
before 解决外边距坍陷问题，after 清除浮动
.clearfix::before,.clearfix::after {
content:'';
display:table;
}
.clearfix::after {
clear:both;
}
（4）.overflow
父级元素添加CSS属性 overflow：hidden；
（浏览器会查找父级范围因而能找出隐藏的父级并显示）
拓展：浮动本质作用时实现图文混排效果
（十七）Flex布局
1.简介
Flex布局也叫弹性布局，适合结构化布局，不会产生脱标现象，使页面布局更简单，更灵活。（父级盒子会被内容撑开）
设置方式：display:flex; 子元素可以自动挤压或拉伸。
组成部分：弹性容器、弹性盒子、主轴（默认水平方向，弹性盒子默认主轴排列）、侧轴/交叉轴（默认为垂直方向）
2.主轴对齐：（默认水平）
属性名：justify-content
属性值：
space-between：浏览器将父级(容器)剩余部分平均分配给了间距。（弹性盒子之间的距离相等）
space-around：间距出现在弹性盒子的两侧，弹性盒子之间的距离时两端的两倍。
space-evenly：各个间距均相等。
3.侧轴对齐（默认垂直）
属性名：align-items:弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
stretch：若盒子在侧轴方向有尺寸则该属性值无效（常用）
center(常用)
4.修改主轴方向
属性名：flex-direction
属性值：
5.弹性伸缩比（*）
作用：控制弹性盒子的主轴方向（默认水平）的尺寸
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数。
默认情况下，主轴方向（默认水平）的尺寸是靠内容撑开，侧轴默认拉伸。
6.弹性盒子换行
弹性盒子可以自动挤压或伸缩，默认情况下，当大量弹性盒子都在一行显示，各自的宽度会自动缩小。
属性名：flex-wrap；
属性值：wrap（默认情况nowrap）
7.行对齐方式
属性名：align-content
属性值：（与主轴相同）
注：对单行不生效（因此需要和flex-wrap:wrap;连用）
images：存放固定使用的素材（logo 、样式修饰图）
uploads：存放非固定使用的图片（商品图、宣传图，需要上传的）
base.css:基础公共样式（可在网络上直接搜）
index.css:自定义样式
版心类名：wrapper
（二）制作步骤
1.布局思路： 2.css规划思路：
整体->局部 画布局（宽高背景色）
外->内 实现布局（flex，内外边距）
上->下 细节定位（图片，文字等）
左->右
（三）首次制作细节总结
1.logo 制作技巧
logo功能:
单击跳转跳转到首页
搜索引擎优化：提升百度搜索排名
实现方法：
标签结构：h1>a>网站名称（搜索关键字，需隐藏）
html代码：
<h1 class="logo">
<a href="">学成在线</a>
</h1>
css代码：
.logo {
width:
height：
background-image:url("");
/隐藏关键字/
font-size:0;
}
2.导航制作技巧
功能：单击跳转
实现方法：
标签结构：无序列表加超链接形式
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
3.给某个容器添加flex布局时，子级空间会撑大到整个父级固定好的高度/宽度/空间
关于flex:1 的理解-----还没太看懂，但是若一个弹性容器内只有一个弹性盒子设置了flex:1,那么该元素将占用除开其他元素所占空间外的全部空间。
flex:为flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis的缩写，默认值为：0 1 auto;
4.background-color:transparent；设置背景色透明
5.outline:none;可去掉焦点框
以下的黑框为焦点框，当点击输入框时显示，
6.当需要改变input中的placeholder的字体属性时可用
input::placeholder {
font-size:;
color:
}
注：不需要写content=""。
7.当父级设置为flex布局时，子级中的元素都将成为一个个的弹性盒子（加宽高生效）
如：a、img这样的行内元素，在父级为flex布局的情况下，设置宽度和高度也生效。
如同块级元素。
8.单行文字居中可用：
line-height:父级行高;<!--类似于垂直居中-->
text-align:center;<!--行内块和行内水平方向对齐方式-->
vertical-align:middle;<!--行内块和行内垂直方向对齐方式-->
9.在flex布局下，父级内所有元素居中
主轴居中:justify-content:center;
侧轴居中:align-content:center;
指定元素侧轴居中:align-self:center;
10.margin: 0 auto;
让块级元素以及它里面的所有元素在页面居中显示。
11.块级元素默认宽度是父级宽度的100%（除去内边框），行内级元素高度靠内容撑开（如设置ul li中的a<!--超链接标签-->中文字属性和边框）
12.重点短句可用<strong></strong>标签包裹
13.数字变量、小的图样可用<i></i>标签包裹