了解盒模型

层叠 盒模型

实体字符

在HTML中，有些字符会被浏览器特殊处理 如<>会被浏览器认为是标记符号，不会显示到页面中 如果是空白字符，会被浏览器折叠为一个空格 实体字符可用于显示HTML中具有特殊含义的字符 书写格式为&实体字符或&实体编号 常见的实体字符：

空格：实体字符：&nbsp； <符号：实体字符：&lt； ">"符号：实体字符：&gt； &：并且符号：&amp； 版权符号：实体字符：&copy； ###两个标签之间的空白折叠： 由于两个标签之间代码的规范性。 会进行换行（打回车），就会产生空白折叠。

那在页面当中两个标签之间就会产生一个空格。 一个空格会占一个字体的大小（font-size:?px）

<article> <span></span> “一个回车”等同于“空格” <span></span> </article>

上在的例子，两个span之间就会产生空白折叠。如果来进行解决。 在article的样式中，添加font-size:0px; 解决原理：由于一个回车等于一个空格，一个空格的大小由font-size决定。所以，把font-size设置为0，那空格就不占像素，因此解决由于空格增加像素的问题。

预格式元素：HTML怎显示网页就会怎么显示，但是不建议使用，可通过css来调节样式。

常见的css属性

• color：设置元素内容的颜色
• text-align：设置元素内容的对齐方式
• font-size：设置元素内容文字的大小
• font-weight：设置元素内容的文字粗体
• background-color：设置元素的背景颜色

层叠

概述

层叠是一种机制，用于解决css声明冲突，只要有生命冲突就会出发层叠机制（是由浏览器自动触发） 层叠的过程： 1. 比较优先级 2. 比较特殊性 3. 比较源次序 优先级：一个声明的优先级与它的来源和重要性有关 来源的权重：作者样式表>浏览器默认样式表>用户样式表 如果属性值跟上!importan，则表示一条重要声明，它的权重最高 比较特殊性（特指值）： 每一个声明都有一个特殊性（英文specificity） ,当发生冲突时，特殊性低的会被淘汰， 一个声明的特殊性，取决于规则适用范围的大小，规则范围越大，特殊性越低，反之，越高。 基础选择器权重由大到小排列为： 行内样式>ID选择器>类选择器>元素选择器>通配符选择器 在比较特殊性时，每一个冲突声明，会生成4个数字（a,b,c,d）a越大，特殊性越高，若a相同，则比较b，依次类推（通配符选择器的属性为0）

比较源次序： 最后出现的声明获胜，其它全部淘汰。 注：内部样式表和外部样式表权重一样，谁后声明谁胜出，但如果谁当中有ID选择器，则该声明获胜

继承（inherit）

是指子元素会自动拥有父元素的某些css属性，是自动发生的，不需要程序员操作 继承的条件： 1.子元素没有进行声明的时候 2.该属性必须是可以继承的属性（例如边框就是不可以继承的）

强制继承 也叫显示继承，是指将css属性值设置为inherit。 强制继承的常见的两个原因： 1.为了继承不可继承的属性 2.为了继承已被声明属性

盒模型

• 盒子分类 不同的元素产生的盒子类型可能不同，一个元素产生什么样的盒子，取决于它的css的display（显示）。 属性：display 是否可继承：否 默认值：inline display：none，不生成盒子； display：inline，行盒； display：block，块盒； 若属性值取其它值，生成其它盒子
• 盒子的组成 margin：外边距 border：边框 padding：内边距 content：内容
• margin 边框和相邻盒子的距离，分为上（top）、下（bottom）、左（left）、右（right）四个方向 属性：速写属性 书写格式： margin：四边的值 margin：上 左右 下外边距 margin：上下外边距 左右外边距 margin：上外边距 右外边距 下外边距 右外边距
• boeder 分隔线和外部的界限，也是上下左右组成 书写格式： 边框样式：border-top-style（solid 定义实线。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 double 定义双线。双线的宽度等于 border-width 的值。） 边框厚度：border-top-width（不可继承，默认值：medium，表示中等，不能取%号） 边框颜色：border-top-color（color有一个默认值，字体是什么颜色边框就是什么颜色） border-top：厚度 样式 颜色 其它方向书写方式一样
• padding 内容与边框之间的距离，也是分为上下左右边框，书写格式与margin相同
• content 用于存放文本或其他元素的内容 css相关属性： width：宽度 height：高度 overflow：溢出填充盒（visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。） max-height：最大高度 min-height：最小高度 max-width：最大宽度 min-width：最小宽度

关于子盒子

边框盒：由border、padding、content组成 元素的背景默认覆盖边框盒，可通过background-slip修改属性 background-slip属性：设置背景色的渲染区域 含义：背景覆盖范围 不可继承 默认值：border-box

填充盒：由padding、content组成 默认值：content-box；IE浏览器的默认值：border-box