继承
inherit:继承父类属性
initial:不继承父类属性
给行内元素加高度
1.display:block
2.设置定位
3.浮动
box盒子
box-sizing: content-box 内容盒子 配合属性直接设置 内容 所占宽度
所占宽度为margin + border + padding +content
box-sizing: border-box 边框盒子 配合属性设置直接设置 盒子 所占宽度
所占宽度为 margin + border
阴影
box-shadow:(水平方向,垂直方向,模糊程度,阴影大小,颜色)
text-shadow:(水平方向,垂直方向,模糊程度,颜色)
变换
transform: rotate();
none:不变换
scale:缩放
skew:倾斜变换
rotate:旋转
x , y ,z
过渡
transition
transition-property: height/wight /all; 选择需要过渡的元素
transition-duration: 10s; 设置过渡完成需要的时间
transition-delay: 8s; 设置过渡延迟多久开始
transition-timing-function: linear; 设置过渡的速度曲线
动画
animation
animation-name 动画名称
animation-duration 动画所需要时间
animation-timing-function 动画的的速度曲线
animation-delay 动画延迟多久开始
animation-iteration-count 动画执行次数 infinite(循环)
animation-direction 动画是否轮流反向执行
normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次正向播放,在偶数次反向播放。
alternate-reverse 动画在奇数次反向播放,在偶数次正向播放。
@keyframes 动画名称{ 或@keyframes 动画名称{
from{ 0%{}
动作 25%{}
} 100%{}
to{ }
动作
}
}
清除浮动的方式
什么是浮动:
元素使用float:left/right;后,会脱离文档流,父级元素因此失去支撑(如果没有设置高度),下面的元素就会忽略父元素开始布局
常用方式:
浮动元素的父级元素:overflow:hidden;
浮动元素的父级元素: ::after{clear:both;content:'';display:block;}
浮动元素的同级:添加一个空标签,并且设置clear:both;
浮动与绝对定位脱离文档流的区别(主要体现在 元素内文本的位置)
float:其他盒子会无视当前元素,从浏览器左上角开始布局,而盒子内的文本依旧会为浮动的元素让出位置
绝对定位:其他盒子与盒子内的文本都会无视当前元素,从左上角开始布局
块级元素
div、h1~h5、p、html、body、ul、li
1) 独占一行
2) 默认宽度为100%,默认高度由子元素或者内容决定
3) 可以为其指定宽高 style="width:;height:;"
行内元素
span、a、img、strong、i
1) 与其他行内元素共享一行
2) 默认宽高由内容决定
3) 不能为其指定宽和高
4) 行内元素中不可以嵌套块元素,但块元素中可以嵌套行内元素
给行内元素加高度
1.将行内元素设置为块级元素
display:block
2.将行内元素脱离文档流
position :absolute/fixed
float:浮动
水平居中
行内元素
text-align:center
line-height:height
块级元素 给父元素相对定位 子元素绝对定位
1. margin: auto;top:0px;right:0px;bottom:0px;left:0px;
2. left:50%;top:50%; margin-left: - 子元素一半宽度; margin-top: -子元素一半高度 给父元素
3. 伸缩盒 display:flex; justify-content:center; align-items:center;