赞
踩
1、什么是静态布局
概念
静态布局,也称为固定布局,是一种传统网页设计。页面布局使用绝对长度单位,采用固定宽度。忽略浏览器实际,网页布局始终按照最初写代码时的布局来显示。
优点:简单
缺点:缺少变化,不能根据屏幕尺寸自适应
适用场景:针对固定分辨率开发特定网页,最简单的方法
2、什么是流体布局
概念
流体布局,也称为流式布局或流动布局,是一种等比例缩放布局方式,在CSS代码中使用百分比来设置宽度,也称百分比自适应的布局。
优点
页面中的元素会按照屏幕分辨率、尺寸自动进行适配调整,但整体布局不变。流式布局是移动端开发常用的一种布局方式。
缺点
适用场景
针对类似设备不同分辨率之间的兼容(分辨率差异较小)
概念扩展
利用文档流的特性实现的各类布局效果,均可称为流体布局,普遍具有自适应特性。例如在width:auto或者格式化宽/高中,通过设定margin/border/padding来影响content的布局
流体布局虽具有自适应特性,但并不等同于自适应布局,这么说吧,流体布局一定是自适应布局,但自适应布局不一定是流体布局。例如,table布局可以设置为100%自适应,但表格不符合流的特性,所以并不属于流体布局
3、什么是自适应布局
概念
针对不同分辨率的屏幕,单独为其创建静态布局,每个静态布局对应一个分辨率范围,这种布局称为自适应布局。
检测屏幕分辨率,切换到对应的静态布局,可以把自适应布局看做是静态布局的集合。
优点
自适应布局需要开发多套界面来适应不同的终端,可以使页面在不同大小终端设备上自适应的显示。
创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。
缺点:针对不同分辨率,需要多套设计,设计和开发的工作量都很大。
适用场景
明确需要适配固定分辨率的屏幕,其余分辨率不作考虑。
概念扩展:
自适应布局也可以是一个很大的概念,凡是具有自适应特性的布局均可以称为自适应布局。
4、什么是响应式布局
概念
开发一套页面,适配不同屏幕分辨率的终端。一套页面兼容多个终端,而非为每一个终端单独做一个特定版本。
优点:一套页面,多端通用,如果足够耐心,效果完美
缺点:要匹配足够多的屏幕,工作量不小,设计也需要多个版本
适用场景
解决不同设备之间、不同分辨率之间的兼容问题。一般用于解决分辨率跨度很大的情况,如PC,平板,手机等设备之间较大的分辨率差异。
5、响应式布局与自适应布局的区别
相同点:都会检测视口分辨率,对展示的页面进行调整
不同点:
结论
总体来说,响应式布局优于自适应布局。但自适应布局更贴近实际,因为你只需要考虑固定几个分辨率即可,而响应式布局需要考虑非常多的状态。
6、什么是rem+js布局
什么是rem
rem是一个相对长度单位,相对于根标签即html标签的字体大小,常用来做移动端适配(一份css+一份js调节font-size),PC端不推荐使用。
rem适配原理
举例如下:
- 1)设置根标签字体大小 = 移动设备 / 设计稿高度 * 100 = 100px, 则1rem = 100px
- 2)设置一个盒子的宽度: width = 1rem(即100px),此时这个盒子屏占比为:1/6
可以看出适配的的关键就在于JS设置html的字体大小: font-size= 移动设备 / 设计稿宽度 * 100。那么这个公式怎么来的呢?
根标签font-size: 62.5%
为什么PC端不推荐使用rem
7、怎么选择合适的布局
1、浮动
概念
设置浮动后,元素会脱离文档流,被称为浮动元素。浮动元素按照指定方向发生移动,遇到父级的边界或相邻浮动元素就会停下来。
特点
浮动元素会产生浮动流,所有产生浮动流的元素,对块级元素不可见。BFC元素、行级元素以及文本都能看到浮动元素,例如,浮动元素会被其它块级元素无视,但块级盒子中文本依然会为浮动元素让出位置。浮动元素彼此能被看到。
浮动流会对它前/后的元素产生影响,必要时记得清除浮动
怎么解决块级盒子包不住子级浮动元素的问题(浮动元素对块级元素不可见)
- 方法1:父级盒子也设置浮动
- 方法2:清除浮动
- 方法3:父级盒子设置为inline-block
- 方法4:父级盒子设置为BFC元素,BFC可以改变块级元素无视浮动元素的特性
怎么清除浮动
<p style="clear:both"></p>
- .wrapper::after {
- content: "";
- display: block;
- clear: both;
- }
浮动元素的贴靠现象
浮动元素与margin负值使用
圣杯布局中,浮动元素设置左外边距为-100%,浮动元素出现上浮的现象。我是这样理解的,同向浮动元素之间会紧挨着排列,不会出现遮盖,且当前行空间不足时,会出现折行现象。
如果当前行空间足够,同向的浮动元素肯定在一行显示。
2、vertical-align知识点
3、绝对定位是否具有流动性
对立方向同时发生定位的时候,且该方向上没有具体的宽或高时,绝对定位具有流动特性。
4、浮动和绝对定位脱离文档流的区别
5、圣杯布局与浮动、浮动与margin负值
学浮动,肯定要了解圣杯布局的。
左栏外边距设置为 -100%,这样一来,由于浮动的关系,左侧栏就能上位,与中间栏交叠在一起,并占据了左边。而右侧栏由于左侧栏的上位,自动向前浮动到了原来左侧栏的位置
6、圣杯布局
7、双飞翼布局与圣杯布局的联系和区别
8、等高布局
9、CSS属性direction
规定文本的方向。ltr表示从左往右,rtl表示从右往左。
10、盒模型
盒模型的构成
标准盒模型和IE盒模型的区别
11、层模型【定位】
绝对定位
相对定位
fixed定位
z-index
一个定位元素代表一层,z-index用来设置层,数值越大越靠近你。z-index是z轴,出发点是屏幕,正方向向你来延伸
12、BFC
什么是BFC元素
BFC全称Block Formatting Context,翻译为块格式化上下文,是由CSS2.1规范定义的一个关于CSS渲染定位的概念。BFC是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然。
特点
如何触发一个盒子的bfc,将其转化为bfc元素
BFC的用途
13、margin塌陷
现象
垂直方向的margin,父子元素(block)是结合到一起的,它俩会取最大的值
解决方案
14、margin合并
现象
兄弟结构的元素(block)垂直方向的margin是合并的,它俩会取最大的值
解决方案
15、CSS选择器的种类
16、CSS权重
17、什么是文档流
流实际上是CSS世界中的一种基本的定位和布局机制,可以理解为现实世界的一套物理规则。文档流就像一条专门用来引导元素排列和定位的水流。
18、table标签
概述
table标签在CSS诞生前就已经出现,table有着自己的世界,流的特性对table不适用。不推荐使用。
缺点
替代方案
如果确实需要表格布局,使用display:table替代,几乎是和table系的元素相对应的
1、适配多分辨率的一种特殊情况
如果多分辨率之间存在倍数关系,则可以只出一套设计,其余分辨率下用缩放加媒体查询搞定。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。