css基础笔记

position定位

• static: 正常文档流，无定位
• relative: 正常文档里，相对于自身定位
• absolute: 绝对定位，相对于上级有position属性，且不属于static的元素进行定位，没有则根据Body定位
• fixed: 固定定位，相对于浏览器窗口进行定位
• sticky: 根据窗口滚动，自动切换fixed和relative定位

BFC

概念: 块级格式化上下文，相当于一个容器，内部的布局不会影响外面的元素

创建BFC:

1. 根元素
2. float不为null
3. position的值为absolute和fixed

BFC的使用场景

1. 去除边距重叠
2. 自适应布局

清除浮动

1. 浮动元素下面增加空div，添加样式clear:both;height:0;overfolw:hidden
2. 使用伪类

.clearfix:after{
    visibility:hidden;
    display:block;
    content:' ';
    clear:both;
    height:0;

盒模型

标准盒模型：元素的宽 = content+border+padding

怪异盒模型： 元素的宽 = content(包含border和padding)

flex布局

概念：弹性布局

flex属性是 flex-grow flex-shrink flex-basis的简写，默认为0 1 auto;

flex-grow: 定义了项目的放大比例，默认为0，不放大

flex-shrink: 定义了姓名的缩小比例，默认为1，空间不足，将按比例缩小 flex-basis: 定义分配多余控件之前，占据的主轴控件，默认为auto, 项目本身的大小