| 浏览器 | 内核 |
|---|---|
| IE | trident |
| Firefox | Gecko |
| Google chrome | webkit/blink |
| Safari | webkit |
| Opera | presto |
css选择器：
一对一
一个元素就一个id
多对多
一个class对应多个元素
一个元素可以多个class
css选择器的优先级权重
行间样式 > id > class/属性 > 标签 > 通配符
Css权重：
| !important | Infinity |
|---|---|
| 行间样式 | 1000 |
| id | 100 |
| class/属性/伪类 | 10 |
| 标签/伪元素 | 1 |
| 通配符 | 0 |
进制是256
/* 父子选择器 */
限制条件 + 最后选择
Dive strong都可用其他选择器替换
用间接子父元素也行
直接子元素用 >
/* 并列选择器 */
标签要放在前面（与class/id…）
权重一样的，后面的会覆盖前面的
/* 分组选择器 */
不同选择器用逗号隔开可以共用一个代码块
front
font-size:
调整字体大小(默认的一般是12,设置的是字体的高)
front-style:
设置文本字体样式(斜体…)
font-weight:
调整字体粗细(lighter，normal，bold，bolder)
100 200 300 --------- 900
font-family:
设置字体(arial)
color:
设置字体颜色(每两位6进制的数字表示三原色的饱度。)
00 ->ff 比如：000000黑色
如果3个颜色的2个6进制数一样可简写为一个例如：ff4400->f40
border
border-width/height(宽高)
border-style:
solid实心线 dotted点状虚线 dashed条状虚线
border-color(设置颜色)
border-left
border-right
border-top
border-bottom
text-align:
设置文本对齐方式(默认左对齐left)
居中为：center 右对齐：right
line-height:
设置文本高度(想要垂直居中可以让文本高度等于容器高度)
tetx-indent: __em
设置首行空出字符位置（相对位置1 em = 1 * font-size）
vertical-align调整一行文本的对齐方式
baseline基线对齐
top顶部对齐
bottom底部对齐
middle居中对齐
text-decoration:
throuth横线划过文本
underline 文本加下划线
overline 文本加上划线
text-decoration:line-throuth ->
不用del因为不好修改，html就该做结构的事，尽量不要去做ccs的事情
cursor：
当鼠标移动到文本，显示不同的图标
例如：
pointer鼠标移到文本出现点击图案
help 鼠标移到文本出现小问号
伪类选择器
hover
选择器 + : + hover{}
当鼠标移到文本时，执行hover里的代码
1.行级元素：
内容决定元素所占位置
不可以通过css改变宽高
2.块级元素：
独占一行
可以通过css改变宽高
3.行级块元素：
内容决定大小
可以改宽高
盒子模型
盒子的三大部分：
盒子壁：border
内边距：padding 顺时针给四个边赋值（-top -right -left -bottom）
一个值代表四个方向
四个值是 上 右 下 左
三个值是 上 左/右 下
两个值 上/下 左/右
盒子内容：width + height
Margin + border + padding + (content)
定位
position:
absolute
脱离原位置定位
相对于最近的有定位的父级进行定位，如果没有相对于文档定位
right(距离右边框)
left(距离左边距)
top(距离右边距)
bottom(距离下边框)
position:
relative
保留原位置定位
相对于原来位置定位
right(距离右边框)
left(距离左边距)
top(距离右边距)
bottom(距离下边框)
relative当做参照物，absolute用来定位
fix
固定位置，不随页面下滑而消失
*{
padding:0;
margin:0;
}
margin塌陷：父子嵌套的元素垂直方向的margin取最大的值
解决方法：bfc block format context
如何触发有个盒子的bfc(改变父级的渲染规则):
position:absolutue
display:inline-block
float:left/right
overflow:hidden(超出盒子部分隐藏)
margin合并：不处理
浮动元素float：
- 浮动元素产生了浮动流
所有产生了浮动流的元素，块级元素看不到
产生了bfc的元素和文本属性的元素以及文本能看到浮动元素
解决方法： clear:both清除浮动流 clear:both错误的
正确解决方法after{
Content；“”
Display:block
clear:botth
}
文本溢出容器（打点显示）
单行文本溢出容器三件套：
white-space: nowrap;强制不换行
overflow: hidden;超出隐藏
text-overflow: ellipsis;超出换点
多行文文本溢出容器：
手动
给标签容器使用图片做背景
url内填写当做背景的图片
background-size调整图片大小
background-repeat: no-repeat;一般设置不让图片重复
background-position 移动图片的位置可以两个参数也可以
left top right top……… center center
图片替代文字（当css因网络原因无法加载时，让用户依然能跳转点击）：
方法一
重点：overflow：hidden
将“文字”挤出容器overflow:hidden使其隐藏，当css无法加载，“文字”显示依然可跳转
方法二：
将容器高置0px，然后使用padding撑起容器，“文字”就会被挤在容器下放，使用overflow:hidden使其隐藏，当css失效，“文字”显示出来
嵌套规则：行级元素可以嵌套行级元素
块级元素可以嵌套任何元素
特例：p标签不能里放dive
a标签不能套用a标签
em相对于字体大小（font-size）
rem相对于根元素的大小
背景图:
(设置图片重复方式)
background-reapeat:
repeat 默认值默认将元素铺满
reapeat x 沿着x方向重复
reapeat y 沿着y方向重复
no-reapet 不重复
background-postion(top,left,right,bottom,center)
组合使用九宫格位置，例如：
top left top center
也可以使用偏移量：background-postion： 10px 10px（x，y方向）
background-clip：
border-box 背景会出现在边框的下边
padding-box 背景不会出现在边框的下边，只出现在内容区和内边距
content-box 背景只会出现在内容区
background-origin:;背景图片的偏移计算原点
可选值：
border-box
padding-box
content-box
background-attachment
可选值：
scroll 默认值背景图片跟随元素移动
fixed 背景图会固定在页面中，不随元素移动
backgound背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的
注意：
background-size必须写在background-position的后边，
并且使用/隔开background-position/background-size
background-origin background-clip 两个样式 ，orgin要在clip的前边
线性渐变
background-img:linear-gradient（45deg，red,yellow，green）
沿着一条直线变化,可指定渐变方向，在括号内颜色前方写to top，to left或者45deg，四十五度方向调整。
渐变可指定多种颜色，默认是平均分配，也可以手动指定分配
background-image: linear-gradient(red 50px, yellow);
第二种线性
background-image: repeating-linear-gradient();
会把没设置到的像素高度平铺（重复）
径向渐变(中心向四周渐变)
radial-gradient（大小，at 位置，颜色 位置，颜色 位置）
background-image: radial-gradient(red, yellow, green, orange, #baf, #bbffaa);
默认情况下径向的渐变圆心的形状根据元素形状来计算
长方形----椭圆形
正方形----圆形
也可以手动设置渐变园的大小
background-image: radial-gradient(100px 100px,red, yellow)
background-image: radial-gradient(ellipese/circle,red, yellow)
指定位置（渐变圆心的位置）at
Top left都可以
background-image:radial-gradient(at 0 0,red, yellow)
初次写静态页面小结
结构的划分（经验）顺序：
自上而下，从左往右，以行为单位
依据：
内容 颜色块 间距 边框
@规则
@charset 设置样式表的编码
@import 导入其他样式文件
@meida 媒体查询
@font-face 自定义字体
盒模型
标准盒模型：
总宽度=border(左右)+width(左右)+padding(左右)
总高度=border(上下)+height+padding(上下)
IE盒模型(怪异盒模型)：
总宽度= width
总高度= height
怪异盒模型触发条件 box-sizing: border-box;
table
设置边框间距：
border-spacing:
设置边框合并：
border-collapse:collapse
将元素设为单元格td
display:table-cell;
form表单
作用:将本地数据提交给远程的服务器
active:表单提交的服务器地址
弹性盒模型
flex-direction:可选值：
row (flex item默认是row值) 自右向左
row-reverse 自左向右
column 自上向下
colum-reverse 自下向上
弹性盒模型水平布局
justify-content(决定了flex item在主轴的对齐方式)可选值：
flex-start(默认值):与main start对齐
flex-end:与main end对齐
center:居中对齐
space-between
flex items之间距离相等，与main start，main end两端对齐
Space-evenly:flex items之间的距离相等，且距离等于与main start，main end之间的距离相等
Space-around:flex items之间距离相等且距离为与main start，main end之间的距离的两倍
弹性盒模型单行垂直布局
align-items决定了flex items在cross axis上的对齐方式,可选值：
normal在弹性布局中，效果和stretch一样
stretch:当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container，当未设置item1，item2，item3高度时，会自动拉伸填满。
flex-start:与cross start对齐（顶部一排）
flex-end:与cross end对齐（底部一排）
center:居中对齐
baseline:与第一行文本基线对齐
flex-wrap(单行多行显示)
-nowrap:默认值，单行，如果宽度不够会对items自动压缩宽度
wrap:换行显示
wrap-revserse:换行，第一行在下方
flex-flow
flex-flow是flex-direction（排列方向）和flex-wrap（单行多行显示）的缩写属性，默认为row nowrap
弹性盒模型多行垂直布局
align-conten决定多行flex items在cross axis上的对齐方式，与justify-content类似，取值为：
normal在弹性布局中，效果和stretch一样
stretch:默认值，轴线占满整个交叉轴
flex-start:与cross start对齐（顶部）
flex-end:与cross end对齐（底部）
center:居中对齐
Space-between:flex items之间距离相等，上下两端对齐
space-around:flexx items之间距离相等且是与cross start,cross end之间的距离的两倍。
space-evenly:flexx items之间距离相等且是与cross start,cross end之间的距离的一样
order
可以设置任意整数，值越小，就越排在前面
默认值为0
align-self
flex items 可以通过align-self覆盖felx container中设置的align-items
默认值为auto，遵从felx container中的align-items设置
Stretch,flex-start,flex-end,center,baseline效果与align-items一致
flex-grow
flex-grow属性定义项目的放大比例：
默认为0，可以设置非负数
当flex container在main axis方向上有剩余size时，flex-grow才会生效
如果所有flex items的flex-grow总和sum超过1，每个flex item的扩展的size=flex container的剩余size*flex-grow/sum
如果所有flex items的flex-grow总和sum超过1，每个flex item的扩展的size=flex container的剩余size*flex-grow
flex items扩展后的最终size不能超过max-wdith\max-height
flex-shrink
flex-shrink决定了flex-items如何收缩：
默认值为1，可以设置任何非负数，负值对该属性无效
当flex items在main axis方向上超过了flex container的size，flex-shrink才会生效
如果所有flex items的flex-shrink总和超过1，每个flex items收缩的size=flex items超出flex container的size*收缩比例/所有flex items收缩比例之和
如果所有flex items的flex-shrink总和不超过1，每个flex items收缩的size=flex item的size-flex items超出flex container的size*flex-shrink
flex items收缩后的最终size不能小于min-width/min-height
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小
flex-basis
flex-basis用来设置flex items在main asis方向上的空间大小
transition（过渡）
transition的属性：
transition-property：指定要执行过渡的属性
transition-duration：指定过渡效果的持续时间
transition-timing-function：指定过渡的执行方式
ease默认值 先加速再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out和ease差不多
steps()分步执行过渡效果
transition-delay：过渡效果延时
2994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
