CSS常见布局及其实现

最新推荐文章于 2024-06-02 18:18:06 发布

fishboner

最新推荐文章于 2024-06-02 18:18:06 发布

阅读量196

点赞数

分类专栏： CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_43388031/article/details/130029275

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在实现项目的静态页面时，我们首先要从大局出发，思考整个页面的布局方式，根据需求选择合适的布局方式搭建起页面的基础框架，之后再去填充细节。

一、常见的布局和各自的使用场景

二、拓展与补充

接下来，读者也将从上图出发，做一些进一步深入和拓展

1.布局单位

em/rem

em:相对于父元素font-size计算值的倍数
rem:相对于根元素font-size计算值的倍数(1rem=16px)

vw/vh

vw:1vw 等于视口宽度的1%
vh:1vh 等于视口高度的1%

vmin/vmax

vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw
vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh

2. rem布局方案技术使用

less+媒体查询+rem

flexible.js+rem

3. display

display可以定义flex和grid，都是功能非常强大的布局方式

flex

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

弹性布局（display:flex;）属性详解 - cdgogo - 博客园 (cnblogs.com)

grid

为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效

CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)

4.媒体查询

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

media-type

all
print
screen
speech

关键字

and：且
not：非
only:指定某个媒体类型

media-feature-rule

width:设备页面可见宽度
min-width:设备页面最小可见宽度
max-width:设备页面最大可见宽度

案例

 @media screen and (max-width: 539px)  {
            body {
                background-color: blue;
            }
        }
        @media screen and (min-width: 540px) and (max-width: 969px ) {//可以省略（max-width:969px）效果一样
            body {
                background-color: pink;
            }
        }
        @media screen and (min-width: 970px) {
            body {
                background-color: saddlebrown;
            }
        }