01 CSS

1、如何让一个盒子垂直水平方向居中

1. 定位1 需要知道盒子的宽高在这里插入图片描述

2. 定位2 盒子必须要有宽度和高度 但是不用考虑必须是多少在这里插入图片描述

3. 定位3 只兼容到IE9以上在这里插入图片描述

4. display:flex (IE10 移动端经常使用这个)

在这里插入图片描述

5. js方法 js实现就是模拟css写样式

在这里插入图片描述

6. 基本不怎么使用 display:table-cell 主要是控制文本的 所以要将盒子变成文本 固定宽高的父级在这里插入图片描述

在这里插入图片描述

2、CSS盒子模型

content、padding、border、margin

标准盒模型(content-box)、ie怪异盒模型(border-box)、flex弹性伸缩盒模型、column多列盒模型

怪异盒模型的好处,固定到border控制宽高,不用重新计算padding和border

1. 其实我们最常用的就是标准盒模型,标准盒模型写的width和height代表的是内容的宽高,并不是盒子的宽高,盒子的宽高是content+padding+border计算得来的,这个容易在项目中遇到一些问题,

padding和border都会撑大盒子,所以给了盒子padding和border之后,需要手动更改一下宽高,后来CSS3添加了ie盒模型,我们写的宽高是盒子的大小,当我们给盒子添加了padding与border值之后,盒子的大小不会改变,会自动缩放内容,这个用起来比较方便,所以我在真实项目中大多数都使用IE盒模型。

2. 在做移动端开发的时候,多应用于flex弹性伸缩盒模型

flex详见阮一峰的flex布局

3. 多列布局(基本上不用)

4. 多突出自己项目中遇到哪些问题点,所以我用了这种方案,它能帮助我解决哪些问题。并且提出自己看过一些源码,它是怎么做的。

3、几大经典布局

–左右固定、中间自适应

1. 圣杯布局 在这里插入图片描述

      ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201020180917536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlaW1laWk=,size_16,color_FFFFFF,t_70#pic_center)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. 双飞翼布局在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 使用calc (少用)

在这里插入图片描述

4.flex在这里插入图片描述

5. 定位在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

移动端响应式布局的三大方案

media 媒体查询 移动端与PC端公用一套方案

rem适配布局

部分会用flex布局

简单会用百分比布局 (vh/vw)

使用css ,让一个div消失在页面中

请说明z-index的工作原理,适用范围

项目中哪些地方用到负margin

谈谈你对HTML5的理解

脱离文档流

定位 浮动 transform CSS动画

如何使一个div里面的文字垂直居中,且文字根据屏幕大小自适应

不考虑其他因素 下面哪种渲染性能比较高

在这里插入图片描述
是第二种 CSS选择器渲染机制是从右往左查询
第一种会先找到a 再找.box 下面的a

猜你喜欢

转载自blog.csdn.net/seimeii/article/details/109183989