CSS

CSS
html 结构
CSS 展示样式
js 动作


Cascading style sheets 层叠样式表


选择器 选择某些元素
id选择器
#id值
class选择器
.class
标签选择器
div p
普遍选择器
*所有的
子代选择器
空格 后代


div * div后代中所有的

> 子代div>p div的直接孩子是p的

+ 后一个兄弟元素p+span 兄弟元素同一级的，子代即是包裹的

~ 之后所有的兄弟p.one~*
嵌套选择器
p.one div#two
选择p标签并且class为one的p.one
选择p标签的后代中class为one的p .one
组合选择器
p,span
选择p标签，span标签


属性选择器
[key] 有key属性的元素
[key=value] 有key并且值为value
[key^=value] 有key并且值以value开始的
[key$=value] 有key并且值以value结尾的 
[key~=value] 有key并且值中有一个值为value的
[key*=value] 有key并且值中包含value的


伪类选择器
:frist-child
:last-child 选择作为最后一个孩子的元素
:only-child 选择作为独生子的元素
:nth-child() 选择作为第几个孩子的元素
参数有以下的取值
n 自然数
odd 奇数
even偶数
:nth-last-child()选择作为倒数第几个孩子的元素
:first-of-type每家中每种类型中的第一个
:last-of-type 每家中每种类型的最后一个
:nth-of-type()每家中每种类型的第几个
:nth-last-of-type()每家中的每种类型中的倒数几个
表单状态的伪类选择器
:focus 聚焦时候的状态
:enabled可用的元素
:disabled禁用的元素
:required必填的元素
:optional非必填的元素 
:checked选中的元素
:default默认选中的元素
:valid通过验证的元素


...


伪元素选择器
::before 在之前添加东西
::after 在之后添加东西
::first-line 第一行
::frist-letter第一个字符
::selection 选中的字符
继承
可继承属性
backgroud
color
不可继承属性
border
属性值
initial 不继承
inherit 继承

unset 不设置

CSS选择器 
标签选择器 div
类选择器 .class
id选择器 #id值
普遍选择器 *所有的
后代选择器
空格 后代
> 子代
+ 下一个兄弟元素
~ 之后所有的兄弟元素
属性选择器
[key] 有key属性的元素
[key=value] key属性等于value值的
[key^=value]
[key$=value]
[key*=value]
[key~=value] 属性值中有一个值为value的
伪类选择器
a:link{} 未访问的状态
a:visited{} 已访问的状态
a:hover{} 鼠标悬停状态
a:active{} 鼠标点击状态


子元素
:only-child 独生子
:frist-child 作为第一个孩子的元素被选中
:last-child 作为最后一个孩子的元素被选中
:nth-child(n/3n+2/odd/even)作为第几个孩子的元素被选中


:first-of-type每种类型中的第一个被选中
:last-of-type 每家中的每种类型的最后一个被选中
:nth-of-type(n)每家中的每种类型中的第几个被选中


表单
:focus 聚焦状态
:enabled 可用
:disabled 禁用的被选中
:required 必填的被选中
:optional 非必填的
:checked 选中的
:default 默认被选中的
:valid 通过验证的
:invalid 没有通过验证的


伪元素选择器
::before
::after 在之后
::first-line 第一行
::first-letter第一个字符
::selection 选中的字符




CSS引用到html页面中的方式 就近原则
内嵌样式
标签内部的style属性
特性值 1000
内部样式
<style></style>
外部样式
<link href=""/>
.css结尾的文件


@import url();


style属性>style标签/link标签>@import


CSS优先级
3个条件决定他的优先级
1.！important修饰的最优先
2.特性值（权值，权重）
style属性内 1000
id选择器 100
类选择器，属性选择器，伪类选择器10
标签选择器，伪元素选择器 1
空格 > + ~  * 0
3.就近原则


显示与隐藏
display:
none   消失，不占位置
block 块级显示
inline 行内元素显示，不可设置宽高
inline-block 行内显示，可设置宽高
visibility
hidden 消失，占位置
visible 显示


块级与行内的转换
块级：独占一行可设置宽高
行内：与其他元素共享一行，不可设置宽高


超出部分的处理
overflow属性：
auto 自动
scroll 滚动条
hidden 隐藏
cursor鼠标样式
text 文本
help 问好
pointer 手
move 移动
wait 等待
corsshair十字


盒子模型
内容区
padding 内间距
border 边框
margin 外边距


w3c盒子模型
设置的宽高就是内容区的宽高
div
width:100px;
heigth:100px;
padding:10px;
margin:10px;
border:1px;
内容区宽 100px
盒子的宽 100+padding*2+2*border
盒子所占的屏幕空间
100+2*padding+2*border+2*margin


margin/padding
一个值 上下左右
俩个值 上下左右
三个值 上  左右下
四个值 上 右 下 左
margin-top 上边距
margin-bottom 下边距
margin-left 左边距
margin-right 右边距


IE盒子模型
设置的宽高是盒子的宽高，包括内容区，padding区，border区
占据屏幕的宽
width:100px;
heigth:100px;
padding:10px;
margin:10px;
border:1px;


100+2*margin=120px


box-sizing:
content-box
内容区的宽高,W3C模型
border-box
盒子的宽高，IE盒子的模型


浮动
float:
none 不浮动
left 左浮动
right
clear:both 清除浮动元素对其他元素带来的影响
如果子元素都浮动，想让父级有高度，在父级元素上使用overflow:hidden
如果只是想清除浮动对其他元素布局的影响的话，在其它元素上使用clear:both


浮动的特点：
如果只有一个元素浮动的话，该元素脱离文档流，其它元素顶上去
如果多个元素浮动的话，那么在一行显示，紧跟在第一个浮动元素之后
如果有父子级关系的话，子级元素都浮动，则父级元素没有高度。如果想有高度，在父级元素上使用overflow:hidden



CSS引入的方式
style属性上
style-"color:red;backgroud-color:blue"
link标签引入
href属性值为CSS文件的地址
.css结尾的文件
div{
color:red
}
@import url()
在css文件中引入到另一个css文件


行内样式>内部样式/外部样式
style标签>内部标签/style标签/外部样式link标签>@import


属性优先级
1. ！important
2特性值
style属性内 1000
id选择器 100
class选择器 属性选择器 伪类选择器 10
标签选择器 伪元素选择器1
3.就近原则
display
none不占据屏幕空间
block显示，将行内元素块级显示，可以设计宽高
inline 显示，将块级元素行内显示，不可设置宽高
inlink-block 显示行内显示，可设置宽高


overflow 溢出处理
auto 自动
scroll 滚动条
hidden 超出部分隐藏
盒子模型
内容区
padding区
border区
margin区
w3c盒子模型
设置的宽高是内容器的宽高
盒子的宽高
内容区+2*padding+2*border
占据屏幕的空间


IE盒子的宽高
设置的宽高是盒子的宽高
盒子模型的切换
box-sizing属性
content-box W3C
border-box IE
浮动
元素脱离文档流，其他元素顶上去
float
left
right
none
清除浮动
兄弟之间clear-both
父子级之间 overflow：hidden


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


定位
position
static 静态的（默认的,不定位）


fixed 固定的定位，参考点是浏览器，
脱离文档流，默认位置是原来位置的上方


relative 相对定位，参考点是原来在文档流中的位置,
不脱离文档流，默认位置是原来的位置


absolute 绝对定位，如果没有定位的父元素，参考点页面是左上的点，
 如果有定位的祖先元素，参考点是离它最近的定位的祖先元素
脱离文档流，默认位置为原来位置的上方
定位元素： 使用position属性，值为fixed，relative，absolute的


定位元素属性
left
right
top
bottom


布局
默认：
书写顺序就是就是展示顺序
自己布局
*{
margin:0px;
padding:0px;
}
display
overflow
visivility
float
定位
盒子模型
margin  padding
弹性盒模型布局
容器：父元素
display：flex;
flex-direction:内部项目的方向
row 默认在一行
row-reverse 在一行倒着显示
column 在一列
flex-warp设置是否换行
nowarp 不换行默认的
warp
warp-reverse
flex-flow:row warp;
align-items:垂直对其方式
stretch 拉伸
flex-start 上
flex-end
center 中
justify-content：水平对其方式
flex-start 左
flex-end 右
center 中
space-between 之间有空隙


项目：
子元素
flex:1/2  200px;
div*3
flex:1;三个子元素占3/1




品字布局




动画
animation-name:动画的名字
@keyframes myName{
%0{


}
100%{


}
}
animation-duration:动画的持续时间
aniamtion-delay:动画的延迟时间
animation-timing-function:动画的执行函数
animation-direction:动画的执行方向
reversed 从最后一帧到第一帧
alternate 奇数次从第一帧到最后一帧，偶数次从最后一帧到第一帧
alternate-reversed
偶数次从第一帧到最后一帧，奇数次从最后一帧到第一帧
animation-iteration-count:动画的播放次数
n
infinite 无限次
变形
transform属性
translateX() x轴偏移
translateY() y轴偏移
translateZ() x轴偏移
scale() 放大或者缩小
rotateX() x轴旋转
rotateY() y轴旋转
rotateZ() z轴旋转


table
boder-collapse