CSS盒模型
-
CSS可以将元素设置一个一个的矩形盒子，将元素设置成矩形盒子后，对页面的布局就是将不同的盒子放在不同的位置
-
每个盒子的组成部分：
-
内容区content width height
-
内边距padding
-
边框border
-
外边距margin
-
盒模型总宽度：width+2border+2padding
盒模型是：内容区+内边距区+边框区+外边距（不会影响盒子大小，只会影响距离）
内容区（width和height）
-
width和height属性用来设置内容区域的宽度和高度
-
width和height属性的单位通常是px，移动端开发也一般会涉及百分数、rem等单位
-
内容默认左上角原点开始排列
-
元素中所有的子元素和文本元素都在内容区排列
-
超出盒子默认向下溢出
块级元素默认的宽度是父级元素的100%
行内元素默认由内容所撑开，不能设置宽高
所有元素height高度默认均为0，实际高度由内容撑开
边框（border）
-
块级元素的边框的作用是在元素的内容区和内边距区外面加上一个边框线
-
通常用来包裹和分割内容，盒子会随着border的设置增大
写法：border：宽度，样式，颜色
线的种类
| 线的种类 | 意义 |
|---|---|
| solid | 实线 |
| double | 双边框（双线） |
| dashed | 虚线 |
| dotted | 点状线（点线） |
border-width，border-color，border-style均可设置4个值
-
1个值：上右下左
-
2个值：上下、左右
-
3个值：上、左右、下
-
4个值：上、右、下、左（顺时针）
border-width：默认3px（为显示double边框）
border-color：默认为文字颜色 transparent（透明色）
border-style：默认为none
border必须设置样式
四个方向的边框
| 小属性 | 意义 |
|---|---|
| border-top：宽度 样式 颜色； | 上边框 |
| border-right：宽度 样式 颜色； | 右边框 |
| border-bottom：宽度 样式 颜色； | 下边框 |
| border-left：宽度 样式 颜色； | 左边框 |
去掉边框：令其为none
内边距（padding）
-
内容和边框之间的距离就是内边距，不能用来放内容
-
内边距的设置会影响和自动大小
-
内边距的颜色继承背景颜色，不能单独设置内边距颜色
-
设置时与border相似，不设置颜色和样式
外边距（margin）
-
外边距不会影响盒子的大小
-
外边距会影响到盒子间或盒子与页面间的距离
-
默认设置左上外边距移动自身，右上外边距移动其他元素
-
margin-right/bottom 正值：自身向右/下走，负值：自身向左/上走
-
设置时与padding相似
-
一些元素有默认的margin（如body：8px，ul：16px，p：16px等），在开始制作网页时，将默认的margin清除
- 使用通配符选中所有标签*{margin：0； }
-
盒子的水平居中需要使用margin：0 auto（自动计算）；
怪异盒模型（IE盒模型）
可选值：
-
content-box：默认值 宽度和高度用来设置内容区的大小
- 网页元素宽度=width+左右padding+左右border
-
border-box：宽度和高度用来设置整个盒子大小
- width中就包含了padding和border的宽度，再设置padding和border将进行“内缩”，不会再进行“外扩”
-
box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，再PC页面开发中较少
-
box-sizing 属性兼容到IE9
盒模型的计算：
-
标准盒模型
-
盒子的左右占位= width +左右padding +左右border +左右margin
-
盒子的上下占位= height + 上下padding + 上下border + 上下margin
-
盒子的宽度= width +左右padding +左右border
-
盒子的高度= height + 上下padding + 上下border
-
-
怪异盒模型
-
盒子的左右占位= width +左右margin
-
盒子的上下占位= height + 上下margin
-
margin盒子的宽度=width
-
盒子的高度= height
-
垂直外边距合并（折叠）现象
发生条件
- 相邻的块级元素垂直方向会发生重叠现象
兄弟外边距合并
-
垂直方向的margin有塌陷现象
-
竖直方向的margin不叠加以更大的数值为准（正值）
-
若两个盒子的外边距一正一负，则取两个数值的代数和
-
若两个盒子的外边距均为负值，自取两个数值绝对值较大的一个的数值
-
无特殊情况不必处理
父子外边距合并
-
父子级之间的上外边距会发生合并，是针对于得比第一个儿子
-
父子外边距合并会影响页面布局，需进行处理
解决办法
-
给父级加上border
-
给父级加上padding
-
给父级overflow ：hidden；给这个盒子开启BFC（块级格式化上下文）
元素显示类型
块级元素特点
常见块级元素：div p h1~h6 ol ul li form dl dt dd等
每个块级元素通常都独占一整行或多整行，可对齐设置宽度、高度、对齐等属性，常用于网页布局和网页结构搭建
-
独占一行
-
可设置宽高，默认宽度为父元素的100%，高度为0px
-
padding减宽度的场景：当块元素没有设置固定的宽度时，宽度和父元素一样；当给该元素设置水平方向的padding时，不会撑大盒子，会从内容区自动减去padding值，宽度尺寸不变
-
固定宽度设置水平padding则会使盒子尺寸变大
-
-
可设置正常上下外边距和内边距
-
结构上：内部可包裹其他任意类型的元素 注：p标签内不能放块级元素
行内元素（内联元素）的特点
常见行内元素：a b em i img span strong等
行内元素标签不占独有的区域，仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式
-
不独占一行
-
行内元素不能设置宽高，宽高由里面的内容撑开
-
左右内外边距边框有效，上下内外边距边框无效，auto水平居中无效
-
标签之间解析空格
-
结构上：内部不能放块级元素（a标签能包裹块级元素做区域链接，此时会把a标签转换为块级元素display ：block，同时，a标签内不能再放a标签）
行内块元素的特点
inline-block ：input select
-
本质上是行内元素，具有块级元素的性质，对内块级元素，对外行内元素
-
支持宽高，默认宽高由里面的内容撑开，不独占一行
-
上下左右内外边距、边框均有效正常，不支持auto水平居中
-
标签之间解析空格
-
结构上：内部可以包裹其他任意类型元素
行内块元素的对齐方式
基线对齐
盒子没有内容时，最底部就是基线
盒子内有内容时，根据盒子内容最下面一行的基线为准
解析空格
针对行内元素或行内块元素而出现的效果
html换行会被解析为空格，也是常说的像素空隙的问题
解析空格原理：空格、换行或tab缩进产生的距离叫做空白文本节点，会被保留为一个空格
解析空格解决办法：
-
删除标签间的空格 缺点：不利于文本格式化，对开发者不友好
-
设置 margin-left为负值 缺点：不同浏览器的间隙不同，需要设置多次
-
给行内块元素父级设置字体大小为0，行内块元素字体大小重新设置，这是目前最通用的做法
元素类型的转换
-
使用display ：block；即可将元素转换为块级元素
-
使用display ：inline；即可将元素转换为行内元素，将元素转换为行内元素的应用不多见
-
使用display ：inline-block；即可将元素转换为行内块
-
使用display ：none；可使元素消失
-
浏览器不会渲染
-
不占据空间，无法点击交互
-
内部后代也不会显示
-
元素的显示与隐藏
透明度（opacity）
取值0~1，0表示完全透明，1表示完全不透明
内部所有内容都会变得透明
元素显示状态（visibility）
-
visibility ：visible；子元素显示
-
visibility ：hidden；不显示隐藏，渲染占据空间
元素显示类型转换
-
display ：none；隐藏不显示，浏览器不会渲染，不占据空间，无法点击交互
-
display ：block；有显示的意义
display : none; visibility : hidden; opacity:0;之间的区别
一、空间占据
display ：none；隐藏后不占据额外空间，它会产生重排（回流）和重绘。重新排列
visibility ：hidden；和opacity：0；元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。
二、子元素继承
display ：none;不会被子元素继承，由于父元素都不在了，子元素自然也就不会显示了
visibility ：visible；被子元素继承，可以通过设置子元素visibility ：visible； 使子元素显示出来
opacity：0；也会被子元素继承，但是不能通过设置子元素opacity：1；使其重新显示
三、事件绑定
display： none；的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件
visibility ：hidden；元素上绑定的事件也无法触发
opacity：0；元素上面绑定的事件是可以触发的
四、过渡动画
transition对于display是无效的
transition对于visibility也是无效的
transition对于opacity是有效
默认样式
通常情况下,游览器会为元素设置一些默认样式
默认样式的存在会影响到页面的布局,通常情况下写代码前必须要去除浏览器的默认样式(pc端的页面)
重置样式表
-
*把所有标签样式清除
-
把所有需要清除的标签样式清除
reset.css直接去除了游览器的默认样式：meyerweb.com/eric/tools/…
normalize.css 对默认样式进行了统一：necolas.github.io/normalize.c…
