【无标题】css

css中广泛使用两种盒子：

• 块级盒子（div，p，h1...）
  特性：独占一行，支持所有样式，不写宽度的时候，和父容器宽度相同，所占区域一定是个矩形
• 内联盒子（span，a，strong...）
  特性：不会产生换行，有些样式不支持（width，height等），不写内容的时候，宽度由内容决定，所占区域不一定是个矩形（一旦换行后就不一定是了），内联盒子之间有空隙（可以t通过放同一行解决）

css盒子的组成：

• content内容
• padding内填充
• border边框
• margin外边框

盒子模型分为标准盒模型和怪异盒模型

1. 在标准盒模型中，content区域的宽高不受到padding，border的影响。

标准盒子的宽高 = content + padding + border

2. 在怪异模型中，所有的宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分

将盒子改成怪异模型：box-sizing: border-box。默认值是content-box

怪异盒子的宽高 = content

标准盒子模型下，有宽度百分百的时候，再加上padding会导致溢出，此时将该盒子改成怪异盒模型即可解决这个问题

浮动样式详解

当元素被浮动时，会脱离文档流，根据float的值向左或向右移动，直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止，是CSS布局中实现左右布局的一种方式。

元素浮起来后，只会影响到后面的，不会影响到之前元素的布局。

浮动加给内联盒子后，内联盒子可以设置宽高。

子元素一旦都浮起来了，父级元素的高度实际就塌下去了，解决方案可以使用空标签，BFC等

//  空标签解决法  
<div class="father ">
    <div class="child"></div>  
</div>

// 类名解决法
.clearfix::after {
    content: "";
    /* clear只能针对块级盒子生效，内联盒子是不生效的，所以单独一个content是内联盒子无效，得转换成    
    块级盒子：display */
    clear: both;
    display: block;
}
<div class="father clearfix">
    <div class="child"></div>  
</div>

绝对定位及特性

• 绝对定位的元素脱离了文档流，绝对定位元素不占据空间
• 具备内联盒子的特性：宽度又内容决定
• 具备块级盒子的特性：支持所有样式
• 绝对定位相对于最近的非static祖先元素定位。当这样的祖先元素不存在时，则相对于可视区定位

固定定位及特性（fixed）

相对于可视区进行偏移，跟其他元素无关

粘性定位及其特性

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位

flex布局

flex使用换行wrap后，元素没有紧挨在一起，原因：父元素设置了高度，可以取消高度即可

弹性布局适应于一列布局，不适应于多行多列，多行多列推荐用grid布局

// 控制方向和换行
flex-flow: row  wrap;

不依靠flex实现上下左右居中对齐