CSS进阶知识:(@规则 ,,BFC,,布局)、body背景、行高、行盒对齐
行盒里面的文字会避开浮动元素,,浏览器会默认加上 span元素包裹(所以文字会避开float元素)
- @规则 at-rule @规则、@语句、css指令、css语句
- 1 import @import “./../xxx.css” 作用 引入另一个CSS
- 2 charset @charset “utf-8” ; 作用 告诉浏览器使用 指定编码去读 必须位于第一行
- web字体
- 使用@规则制作新的字体,,
- 写法
@font-face{ font-family: "xx字体" ;//字体名称 src:url("./../xx字体.ttf") }
因为下载字体常常会造成页面闪烁,且字体文件较大,一般不用于显示。常常用来 制作字体图标;推荐 阿里的 icon-font
- 块级格式化上下文(Block Formatting Content)
- 怎么创建BFC
- 根元素即HTML元素
- 浮动 或者 绝对定位 固定定位
- overflow 取值 不为visible (默认值)的块盒
- display :inline-block | tabel |table-cell
-
float的值不为none。 overflow的值为auto,scroll或hidden。 display的值为table-cell, table-caption, inline-block中的任何一个。 position的值不为relative和static。
- 创建了BFC特点:
- 他是一块独立的区域,
- 不同BFC区域,渲染时互不干扰
- BFC区域隔绝了内部与外部的联系,内部渲染不会影响外部
- BFC渲染规则
- 创建了BFC的元素计算自动高度时,会要子元素的float元素,
- 创建了BFC的元素,他的边框盒不会与浮动元素重叠(用来做左边固定宽度,右边自适应宽度)
- 创建BFC元素,不会与子元素margin合并
-
行高:
- line-height:1px; 固定值
- line-height:2em; || line-height:2%;先计算再继承 (计算父元素的line-height值(font-size * 2)。再继承); 多行文本,字体不一样时,或出现混乱
- line-height:2; 先继承再计算 (先继承了line-height :2 再用当前的元素的font-size );推荐
- body背景
- 画布
- 画布最小宽度为视口的宽度
- 画布最小高度为视口的高度
- 解释了,为什么,body元素没有宽高时,背景颜色却可以显示。设置的为画布的颜色
- 画布
当HTML没有设置背景颜色,body元素的背景颜色将会 覆盖整个画布
当HTML设置了背景颜色,body元素就会和普通div一样,不会再撑满画布;
- 画布背景图
- 宽度:设置背景图片时,图片百分比 相对于视口的宽度,而不是,画布的宽度
- 高度:背景图高度百分比,相对于HTML元素,即网页高度;
- 横向位置:百分比、预设值相对于视口
- 纵向位置:百分比、预设值相对于网页高度
当HTML元素,设置了background时,一切正常,上述都为直接在body上设置background的结果
- 图片的底部白边
- 原因
- 图片的父元素是一个块盒,其高度自动,图片底部和父元素之间往往会出现白边
- 解决办法:
- 设置父元素字体大小为0,副作用是,当内部有文字时,会看不见,单独设置span也不能解决
- 设置图片为块盒