BFC
前言
什么是BFC？
它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局不同BFC区域，他们进行渲染时互不干扰
特性
- 创建BFC的元素，隔绝了它内部和外部的联系内部渲染不会影响到外部
- 创建BFC的元素，它的自动高度需要计算浮动元素
- 创建BFC的元素，它的边框盒不会与浮动元素重叠
- 创建BFC的元素，不会和它的子元素进行外边距的合并
处理器
预处理器
先按照人家语法的来写 然后生成css
less/sass cssNext插件
后处理器
在人家的环境去随意写css代码 写完后把代码补齐 比如-ms- boder-raduis 会自动补全ms
未来可维护好 如果未来css属性统一了没有-ms-了，直接移除插件就好了
autoprefixer插件
postCss
postCss+插件
用js实现css的抽象的语法树
AST(Abstract Syntax Tree)
剩下的事留给后人来做
text
shadow阴影
可以设置多个值
配合截断使用会覆盖文字
/*x轴 y轴 blur模糊 color*/
text-shadow:1px 1px 0px #000,-1px -1px #fff;
stroke描边镂空
可以实现镂空和描边的效果
-webkit-text-stroke: 1px red;
字体
MIME协议(.ttf .txt.opt) 协议不是实时的 游览器依照就是这个协议
字体存在兼容问题 兼容解决可以使用format 看开发手册
/*字体格式*/
@font-face {
/*字体包的名字*/
font-family: "abc";
/*字体路径*/
src:url("");
/*相当于加了一个映射，强制另一个软件打开文件避免抛出404*/
src:url("abc.ttf") format("ttf")
}
div{
/*使用字体*/
font-family: "abc";
}
white-space
white-space:pre
-
pre保留字体空格
-
norap超出长度不换行
word-break超出处理
word-break:keep-all
-
keep-all超出不换行
-
break-all强制换行 不保留英文的完整性
-
break-word针对英文行换 尽可能保证单词的完整性
letter-spacing文字间隙
letter-spacing:20px
text-overflow文字超出处理
text-overflow:ellipsis; 超出的文字显示省略号
coulum 多列
columns：100px 2; 两个值分别为cloumn-width column-count
coulum-widht：300px 设置多列中每一列的宽度 不准确自适应
column-count：4 多少列
column-gap：3 设置列与列之间的间隙
column-rule：1px solid black； 边框线
column-span：2 贯穿 比如让p标签贯穿整个列
p{
column-span:2;
}
-webkit-column-break-befor：always；在前面另起一列 after在后面