首先是导航，它是一个网页的header,我们把它放在nav 里，在加一个ul 无序列表。
后面的内容，先划分区块。划完之后在填写内容。
transform : rotate ( 40 deg ) ; 变形 旋转 40 度
| | |
变形 旋转 度
transform : scale (0.5) ; 缩小 0.5
transform : scale (0) ; 放大 5
盒模型 ：
块级 元素：
1 占据所有可用度，以换行开始；
2 通常用于比较大的内容块，比如标题或结构元素；
例 ：div p h1-h6 hr br ul li 语义化/语义化结构元素
行内元素：
1 只占据内容所需的宽度，在同一行内一个接一个摆放；
2 通常用于比较小的内容块，如被设置为一些粗体或者斜体的一些词。
例 ： span a i em b strong img input label
属性：dispiay : line-bork
是否能继承 ：否
默认值：inline
maargin 外边距：与其他盒子之间的距离；
border 边框 ：
padding 内边距 ：边框与内容之间的可选距离；
content 内容的高度和宽度
content
overflow : hidden 如果溢出 就隐藏
overflow : scroll
overflow : auto
设置当前元素在浏览器的最大和最小宽度
max-width : ;
min-width : ;
设置当前元素在浏览器的最大和最小高度
max-height : ;
min-height: ;
可视化模式：
视觉格式化模型是一种机制，规定了页面中多个盒子的排列，相互影响，最终尺寸及位置由大量的CSS规范组成，规定元素如何布局。
包含快：
1 每个元素都有一个包含块，它是一个区域，元素在页面中摆放的区域。
2 通常情况下元素的包含块是它的父元素的内容盒 content-box.
3 根元素没有父元素所以它的包含块是初始化包含快（ html ），它的摆放区域是整个区域。
视觉格式化模型规定了三种定位体系：
1常规流（常规流文档）
2浮动
3 绝对定位
定位体系的判断：开始 ——判断 position 的值是absolute或者fixed —— 是 ——绝对定位—— 结束
—— 否 —— 判断float的值是left 还是right —— 是 —— 浮动 —— 结束
—— 否 ——常规流——结束
怎么让一个包含快/区 居中： （先给值，可设置宽度）
水平方向：margin: auto;
width :10px;
垂直方向：margin 为auto:o
height为 auto:适应高度
浮动:脱于常规文档流
当元素的Float属性值为left或right时 元素为浮动元素 默认值：none
浮动盒子的位置：float :left左浮动 float:right 右浮动
1 左浮动的盒子向上向左排列 ：先往上走，在往左走；
2 右浮动的盒子向上向左排列 ：先往上走，在往右走；
3 浮动盒子的顶边不得高于上个盒子的顶边；
4 若剩余空间无法放下剩余的盒子，则盒子向下移动，直到具备足够的空间容纳盒子，然后在向左向右移动。
当常规流的盒子遇上浮动：
1浮动盒子会避开常规流盒子；
2常规流盒子会无视浮动盒子的摆放；
3常规流盒子的自动高度计算时，无视浮动盒子；
高度塌陷：常规流盒子的高度无视浮动盒子
清除浮动：对一个元素清除浮动，可以让该元素在摆放时，出现在浮动元素的下方。
clear
是否可继承：否
默认值：none 不清除
取值 ： clear:none 不清除
clear: left 清除左浮动
clear: right 清除右浮动
clear: both 全部 清除
对最后一个元素使用： clear: both 防止父元素，高度塌陷
绝对定位：absolute 包含块必须要有一个position ,一层一层的向上找；
绝对定位：把原来的位置空出来，脱离文档流；固定文档流也是一样。
固定定位： fixed 固定不变，把原来的位置空出来。
相对定位：元素原始位置进行偏移量的增减，并继续占用元素原有位置的空间。
Z-index ：1 设置Z轴方向的层级（顶层或底层）
要求：Z-index 要与position 一起用。
值越大，越往上。
opacity ：0；
opacity ：1；
transition:all 2s;
导航列表的特效：
css里所书写格式：
ul>li: last-child: hover li :nth-of-type(1){
transition-delay:0s;(延迟0秒)
opacity:1;
transorm:none 没有变换
}
ul>li: last-child: hover li :nth-of-type(2){
transition-delay:300ms;(延迟300毫秒)
opacity:1;
transorm:none
}
ul>li: last-child: hover li :nth-of-type(3){
transition-delay:600ms;（延迟600毫秒）
opacity:1;
transorm:none
}
图片hover时变震动 ，放大时慢慢消失
css 列： .box{
width: ;
height: ;
background: url ( " 路径" )
}
.box > img: hover {
opacity :0; 透明0
width: ; 图片的宽
height : ; 图片的高
transform: scale (1.3,1.3); 放大1.3 倍
transition :all 1s ;
}
从一段文字下边框的中间开始向左右两边变颜色
div li{
list-stype:none; 没有圆点
float:left; 浮动
text-align:center; 文字居中
margin-left:10px; 向左边移动10px
position:relative; 相对定位
}
div li :: before {
content:: " " ;
boreder: 2px solid white ;
bottom: 0px;
width: 0%
left : 50%
transition: all 3s ;
position:absolute;
}
div li : hover :: before {
width :100%;
left:opx;
border:2px solid red;
}
input { padding left : 10px; 设置输入框的内容缩进
boreder : 1px solid red ; 设置输入框边框的颜色
outline : none ; 取消输入框选中后的焦点框（不要焦点框）
color : green; 改变输入时字的颜色
}
html : input type ="text"
Css : input : :-webkit-input-placeholder
{ color : lightgreen;
} 设置输入框提示信息颜色
webkit 是 谷歌前缀 ，每个浏览器的前缀是不一样的。