anguler画面布局适应屏幕大小_流式布局(百分比布局)

布局特征:

高度写死&＃xff0c;宽度自适应。并不是百分百还原设计图

比如&＃xff1a;设计图是针对320px屏幕设计的&＃xff0c;那么只有在320设备的屏幕中&＃xff0c;才是完美的效果&＃xff0c;其他情况都会拉伸

小图片、小图标、文字大小一般写死

大图片一般宽度自适应&＃xff0c;高度等比例缩放(例如:轮播图)

经典的流式布局&＃xff1a;

左侧固定&＃xff0c;右侧自适应

方法有很多种,简单例举3种。

步骤:

1、左侧宽度写死——》定位——》给父元素设置左padding即可

2、右侧宽度不用设置(自适应)

拓展&＃xff1a;想详细了解BFC戳这里

overflow:hidden 会触发盒子的BFC

触发BFC的盒子的特点&＃xff1a;

• 解决margin的塌陷
• 清除浮动
• 不会在浮动元素下面&＃xff0c;会被挤到一边去

步骤:

1、左侧宽度固定——》左浮动

2、右侧宽度是自适应——》触发bfc——》overflow&＃xff1a;hidden

(对flex布局不太了解的朋友可以去看看我的另一篇关于flex布局的博客)flex布局(弹性布局、伸缩布局)

步骤:

1. 给父盒子设置为弹性盒子
2. 左侧宽度写死
3. 右侧宽度按照份数分配父元素主轴(宽度)的剩余空间

右侧固定&＃xff0c;左侧自适应

注意:在右侧固定&＃xff0c;左侧自适应的布局中如果要使用浮动&＃43;触发BFC的方法,在html结构中需要先写右边的盒子!!!

原因:浮动元素受到上面元素边界的影响,导致盒子上不去

两侧固定&＃xff0c;中间自适应(圣杯布局、双飞翼布局)

注意:同样在两侧固定&＃xff0c;中间自适应(圣杯布局、双飞翼布局)中如果要使用浮动&＃43;触发BFC的方法,在html结构中需要先写左边的盒子,在写右边盒子,中间盒子最后写

原因:浮动元素受到上面元素边界的影响,导致盒子上不去

等分布局

按照宽度百分比可以完成&＃xff0c;但是当给每一个盒子设置border之后&＃xff0c;会发现盒子掉下来了

只要进行移动端布局&＃xff0c;盒子约定俗成都需要加上自动内减。