前端2

css
文本居中垂直居中 line-height=盒子高度、

背景颜色background-color
背景图片background-image
背景图片平铺 repeat 默认平铺 norepeat
背景图片 background-position 背景定位
背景background-attachment:fixed;固定 scroll移动
background：rgba(0,0,0,0.5) 最后一个取小于1的数，颜色为透明色
CSS的三大特性：
继承性
只能继承基础字体颜色行高，
覆盖性 就近原则

选择器权重：
标签选择器：0，0，0，1
类选择器：0，0，1，0
id选择器：0，1，0，0
复合选择器可以叠加权重

布局三大核心
盒子模型
浮动
定位

布局本质 CSS摆盒子

盒子的组成
border 边框
content 内容
padding 内边距
margin 外边距

边框的三个属性
border-color 边框颜色
border-width 边框粗细
border-style 边框样式
solid 实线
dashed 虚线
给盒子加边框会影响盒子实际大小，
在量盒子之前 直接量边框里的大小或者定义盒子的时候去点边框大小

padding:内边距
4个值 顺时针对应
内边距会改变盒子大小
外边距就是盒子和盒子之间的距离
margin 可以定义 大盒子页面居中
margin: 0 auto;

很多元素默认带有内外边距，清除所有内外边距
*{
padding:0;
margin:0;
}

圆形盒子
给盒子边框加
border-radius=PX或者百分比
也可以四个边分开设置
顺时针

盒子阴影
box-shadow:(x轴 y轴 阴影模糊度 阴影大小 颜色)

浮动
float：left right
左浮动右浮动
块级 纵向看标准流
行级 横向找浮动
浮动特性：
1.会脱离标准流 不会保留自己的位置
2.一行显示，并且都按照浮动顶部对齐，当父级盒子宽度不够装下这些盒子时，其他盒子会另起一行浮动顶部对齐
3.浮动的元素会拥有行内块的属性，

布局准则
1.标准流负责上下，浮动负责左右
2.先设置盒子大小，再设置位置

float 浮动
左浮动 float:left
右浮动 float:right
float的特性
1.会脱离标准流，不会保留之前的位置，
2.向上或左或右对齐，一行元素浮动，当他们的父级盒子宽度不够时，会在父级盒子下面另起一行进行排列，
3.元素浮动后会变成行内块元素

清除浮动,
为什么要清除浮动
有的父级盒子不需要高度，当他里面的元素都添加浮动时，父级盒子高度会为0，从而影响后面其他盒子排列
清除浮动的方法
双伪元素清除法
clearfix::after
clearfix::before {
}

常用id
版心header
user 用户
search 搜索
logo logo
nav 导航栏

定位
opsition
fixed opsition 固定定位
relative opsition 相对定位
absolute opsition 绝对定位
sticky opsition 粘性定位

display:none 隐藏
display:block 显示

精灵图

字体图标
iconfont
下载好字体图标包
将下载好的字体图标fonts文件导入到源目录
将图标包的样式导入到css中
将需要图标的元素导入
font-family:‘icomoon’

鼠标样式cursor
属性
default 模式
pointer 小手
move 移动样式
text 文本
not-allowed 禁止

取消表单轮廓
给表单+outline
防止表单域拖拽
resize

单行省略
首先得让文字强制一行显示
white-space:nowrap
让溢出的文字变为隐藏
overflow:hidden;
让隐藏变为省略
text-overflow:ellipsis

多行显示
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:行数；
-webkti-box-orient:vertical;

布局技巧
1.margin负值运用，可以用到在多个盒子一行无间隔有边框，当边框重叠为两个边框大小的问题。
如果需要加盒子点击效果，有的边框会不显示，
方法
1.添加相对定位position:relative;
让光标点击的元素
2.添加z-index:“1”;

文字围绕元素
浮动的本质就是实现文字环绕效果
在做一个图片与文字左右分开的案例时
只需要将图片浮动即可，文字不会被压在图片下面，同在一个盒子中即可实现文字环绕图片效果

行内块运用
在做如页数框类型例子的时候，可以不用ul+li ，直接用a标签转行为行内块元素即可，行内块元素会有自己本身自带的左右间隔. 且直接给父级盒子加line-height:父亲盒子的高度即可

直角三角形

box {
width:0px;
height:0px;
border-top:100px solid transparency;
border-right:50px solid red;‘
border-bottom:0px solid blue;
border-left:0px solid white;
}
box {
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-right: 50px solid pink;
border-bottom: 0px solid blue;
border-left: 0px solid yellow;
}
html5
新特性 新语义
header 头部
footer 尾部
article内容
section 盒子
aside 侧边栏