web前端——css3学习笔记（三）

盒子

文档中的每个属性都可以被看做是盒子，具有宽高等属性，具体为：
1. width&height 宽、高
2. padding 内间距
3. border 边框
4. margin 外边距，相邻元素的外边距会合并
盒子模型有两种，一种为W3C盒子，即默认盒子，width&height的属性为内容所占的宽高，而盒子的宽为width+paddingLeft+paddingRight+borderLeft+borderRight，高同理。所占屏幕空间的宽为width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight，高同理。
另一种为IE盒子，也称边框盒子，IE盒子的width为整个盒子的宽，内容区的宽为width-paddingLeft-paddingRight-borderLeft-borderRight，高同理。IE盒子所占屏幕空间的宽为width+marginLeft+marginRight，高同理。使用box-sizing属性可以改变盒子模型，content-box为默认模型，border-box为IE盒子模型。

盒子的背景样式—background

1. background-color 背景颜色
2. background-image 背景图片，取值为none、url()
3. background-size 设置背景大小，cover，把背景铺满整个屏幕，按照背景定位区域的最大边扩展，contain，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容，按照背景定位区域的最小边扩展。
4. background-repeat 设置背景图片的重复方式，repeat 平铺，图片重复覆盖整个背景范围，repeat-x/repeat-y，x/y方向平铺一行，no-repeat不重复。
5. background-origin 设定背景的起始点，padding-box 默认，背景图片从内边距的外边缘开始绘制，border-box 背景图片从边框的外边缘开始绘制，content-box 背景图片从内容区开始绘制。
6. background-clip 设定背景的覆盖范围，border-box 默认，背景位于边框以内、padding-box 背景位于内边距以内、content-box 背景位于内容区。
7. background-attachment 设置背景图片的固定点，scroll，默认值，背景图像随页面其余部分的滚动而移动，fixed，背景图相对于视口固定，local背景图相对于元素内容固定。
8. background-position，设置为背景图像初始位置、取值如：center center等或坐标。
9. background速记写法，[<attachment>][<clip>][<color>][<image>][<position>][<repeat>]。

盒子的边框样式—border

1. border-width 为元素指定边框的宽度。
2. border-style 为元素指定边框样式none/hidden/dotted/dashed等
3. border-color 为元素指定边框颜色。
4. border-radius 为元素指定圆角边框的半径。
5. border 边框相关属性的速记写法。

布局

默认文档流

对页面布局不加任何修饰，元素自动布局。

1. 元素在页面中的显示顺序与元素在代码中出现的顺序是一致的。
2. 块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定。行内元素与其他元素共享一行空间，宽高由其内容所决定。
3. 默认布局：从上到下，从左到右，从外到内
   display:block、inline、inline-block行内块级元素 （改变行内、块级）

浮动布局

浮动布局的主要用法是为了让块级元素在一行中显示（列级布局），或者让文字在图片的周围显示。
float属性取值：left/right/none/inherit 向左浮动/向右浮动/默认不浮动/浮动方式继承父元素。float：right 从右往左依次为第一第二第三个元素。
float 会脱离文档流，对后续元素结构有影响，所以需要清除浮动。
清除浮动的三种方法

1. 伪元素

   XX::after {
   content:'';
   display:block;
   clear:both;
   }
   

2. clear：both清除浮动
3. 对父元素进行 overflow：hidden。

定位布局

定位属性left、right、top、bottom

1. 静态定位，position：static；默认定位方式。
2. 相对定位，position：relative；，不脱离文档流，原先位置保留，如果不设置left等属性，依然在原先位置，移动时是相对于当前元素所在位置进行移动。
3. 固定定位，position: fixed;，相对于浏览器视口区进行定位，脱离文档流，默认在原先位置固定定位。不会随着浏览器的滚动而滚动。
4. 绝对定位，position: absolute;，元素脱离文档流。默认在原先位置脱离文档流，显示在其他元素上方，有定位祖先元素，相对于定位祖先元素定位，没有定位祖先元素的，相对于定位祖先元素进行定位。
5. 粘性定位。position: sticky; ，不脱离文档流，跨越特定阈值前为相对定位，之后为固定定位。元素固定的相对偏移是相对于离他最近的具有滚动条的祖先元素，如果祖先元素都不可以滚动，那么是相对于视口区来计算元素的偏移量。
6. 层叠顺序。当两个定位元素叠加在一起的时候，可以使用“z-index”来改变两个定位元素出现的顺序z-index 取值无需指定单位，值大的显示在上方。

伸缩盒布局

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
使用弹性盒布局的父元素 display:flex;
flex-direction: row （列布局） flex-direction: column （行布局）

1. flex容器：设置主轴方向、是否换行、对齐方式
2. flex元素：宽比例（定宽和百分比）、伸缩倍数
3. display:flex;
4. flex-direction:row;列布局，在一行内放很多列 ，flex-direction:column;行布局，在一列内放很多行
5. flex-warp:warp; 自动换行，flex-warp:nowarp; 默认不换行，进行伸缩，flex-warp:warp-reverse;自动换行，倒序输出
6. 速写默认值：flex-flow:row nowarp;