web第四天

边框：

Boder:1px  solid  red;

Border-radius：；-----边框弧度

Border-collapse：collapse；合并相对边框

Outline：none；去除默认轮廓线

resize；none；文本域放拖拽

子绝父相

Position: fixed

盒子模型、页面布局、float、css3的flex布局、动画，平面转化

盒子模型：

盒子大小=boder外边距+padding（内边距）+content（内容）

padding：left/right/top/bottom；-------内边距

padding：30px（全部设为30px）；

padding：30px（上下） 50px（左右）；

padding：30px（上） 50px（左右） 90px（下）；

padding：30px（上） 50px（右）60px（下） 90px（左）；

margin-bottom：30px；----文本底部间隔

margin塌陷问题：父元素的第一个子元素的margin-top会被父元素抢走

解决办法：

1.给父元素加边框

2.overflow：hidden---解决溢出-----偏方

overflow：hiden---隐藏

overflow：visibility----默认

css样式的继承性

不是所以样式都继承，只有改变之后对布局无影响的样式，才会继承，a链接最好在自身更改样式

解决badding影响盒子

box-sizing： border-box；

display：flex；---布局方式将子元素放入父元素容器中

Flex-direction： row；---从左到右

Flex-direction： row-reverse；---右到左

Flex-direction： column；---上到下

Flex-direction： column-reverse；---下到上

Flex-warp： warp；-----让flex布局变为多行

水平轴上的布局

Justify-content：center/end/space-between（均分给子项两边）/space-evenly（均分）

侧轴（单行）：

Align-items： center；

Align-items： end；

Align-items： start；

多行之间的侧轴距离：

Align-content： start；

Align-content： end；

Align-content： center；

Align-content：space-around；

Align-content：space-evenly；

Order---值越小，排列在越靠前的位置

order： -3；

定位补充：

z-index： 1；----定位中显示的优先级，让第一个显示在最上面

浮动：

会脱离文档流，不再保留原来位置，会造成下方兄弟元素位置发生变化

当子元素发生浮动时，其父元素的高度发生塌陷

float： left；----向上浮动

float问题解决：

clear：both；----清除浮动

渐变：

background-image：linear-gradinent

媒体查询：

默认内外边距：

*{

margin： 0；

padding： 0；

}

2d转换：

margin： 0 auto；-----移到中间

平移：

transform： translate（40px，40px）；----分别像向右下移动40px

旋转：

transform： rotateZ（40deg）；--------旋转40度

可组合写：transform：translate（100px） rotateZ（45deg）；

缩放：

transform：scale（2）；-------放大两倍

transform：scaleX（2）；-------沿X放大两倍

斜切：

transform：skew（40deg）；

3d转换：

给父元素：

transform-style： presserve-3d----增加3d空间

perspective： 800px-----景深

Perspect-origin：100px 200px；

transform： rotateX/Y（45deg）；-----3dX/Y旋转

1，1，0------x增加旋转，y增加旋转，z不旋转

backface-visibility： hidden；-----背面可见性

transform-origin： top；-----沿着顶部转

动画：

transition： all 5s；动画，谁变化给谁加（head）

transform： rotatex（45deg）；

Infinite---循环

Alternate------逆向播放

Alternate steps（4）-----分为4帧