前端-布局与事件

提示：文章源于牛客网职导课程笔记与思考总结，仅供交流。

一、盒模型宽度的计算

1.普通盒模型

默认盒子属性：box-sizing:content-box;

offsetWidth=(width+padding+border) 不算margin时。

2.怪异盒模型

设置语句：box-sizing:border-box;

offsetWidth=width 此时padding和border都被挤压到内容里，总共100px。

二、margin纵向重叠

margin纵向重叠时取重叠区最大值，不进行叠加。

横向重叠时直接叠加。

三、margin负值问题

1.margin-top是负值，元素会向上移动，该元素下方元素也会向上移动，文档流。

  margin-left是负值，元素向左移动。

2.margin-right负值，右侧元素左移，自身不受影响。

  margin-bottom负值，下侧元素上移，自身不受影响。

四、BFC 清除移动

1.block format context：块级格式化上下文。

2.一块独立的渲染区域，内部元素渲染不会影响边界以外的元素。

3.形成BFC的条件：

用以下情形举例：

<div>
    <ul style="float:left">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

①float不设置成none（div与ul同时浮动）

②position是absolute或者fixed （绝对定位）

③overflow不是visible

④display是flex或者inline-block （前者弹性盒，后者行内块）

五、float

 1.圣杯布局和双飞翼布局

1.1作用

①实现PC端三栏分布，中间一栏最先渲染

②实现两边宽度固定，中间自适应

1.2圣杯布局

左右盒子和中间盒子都放在一个父盒子里。

中间最先渲染，要求中间一定要位于HTML页面的第一个位置。

然后在外层盒子加一个padding值，左右两盒子放在padding的位置使得左右两盒子不会挡住中间的值。三个盒子都展示在同一行，是因为设置了浮动关系。

1.3双飞翼布局

中间盒子自己有一个父盒子。

为了不让左右盒子覆盖中间盒子内部，中间盒子内部设置margin。

左边盒子设置margin-left:-100%;

2.手写clearfix

.clearfix::after{
   content: '';
   display: block;
   clear: both;
}
/*兼容IE低版本*/
.clearfix {
   zoom: 1;
}

六、flex布局

1.flex基本了解

有两层元素，通过父级元素的属性来控制子级元素的排列及自适应。

元素结构：容器内部放子元素，容器设置display：flex

布局思想：

①设置主轴方向控制子元素排列方向。

②设置容器相关属性控制子元素布局。

③设置子元素相关属性控制子元素布局。

容器样式属性：

flex-direction 方向

justify-content 居中

flex-wrap 换行

align-items 侧轴

子元素：align-self

2.实现骰子三点

容器设置：flex，justify-content:space-betwen

2,3子元素设置align-self

七、元素居中

1.定位回顾

relative相对自身定位。

absolute依据最近一层的定位元素定位。

              定位元素：设置了absolute、relative、fixed等。

              找不到最近定位元素，依据body。

2.行内元素水平垂直居中

行内元素居中要在该元素的父元素设置。

水平居中：text-align:center

垂直居中：line-height:盒子高度

3.块级元素水平垂直居中

水平居中：margin：0  auto；

水平垂直都居中：

①position：absolute；top：50%；left：50%；transform：translate（-50%，-50%）

②position：absolute；top：0；left：0；right：0；bottom：0；margin：auto；

③容器设置：display：flex；justify-content：center；align-item：center

④容器:display:table-cell; text-align:center; vertical-align:middle; 子元素：display：inline-block；

（top left的50%是父盒子的50% 而transform：translate 的50%是相对于自身宽高的50%

display：table-cell  会“创建匿名表格元素”）

八、样式单位

em：相对于父元素的字体大小的单位换算。

rem：相对于HTML标签字体大小的单位，文档根元素字体大小控制全页面的单位换算。

vw：相对于视口宽度的大小的单位，20vw=视口宽度/100*20。

vh：相对于视口高度的大小的单位，20vh=视口高度/100*20。

九、移动端布局方案

1.流式布局（百分比布局）

不能改变字体大小，可改变元素尺寸，高度固定。

2.flex（弹性盒）

使用方便，通常配合其他方案一起使用。

3.rem+媒体查询/flexible.js

改变单位，字体大小元素尺寸均可改变。

4.rem+vw

兼容性不如之前的。

十、样式预处理器

1.sass和scss的区别

CSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

①文件扩展名不同。

②语法书写方式不同，sass是以严格的缩进式语法规则来书写，不带大括号（{}）和分号（；），而scss的语法书写和我们的css语法书写方式非常类似。

2.sass的作用

变量、嵌套、模组、混合、操作符。

十一、iconfont

    

冒泡事件的原因是：dom是有dom事件流的，dom事件流分为3个阶段，捕获阶段、目标阶段、冒泡阶段。默认dom事件监听冒泡阶段。

event.preventDefault 阻止默认事件

注：文章图片来源于牛客职导课程