《css3初识》

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


上一篇:《html5初识》


下一篇:重学 Java 设计模式:实战代理模式「模拟mybatis-spring中定义DAO接口,使用代理类方式操作数据库原理实现场景」