Cascading Style Sheet —— 层叠样式表
Css的特性
- 层叠性
- 继承性
- 重要性、
Css基本规则
css基本规则.png
注意：大括号里面的；是一个分隔符，而不是编程语言中的表示语句的结束；因此，最后一个属性值后面可以忽略
选择器
选择器.png
选择器分类
选择器分类.png
选择器权重
选择器权重.png
选择器的权重是不进位的，11个类选择器并不能大于一个ID选择器，即官大一级压死人。
计算小技巧： 可以直接数id,class，元素的数量采取三位比较,如1,5,8,1,10,9.首先比较最左侧位置，然后比较中间。
选择器权重2.png
!important和行内优先级比较
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
background: red!important;
}
</style>
</head>
<body>
<div id='box' style='background: blue'></div>
</body>
</html>
解析方式
与我们认知不同的是，浏览器对选择器的解析是自右向左，逐级验证的，这样做有利于提高解析速度。、
非布局样式
字体族
serif 衬线字体 例如 宋体
sans-serif 非衬线字体
monospace 等宽字体，写代码时多使用
cursive 手写体
fantasy 花体
多字体 fallback
定义多个字体，进行试错
网络字体，自定义字体
iconfont
行高
inline-box 决定 line-height， 字体的大小决定inline元素的行高，当行高大于inline-box的高度，会垂直居中。
基线：以字母X底部为准
底线：
顶线：
应用
- 单行文本的垂直居中
- 图片底部的3像素空隙，img时inline，会按照baseline对其，可以改为vertical-align:bottom或者img {display: inline-block}
背景
背景渐变
利用背景渐变制作网格
背景渐变
Css边框
制作三角形
由于两段边框之间是45度衔接的，所以把左右两边都采用透明，盒子wdtrh为0.
文本折行
overflow-wrap|word-wrap:normal|break-word;
通用换行设置，内容将在边界内换行。
word-break:break-word|break-all
white-space:wrap|no-wrap
控制是否换行；
text-overflow:ellipsis 溢出显示省略号
单行省略：
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
面试题
1.Css优先级
- 权重计算，不进位
- !important
- 内联样式
- 如果权重相同，后写的优先级高；
优先级从大到小依次是!important 内联样式 计算权重 后写的权重高；
2.雪碧图
3.base64
4.伪类和伪元素的区别、
伪类表示状态，是不存在的，比如hover,active...；伪元素是真实存在的，before,after
在写法上，Css3规定，伪元素为::，伪类为:；但是before和after有些浏览器不支持:: ；
5.如何美化checkbox
lable for 和 id
隐藏input
:checked + lable
网友评论