随笔分类 - CSS
摘要：盒模型 box：盒子，每个格元素在页面中都会生成一个矩形区域（盒子） 行盒在页面中不换行，块盒独占一行 盒子的组成部分 内容 content 填充 padding 边框 border 外边距 margin 补充 box-size: 盒子尺寸，宽高范围 background-clip：背景覆盖范围 w
阅读全文
摘要：包含块(containing block) 包含块可以理解为盒子的参考系。盒子的尺寸和位置，会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值top,bottom,left,right，当我们对其赋予百分比值时，这些值的计算值
阅读全文
摘要：定位 一个元素，只要position的取值不为static，认为该元素是一个定位元素 定位元素会脱离文档流（相对定位除外） 一个脱离了文档流的元素： 文档中的元素摆放时，会忽略脱离了文档流的元素 文档流中计算自动高度时，会忽略脱离了文档流的元素 相对定位 不会脱离文档流，在原来位置进行偏移，盒子的偏
阅读全文
摘要：浮动 应用场景 文字环绕(最初的使用场景) 横向排列 浮动的基本特点 当一个元素浮动后，元素必定为块盒（会更改display为block） 浮动元素的包含块与常规流一致为父元素的内容盒。 盒子尺寸 宽度为auto时，适应内容高度 高度为auto时，与常规流一致，适应内容高度 margin为auto，
阅读全文
摘要：视觉格式化模型 盒模型： 规定单个盒子的规则 视觉格式化模型（布局规则）：页面中的多个盒子的排列规则,大致为：按照代码书写顺序先从上到下，然年从左到右（国内）。 视觉格式化模型大体上将盒子的排列分为三种方式： 常规流 浮动 绝对定位 常规流布局 常规流、文档流、普通文档流，常规文档流。 所有元素，默
阅读全文
摘要：属性值的计算过程 一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行 渲染每个元素的前提条件：该元素的所有css属性必须由值 一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程，叫做属性值计算过程 1.确定声明值 参考样式表（作者样式表和浏览器默认样式表）里没有冲突的声明，作为c
阅读全文
