HTML和CSS进阶实战
使用text-align设置对其方式
left 文本排列在左边
right 右边
center 中间
justify 两端对齐
inherit 从父元素继承
使用width调整元素宽度
auto 默认值
length px 或者em
% 定义基于父元素的百分比宽度
inherit 继承父元素的width值
使用height调整元素高度
auto 默认值
length px 或者em
% 定义基于父元素的百分比高度
inherit 继承父元素的height值
注：不包括填充、边框、页面边距
文本标签
<strong></strong>加粗
<em></em>斜体
<u></u>下划线
<s></s>删除线
<hr>标签创建水平线
文本背景以及字体
background-color 背景色
font-size 字体大小 除了其他几种单位还有（xx-small x-small small medium large x-large xx-large）
font-weight
字体粗细（100-900 700==bold 400 ==normal）
阴影
box-shadow 给标签元素添加阴影
box-shadow: 120px（水平偏移） 80px（垂直偏移） 40px（模糊半径） 20px（阴影扩展半径） #0ff（颜色）;
不透明度
opacity 1代表完全不透明 0.5半透明 0 全透明
text-transform属性控制文本的大小写
lowercase 全小写
uppercase 全大写
capitalize 首字母大写
initial 默认值
inherit 继承父元素的值
none 不改变
行间距
line-height 单位有normal number（乘以字体大小） length %
悬停效果
a:hover{ color: red }
设置元素的相对位置
position
absolute 绝对定位通过left top right bottom进行规定
fixed 生产固定定位，相对于浏览器窗口进行定位
relative 生成相对定位的元素 相对于其正常位置进行定位
static 没有定位
注：通过相对定位移动时，使用相反方向设值
使用fixed固定定位
定位元素不会随着屏幕的滚动而移动
左右浮动
通过设置float 外边缘会碰到包含框会外边框为止
使用z-index属性更改重叠元素的位置
z-index的取值为整数 数值大的元素优先数值小的元素显示
使用margin属性将元素水平居中
把一个块级元素设置margin为auto 会变得水平居中
图片是内联元素但可以设置display:block 变成块级元素
颜色
rgb() rgb(0,0,0)
hsl() hsl（0，100%，50%） 分别代表颜色、饱和度、亮度
hex() #FF7F00 类型
linear-gradient(35deg, #CCFFFF, #FFCCCC)可以实现颜色渐变 35deg表示渐变角度其中90deg表示垂直渐变
repeating-linear-gradient( 45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px)
45deg表示渐变角度 0-40表示 在0-40px我哦黄色向黄色渐变即纯色 40px-80px为黑色向黑色渐变
更改元素
transform : scale(2) 放大两倍可设置悬停效果
transform :scaleX(2)scaleY(2)scaleZ(2)在X、Y、Z轴进行缩放
transform :rotate（deg）进行旋转
transform :skewX（deg）skewY（deg）沿着X 、Y进行倾斜转换
关键帧和动画
使用animation 以及@keyframes规则
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100%{
background-color: yellow;
}
}
还可以通过设置left、right、bootom、top实现元素偏移
还可以设置opacity来设置透明度 实现左右淡化
设置按钮悬停效果
button:hover {
animation-name: background-color;
animation-duration: 1s;
}
@keyframes background-color{
100%{
background-color: #4791d3;
}
}
可以通过animation-fill-mode:forwards 指定了在动画结束时元素的样式
可以通过animation-iteration-count:指定循环次数 其中infinite为无限次
通过animation-timing-function设置动画变化 linear 匀速 ease 慢-快-慢 ease-in 慢开 ease-out 慢结 ease-in-out 慢开慢结
贝赛尔曲线 cubic-bezier(0.25,0.5,0.5,0.6)也表示变化速度四个点分别为（0,0）(0.25,0.5) (0.5,0.6),(1,1)
媒体查询
可以针对不同的屏幕尺寸设置响应式的页面
@media(max-height: 800px){
p{
font-size: 14px;
}
}
图片自适应
img { max-width: 100%; height: auto; }
``
