前端CSS
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，百分比 百分比会随着改变页面大小而变形
解决：页面最外层，像素的宽度，自动出现滚动条，里面的东西不会变形
最外层像素，里面百分比
自适应：media
10.IE浏览器
<a><img></a> 打开的图片有蓝色边框，如文字链接一样
解决：border：0
s15 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-repeat
5.放置背景图片
<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码，设置样式
浙公网安备 33010602011771号