c s s

疏影流年
103 阅读6分钟

1.BFC

BFC- Block Formatting Context 块级格式化上下文，是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

每一个BFC区域只包括其子元素，不包括其子元素的子元素。

1.1触发BFC的条件

·设置浮动，不包括none

·设置定位，absoulte或者fixed

·行内块显示模式，inline-block

·设置overflow，即hidden，auto，scroll

·表格单元格，table-cell

·弹性布局，flex

1.2 利用BFC解决问题

1.解决外边距的塌陷问题(垂直塌陷)

2.解决包含塌陷

3.清除浮动影响

4.阻止标准流元素被浮动元素覆盖

每一个BFC区域都是相互独立，互不影响的。并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。

2.flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

2.1 容器属性

2.1.1 flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-direction: row | row-reverse | column | column-reverse;
  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

2.1.2 flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;
  • nowrap（默认）：不换行
  • wrap：换行，第一行在上方
  • wrap-reverse：换行，第一行在下方，如下图

2.1.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow: <flex-direction> || <flex-wrap>;

2.1.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

2.1.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;

2.1.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

2.2 项目属性

2.2.1 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex-basis: <length> | auto; /* default auto */

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

2.2.2 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

3.盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式：

  • content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型
  • border-box：怪异盒模型，低版本IE浏览器中的盒模型

区别：

  • content-box：padding和border不被包含在定义的width和height之内。

盒子的实际宽度=设置的width+padding+border

  • border-box：padding和border被包含在定义的width和height之内。

盒子的实际宽度=设置的width（padding和border不会影响实际宽度）

4.实现元素垂直居中

4.1 绝对定位

margin：auto

.son {
    position: absolute;    
    width: 100px;    
    height: 100px;    
    left: 0;    
    top: 0;    
    right: 0;    
    bottom: 0;    
    margin: auto;
}

4.2 transform

.son {
    position: absolute;    
    width: 100px;    
    height: 100px;    
    left: 50%;    
    top: 50%;    
    transform: translate(-50%, -50%);
}

优点：自动计算本身的宽高

缺点：如果同时使用transform的其他属性会产生相互影响。

所以：在不使用transform的其他属性时推荐使用该方式

4.3 弹性盒子实现居中

优点：flex布局灵活，不需要对子元素进行任何的设置

缺点：具有兼容性。子元素的float、clear、position等无法使用，如果同时具有其他布局，容易产生影响。

5.实现元素水平居中

  • margin: 0 auto; 常用于块级元素
  • flex

6.浮动的产生？如何清除浮动？

浮动的语法：float:left/right;

浮动之后会使父元素内的子元素漂浮在父元素上方，造成父元素边框重叠。所以需要清除浮动来使子元素撑开父元素。

什么时候使用清除浮动呢？当父元素没有设置宽度或者高度的时，又需要子元素撑开父元素的时候使用清除浮动。

  • 添加一个空标签，设置clear:both

    <div class="father">
    <div class="son">
        son
    </div>
    <div style="clear:both"></div>
</div>

  • 给父元素添加样式：overflow:hidden

    .father{
    background: red;
    overflow: hidden;
}

  • （推荐）： 使用after伪元素清除浮动

    .father{
    background: red;
    &::after{
        clear: both;
        display: block;
        content: '';
    }
        .son{
            width: 100px;
            height: 100px;
            background-color: saddlebrown;
            float: left;
    }
}

7. rem、em、vh、px各自代表的含义

rem

全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

em

  • 子元素字体大小的em是相对于父元素字体大小
  • 元素的width/height/padding/margin用em的话是相对于该元素的font-size

vw/vh

全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

一般电脑的分辨率有{1920*1024}等不同的分辨率，1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

avatar
文章
阅读
粉丝