关于盒子布局

pujitan978 2018-11-28 10:26:04

盒子布局，能所有的div能都用百分比吗？例如有背景图片是1920x1080的，是不是必须指定最外div高度和宽度，其他div才可以用百分比。

...全文

266 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

Yangxin1210 2018-12-02

打赏
举报

回复

百分比布局是相对于父元素来说的，如果有一些需要做自适应的情况下可以适当的使用百分比来写。

風灬雲 2018-12-02

打赏
举报

回复

css支持vh和vw;就是屏幕高度和宽度的百分之一

mengke.me 2018-12-01

打赏
举报

回复

可以用js获取屏幕可显示区域的高度，然后根据这个高度再百分比

winzond 2018-11-29

打赏
举报

回复

百分比是根据父元素的宽度和高度来计算的，宽度全部用百分比是没有问题的，但是高度全部用百分比，可能会获取不到正确的值，所以，最稳妥的办法还是用JS来实现高度100%，最起码要给最外层的元素设置一个准确的值

div+css布局大全 B/S项目表现层也很重要！

弹性盒子布局（Flexbox）是CSS3引入的一种新的布局模式，它提供了一种更加有效的方式来设计、布局和对齐容器中的项目，即使容器的大小动态改变或者项目的数量未知。弹性盒子布局的主要特点是能够轻松地在不同的屏幕大小和设备上实现一致的布局，通过为父容器（弹性容器）设置或来定义。弹性容器内的子元素（弹性项）会自动成为容器的成员，并按照弹性盒子的规则进行布局。：弹性盒子布局可以轻松地适应不同屏幕尺寸和设备，无论是桌面设备还是移动设备。：可以设置主轴的方向（水平或垂直），从而决定弹性项是水平排列还是垂直排列。

在前端开发中，实现灵活自适应的布局效果是至关重要的。而CSS中的弹性盒子布局（Flexbox Layout）就是一种非常强大且灵活的布局方式，可以帮助我们快速构建各种复杂的布局结构。本文将介绍CSS中的弹性盒子布局的基本概念和用法，包括如何使用弹性容器和弹性项目来实现灵活的布局效果。通过示例代码演示，读者将能够快速掌握弹性盒子布局的核心知识，从而在实际项目中灵活运用。弹性盒子布局是CSS中非常实用的布局方式，能够很好地解决传统布局方式所遇到的一些问题，如水平居中、垂直对齐、自适应宽度等。

CSS 弹性盒子弹性盒子是CSS3的一种新布局模式。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒子布局是一种在前端HTML开发中比较常用的布局方式，还有一些像网格布局，我比较喜欢用弹性盒子布局。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。一、介绍在学习弹性盒子我们必须掌握的：容器存在两条轴：横轴和纵轴父容器属性定义为display：flex，表示该元素内部是弹性盒子布局大体结构分为一个父

DIV+CSS布局 - 弹性盒子布局弹性盒子布局一般分三种：子项水平排放，子项垂直排放，子项水平-垂直居中 1.子项水平排放 flex-direction:row; 首先是原本不使用弹性盒子的时候：使用弹性盒子之后，指定水平排放： flex:1指定占比： 2.子项垂直排放 flex-direction:coumn; 3.子项水平-垂直居中align-items:flex-start;//水平居中 justify-content:center;//垂直居中 4.倒置（附赠） flex-direc

61,129

社区成员

60,711

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章