样式表，后代选择器，权重，盒子模型，三角形写法，动画效果，圆角，位移，阴影，透明度，hover的边框效果

样式表：

1.行内样式表
2内部样式表
3
外部样式表引入 link 可以被JS控制 与页面同时加载

外部样式表映入 import 不能被JS加载 页面加载完成之后加载 有兼容问题。

 

4.权重的问题

地位问题，可以相互叠加1+100>100
行内标签权重最高，无法在style里实现

id 100
class 10
标签 1
* 0
后代选择器 求和

行内样式权重最高
内部样式与外部样式权重依据加载顺序，后面的权重更高
群组选择器 .a,.b,.c,{
伪类选择器

 

尽量不要在DIV上面写，有的电脑兼容会有问题

伪类选择器权重为10
网页检查里面hov,hover

!important权重最高 强制提升优先级 不能常用 ！！！！！！！！！！

5.内边距
padding-left会把盒子撑开，没有背景颜色的话可以使用
和margin是一样的用法

6.边框
solid实线
dashed虚线
dotted点线

border:1px边框 do%tted虚线 red颜色

border-left:1px边框 dotted虚线 red颜色（左边框）

三角形的写法宽高为零：

.b{
width:0;
height:0;
border:100px solid;
border-color:red blue yellow pink;}

实现transparent透明色和白色不一样：

布局属性盒子模型
margin
border
pandding
float
width*height

 

4.圆角有四个属性制，
border-radius：10px 10px 10px 10px
正圆的写法:border:50%
border-radius:inset 0px 0px 0px 0px
阴影在边框里面,多层叠加阴影可以把属性值后面加逗号接着写属性值：
border-radius：10px 10px 10px 10px，15px 15px 15px 15px
文字阴影怎么实现：
text-radius:3px 3px 3px red文字的阴影只有三个属性值
鼠标放上去图片变透明：opacity:0.5+transition:0.3 这是透明度加动画效果
鼠标放上去图片显示边框：1。阴影+hover (border容易被挤掉)

2.用透明度代替边框 使用。
3.图片位移

transform:translatey(-2px)末值y可以换成x调节图片的移动。

4 漂浮于网页上方的盒子使用定位
固定定位 fixed
头部 width:100%(left:0;right:0;) top:0
返回顶部 右下角
铺满浏览器
width:100%;height:100%;position:fixed;
left:0;right:0;top:0;bottom:0;position:fixed;
中间的小广告 --- 确定宽高
left:50%;top:50%;margin-top:负高度一半;margin-left:负宽度一半;
left:0;right:0;top:0;bottom:0;margin:auto;

5 圆角 border-radius
圆角四个值
测量大小的方法
正圆 50%
圆角按钮 9999px --- 大过于高度的一半

6 阴影
盒子阴影 box-shadow:inset 4px 4px 4px 4px red,4px 4px 4px 4px red;
inset内阴影
左右，上下，模糊程度，阴影大小
逗号拼接多阴影叠加
文字阴影 text-shadow:3px 3px 3px red;
左右，上下，模糊程度

7 透明度
opacity:0.8;

8 hover边框效果
使用阴影代替
开始就写透明边框，hover时加颜色

9 位移
transform:translateX(10px);
rotate（1deg）旋转
scale(1.2)缩放
transition过度动画