CSS重点

网页设计第一准则：标准流嵌套浮动元素；
网页设计第二准则：先设置盒子大小，在设置盒子位置；

CSS三大特性

层叠性
继承性
优先级

继承的权重是0；复合选择器会有权重叠加的问题；相加不会有进位的问题；

选择器

锚伪类
结构类伪元素
伪元素选择器::before::after

元素显示模式

块元素
行元素
行内块素

盒子模型

content-box
border-box

浮动

浮动的特性float

1.脱标，不在保留原来的位置；

2.若都是浮动的盒子，会在一行显示，顶端对齐排列；

3.具有行内块特性，任何元素都可以添加float特性；

浮动元素经常和标准流的父级搭配使用；

浮动最初产生的目的就是文字围绕图片而产生的。

清除浮动

因为父盒子一般不给高度，但是当子盒子浮动时，父盒子就会成为一条线。所以需要清除浮动。

1.额外标签法：在浮动元素后边在添加一个块级元素并设置clear：both属性

2.父级元素添加overflow属性，给父级元素添加overflow：hidden

3.父级元素添加after伪元素

4.父级元素添加双伪元素

定位（position）

static：无定位，没有边偏移，很少使用

relative：元素在移动位置时，相对于它原来的位置来说的，原来位置保留，和浮动有区别

absolute：相对于祖先元素来定位的，若没有父级元素则以Bom为准来定位的，父级元素必须有定位属性，以最近一级带有定位的父级元素为标准。脱离标准流，不在占有原来的位置。添加了定位属性，航美元素能使用块级元素的特性。绝对定位不能使用margin属性来进行居中。

fixed：固定浏览器可视窗口为标准的，用途是在浏览器在浏览时固定在可是窗口中。和父级元素无关，不随滚动而滚动。不占有原来位置。

absolute绝对定位，固定定位会完全压住盒子，但是浮动元素只是压住标准流下面的盒子但是不会压住标准流盒子中的内容。

sticky:相对定位和固定定位的混合，一浏览器可视窗口为参照，但是还占有原来的位置。position：sticky；top：10px；必须添加top,left,right,bottom其中一个参数。

叠放次序

z-index属性只有定位有的属性

行内元素添加了绝对定位或者固定定位，或者浮动，就可以设置高度和宽度，若块级元素不指定宽高，就会按照内容的宽度来确定。

元素的显示与隐藏

1.display

display:none;隐藏元素后，不在占有原来的位置；

2.visibility；hidden/visible隐藏元素后，占有原来的位置；

3.overflow：visible/hidden/scroll（滚动条）/auto（在需要时添加滚动条）；针对溢出的部分隐藏；在有定位时慎用overflow：hidden，因为如果是定位的话可能有使用定位布置好的形式，若使用overflow就会使溢出盒子的部分隐藏，使得结构显示不完整。

动画 animation

先定义动画，在调用动画。

动画序列下载定义动画里边，一个事件可以添加多个动画，以逗号隔开。

定义动画
@keyframes  move {
    动画序列
    0%{
        transform:translaeX(0px);
    }
    100%{
        transform:translateX(1000px);
    }
}
使用动画
div {
    调用动画
    animation-name: move;(动画名称)
    animation-duration:1s;(持续时间)
}

属性

animation-iteration-count :循环
animation-delay:何时开始
animation-direction: alrernate 逆向开始
animation-fill-mode:保持结束的状态
animation-play-state:定义一个动画运行或者暂停

3D转换

1.近大远小

2.物体遮挡后不可见

translate3d:(x,y,z)

transform:translate3d(x,y,z)z方向一般使用px单位

rotate(x,y,z)

tranform:rotateX(60deg)沿x轴的正方向旋转60°

rotate3d:遵循左手准则rotate3d(x,y,z,deg)

rotate3d(1,1,0,60deg)

perspective透视

透视写到被观察元素的父盒子里边

transform-style 3D呈现

transform-style:flat;默认不开始子元素的3d立体空间

transform-style:preserve-3d;默认不开始子元素的3d立体空间

代码要写给父级元素

兼容

浏览器的私有前缀是兼容老版本的写法。

-moz-∶代表firefox浏览器私有属性
-ms-:代表ie浏览器私有属性
-webkit-:代表safari、chrome私有属性
-o-∶代表Opera私有属性

移动端

流式布局--百分比布局

采用百分比的方式来设置元素的大小。不受固定像素的限制，内容向两侧填充。常常搭配最大最小宽度来应用。

flex布局

原理：弹性布局，任何一个元素都可以指定flex布局

当我们给父盒子设为flex布局之后，子元素的浮动，clear，vertical-align将会失效。父盒子称为容器，子元素成为容器成员。通过给父盒子添加flex属性，来控制子盒子的位置和排列顺序。

rem适配布局

媒体查询： @media可以根据不同的屏幕尺寸定义不同的样式，一般按照从大到小的顺序来设置；但是从小到大是最简洁的代码

响应式布局

使用媒体查询的针对不同的设备进行布局和样式设置，从而适配不同的设备的目的，响应式布局需要一个父级作为布局容器，来配合子级元素来实现变化效果。主要是用媒体查询来做布局容器的大小，但是里边的布局方式还是要在当时的那种情况下来进行布局。

寒假青训营---CSS和HTML