CSS
1.分块
将页面分块想要的样式可以通过浏览器查看
属性值：value
2.在<head>标签里写<style>
选择器 # . 标签名 id不能重复，class可以重复(最常用) CSS注释：/* */ 关联选择器：span div选择span标签下div 组合选择器：选择多个，以，分隔 属性选择器：[type='text'] .c1[n='alex']3.css的存在形式和优先级
没重复就全部应用 重复时，标签内先，然后从下到上<link rel='stylesheet' href='commons.css'>引入样式
4.CSS边框以及其他常用样式
<div style='border:1px solid red;'> </div> 还能border-left\top\right\buttom
height\width px % font-size： text-align:center #左右居中 vertical-align:middle; #上下居中 一般不用这个 line-height:48px #放到48px高的div的正中间，与height同高 font-weight:bold; #加粗5.float:使得标签漂浮起来，占据的地方为实际的大小，块级标签也能堆叠
要想占据同一行，得方向相同：float:left 超过时会另起一行向左或者向右飘，能够分块页面
<div style="clear: both"></div> #父标签没有float子标签float会覆盖，clear即可
6.display：
inline：内联 block：块级 #内联标签：无法设置高度、宽度、padding、margin要想设置：inline-block（占内容大小，可以设置高度宽度等）
7.padding\margin（针对标签）
内容(content)、内边距(padding)、边框(border)和外边距(margin)。
margin外边距：在本身上加一个与父标签之间的距离，这部分空白 padding内边距：本身与父标签进行填充边距，这部分和子标签一样颜色应用：<div class="pg-header" style="margin: 0 auto">
0表示上下居中，auto表示左右边距相同（很多网页都是这样指定宽度然后auto居中）比较：文本的text-align、line-height 针对文本
padding：上 右 下 左；上下 左右；8.css重用 共同的样式放c，c1放自己的 class可以有多个 class='c c1'9.自适应和改变大小变形左右滚动条的出现
宽度：px，百分比 百分比会随着改变页面大小而变形解决：页面最外层，像素的宽度，自动出现滚动条，里面的东西不会变形
最外层像素，里面百分比 自适应：media10.IE浏览器
<a><img></a> 打开的图片有蓝色边框，如文字链接一样 解决：border：0s15 2018/05/14 周一
1.CSS内容补充--position
a.position:fixed #变得有层次，div能放在背景div之上的任一位置了，可以用来设置返回顶部(scrollTop=0)，导航栏
top:0 right:0 #搭配使用 使用position后，不再占一整行，类似float浮起来底部的div可以不被fixed的div覆盖：margin-top:40px
b.<div style='position:relative' relative搭配absolute使用
position:absolute #相对父标签的位置 top:0 right:0 #依据父标签进行定位c.三层，遮罩层
定义一个fixed的div，距离上下左右0 opacity：0.5 弹框层也是fixed 多个层时需要指定z-index：position属性使得标签会和float一样浮动，margin：0 auto 不再适用居中，失效
通过top:50% left:50% margin-top:高度的一半 #top针对的是左上角 margin-left:宽度的一半 即可居中2.overflow img标签的图片大小可能会超过div设定的高宽 overflow：hidden超过隐藏 auto：滚动条 或者设置img标签的高宽3.hover .class:hover{} 鼠标放置时应用样式4.background-image:url('xxx.jpg')
div过宽过高的话会重叠 background-repeat:no-repeat\repeat-x\repeat-y background-position-x: #左上角为0，背景图片的起点 background-position-y: background-position: x y; background：url x y no-repeat5.放置背景图片 <div style="height: 35px;width: 400px;position: relative;border:1px solid red"> <input type="text" style="height: 35px;width: 370px;padding-right: 30px" /> <span style="position:absolute;right:8px;top:12px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block"></span> </div> 通过relative和absolute使图片漂浮在输入框之上， margin-left\right：使得输入框向右移动（right无效） padding-left从左边开始延伸，padding-right右边部分延伸，可放置图片css补充示例页面布局：分块
主站： <div style="width:980px;margin:0 auto"> 使得页面居中后台管理指之分块布局：
方法一： 设置左float和右float的话，宽度不知道，百分比在缩小屏幕时会变形 min-width可以解决，但高度px不能确定 方法二： position： a. fixed overflow 固定 b. relative：单独无意义 absolute：不固定，可以不结合relative使用，设置overflow时本标签滚动， 其他不动 总结：方法b可以在左侧滚动和左侧固定之间变换，设置overflow即可 相同点：absolute与fixed都要设置top、left这些后台管理之导航菜单设计：
float布局logo和个人信息div，注意float会让该div撑起来(因为都设置了height)，还要clear both图片：<a>标签内的img标签，设置width和height，border-radius：50%
点击图片出现下拉框：relative absolute，设置top right等以及width、height 鼠标移至图片时出现下拉框：diasplay后台管理之hover：
鼠标移至div时改变style .item:hover{ color: red; } .item:hover .b{ #如果.b:hover{}的话，鼠标不放在b上不会应用style background-color: green; }后台管理之图标：
注：i标签与span标签功能相同 class可以重复，id不行 <link rel="stylesheet" href="fontawesome-free-5.0.13/web-fonts-with-css/css/fontawesome-all.min.css"> 引入css后复制图标html码，设置样式