css层叠样式表
1、行间样式
2、页面级css style标签
3、内联式方式link href属性超文本引用 路径
4、import 方法
权重
!important Infinity
行间样式 1000
id 100
class|属性|伪类 10
标签选择器|伪元素 1
通配符 0
复杂选择器权重问题
父子选择器 (派生) div span
分组选择器 ,逗号隔开
css实现三角形
border属性画三角形
div标签宽高为0 border设置宽度就可以 其他方向设置透明色transpanent
line-height 单行文本所占高度 16px 没有间隔
css开发经验
单行文本垂直剧中的方式
1、text-aligin center
line-height 单行文本高度等于容器高度
2、padding值
实现首行缩进
text-indent :2em 缩进两个文本单位
实现打折划线效果
del标签直接实现
text-decoration:line-throung;
text-decoration:underline;下划线
伪类选择器
hover 鼠标效果
企业级css开发思维
先定义功能 、后定义样式可实现css最大化利用、模块化开发、可以将标签的初始化font-style:none
通配符权重为0 不会引起效果的冲突
css盒模型 注意 每一个元素都可以看作一个盒子
四大部分
盒子壁 : border
内边距: padding
外边距:margin
内容区:content
改变盒子渲染规则: boxsize:border-box;IE盒模型
W3C盒模型
盒子可视区域区别于盒模型
可视区域 = border + padding + content 切记 不计算margin