下 html外边距如何归零,CSS教程：CSS _宽度

CSS(下)
历史
CSS 最早被提议是在1994年；
最早被浏览器支持是1996年；
1996年 W3C 正式推出了CSS1；
在这个版本中，已经包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性
1998年 W3C 正式推出了CSS2；
开始使用样式表结构
CSS2.1 是 W3C 现在正在推荐使用的(2004年2月)；
在CSS2的基础上略微做了改动，删除了许多诸如text-等不被浏览器所支持的属性
CSS3 现在还处于开发中；
现在所使用css基本是在css2基础上发展而来
2010年推出了全新版本css3
CSS 3 在包含了所有 CSS 2 所支持的基础上更有所改进，所以不必担心兼容问题。
CSS 支持多种设备，例如手机、电视、打印机、幻灯片等。但是 CSS 在浏览器上得到了更好的推广。
回顾
用到的知识点
双栏布局
进度条实现
显色选取器
CSS其他重要知识
BFC
BFC全称：Block，BFC翻译过来就是块级格式化上下文。
BFC是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
说白了，他就是一个规则。
具体戳这篇文章:什么是BFC?
IFC(行级格式化上下文)
GFC(网格布局格式化上下文)
FFC(自适应格式化上下文)
层叠上下文和层叠顺序
z-index
思考：
z-index 什么情况下不会生效
z-index 为 -1 的含义
两个 div 竖排，下边 div 上移，两者层叠顺序是怎样的？为什么？
尺寸单位及使用场景
外边距折叠
重绘&回流
渲染引擎
解析html结构生成DOM Tree
解析css生成CSS Rule Tree
遍历DOM Tree，逆向解析每一个样式规则，为每一个DOM Tree中的节点都应用上合适的规则，生成 Tree
计算 Tree种的每个元素的的位置，触发重排()、重绘()
调用 GUI的API绘制
好用的工具
形状
正方形
长方形
圆
三角形
弯箭头符号
椭圆
原理：使用-:50%实现
半椭圆
原理：利用-可以使用/分隔开水平和垂直方向上的圆角值特性来分别设置不同方式上的圆角半径
1/4椭圆
原理：-只设置一个角的圆弧
原理：:skew()变形。(注意：行内元素无效)
原理：利用伪元素来变形，从而不影响元素内部正常内容(变形元素内部的内容也会变形)
原理：嵌套元素，内外反向，内部图片宽度与对角线平齐.(内部反向是为了摆正图片)
原理：利用clip-path裁切路径属性，设置其值为()多边形来实现
原理：利用渐变(透明到实色)实现角度，利用-size控制多个渐变互不影响实现多个切角
原理：利用径向渐变实现，多个圆角与上述同理
原理：运用-image结合svg图实现切角边框，通过-clip限制背景色
原理：运用clip-path:()实现，局限兼容性不好，裁切会忽略内部文本内容。优点：可裁切任意内容，不受背景图限制
原理：运用:()实现穿透变形
原理：伪元素遮盖旋转
svg 实现饼图
视觉效果
原理：利用box-的3个大小值外，第4个长度参数(扩张半径)，当扩张半径为负的模糊半径时，即可实现单侧投影
原理：设置双侧位移，并设置扩张半径为模糊半径值一半

文章插图
原理：叠加两个单侧投影
字体排版
效果不理想(兼容性不好)
: none // 隐藏连字符
://显示连字符
: auto //自动
原理：运用中的换行符,在CSS中即为\000A(简写为\A)来作为伪元素的值，同时注意保留换行符和空白符white-space:pre