BFC

前言

什么是BFC？

它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局不同BFC区域，他们进行渲染时互不干扰

特性

1. 创建BFC的元素，隔绝了它内部和外部的联系内部渲染不会影响到外部
2. 创建BFC的元素，它的自动高度需要计算浮动元素
3. 创建BFC的元素，它的边框盒不会与浮动元素重叠
4. 创建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:1px1px0px#000,-1px-1px#fff;

stroke描边镂空

可以实现镂空和描边的效果

-webkit-text-stroke: 1pxred;

字体

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在后面