html pc端百分比布局,谈一谈pc端布局方式

最开始写一个面试题上来  实现左边宽度固定 右边宽度自适应(思考中)；

接下来就是页面的布局方式

主要有  文档流  浮动层 float属性

1：文档流是页面默认布局  就是 从上到下  从左到右  遇到块级元素换行  这是最基本的布局方式

2：浮动层 就是给元素的float属性赋值后 元素就会脱离文档流 进行左右浮动 紧贴着父元素的左右边框

而此浮动元素在文档流中空出的位置  由后续的(非浮动元素)填充上去； 块级元素直接填充上去，若和浮动元素的范围发生重叠 浮动元素会覆盖块级元素。内联元素是有空隙就会插入

3：用float之后会自动生成块级元素  不论它本身是什么元素

4：用了float之后的元素  如果你不指明他的大小  float之后就会变得尽量小

那么针对上边的问题 昨天宽度固定 右边自适应的问题就可以解决了

*{margin:0;padding:0}

.one{

width:200px;

height:100px;

background-color:#cccccc;

float:left;

}

.two{

background-color: red;

}

111

22

    解决了.....

移动端适配就是让你写出的一套代码在这个屏幕分辨率和那个屏幕分辨率下 效果差不多   主要有下面几个

1：百分比布局

2：弹性盒子布局

3：rem布局   这是我接触过的几个 下面讲一下

加上一句万能的

比如rem 我们之前app是用rem适配的   顶部导航栏可以用flex适配

rem就是根元素(html)的字体大小。  怎么理解呢？  比如现在有两个不同的屏幕需要适配   然后分别是

100*200     150*300  这里只做宽度的适配

然后你现在有个div  宽高是  10px*10px   name如果用rem的原理 就是    首先你设定 根元素 即html的font-size 为一个只  比如 font-size=10px   那么 1rem=10px；

换算成两个屏幕下就是1rem*1rem