(17)2020-12-23(三栏布局、视口、百分比布局、媒体查询)_weixin_53125613的博客-程序员宅基地


一、三栏布局

在这里插入图片描述

三栏布局的实现方式

1、圣杯布局

  • 总结:
    1.在主体内部外面嵌套了一个div
    2.center在结构上靠前(写在left、right前)
    3.center,left,right都浮动
    4.给主体外面的div清除浮动
    5.center宽度为100%,left,right宽度固定
    6.left通过margin-left为负值(-100%),移动到center最左边
    7.right通过margin-left为负值(自身的宽度),移动到center的最右边。
    8.center的内容会被left,right遮盖
    9.主体外面的div添加一个padding,padding的宽度为left,right的宽度。
    10,left,right相对定位,移动到相应的位置。位移量为自身的宽度。
    11,最后可以给body设置最小宽度和最大宽度。

  • 代码

    <style>
        *{
     
            margin: 0;
            padding: 0;
        }
        body{
     
            font-size: 50px;
            /* 设置body的最小宽度 */
            min-width: 620px;
             /* 设置body的最大宽度 */
            max-width: 1000px;
        }
        header,footer{
     
            width: 100%;
            height: 100px;
            background-color: tan;
            line-height: 100px;
            text-align: center;
        }
       
        .left,.right,.center{
     
            float: left;
            height: 400px;
            line-height: 400px;
            /* text-align: center; */
            
        }
        /* 左右两侧宽度固定 */
        .left,.right{
     
            width: 200px;
        }
        /* center宽度自适应 */
        .center{
     
            width: 100%;
            background-color: teal;
        }
        .left{
     
            margin-left: -100%;
            background-color: thistle;
            position: relative;
            left: -200px;
        }
        .right{
     
            margin-left: -200px;
            background-color: tomato;
            position: relative;
            right: -200px;
        }
        .clearfix{
     
            padding: 0px 200px;
        }
        .clearfix::after{
     
            clear: both;
            display: block;
            content: "";
        }
        /* 总结:
        1.在主体内部外面嵌套了一个div 
        2.center在结构上靠前(写在left、right前)
        3.center,left,right都浮动
        4.清除浮动
        5.center宽度为100%,left,right宽度固定
        6.left通过margin-left为负值(-100%),移动到center最左边
        7.right通过margin-left为负值(自身的宽度),移动到center的最右边。
        8.center的内容会被left,right遮盖
        9.最外层div添加一个padding,padding的宽度为left,right的宽度。
        10,left,right相对定位,移动到相应的位置。位移量为自身的宽度。
        11,最后可以给body设置最小宽度和最大宽度。
         */
        
    </style>
</head>
<body>
    <header>header</header>
    <div class="clearfix">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>
</body>

2、双飞翼布局

  • 总结:
    1,,让left、 right、 center浮动
    (footer上面的元素都浮动了,给footer清除浮动影响。给footer添加属性cleaf:both;)
    2,center宽度不设置,自适应。left、right宽度固定。
    3,设置left的margin-left为-100%,使left移动到center左边。
    4,设置right的margin-left为负的自身宽度,使right移动到center右边。
    5,在center中添加一个div,将内容写在这个div中
    6,为这个div添加一个margin,左右margin的值为left 、right的宽度。给left、right留出宽度,使得center中的内容不受left、right遮盖。
    7,最后可以给body设置最小宽度和最大宽度。

  • 代码:

    <style>
        * {
     
            margin: 0;
            padding: 0;
        }

        body {
     
            font-size: 50px;
            /* 设置body的最小宽度 */
            min-width: 620px;
            /* 设置body的最大宽度 */
            /* max-width: 1000px; */
        }

        header,
        footer {
     
            width: 100%;
            height: 100px;
            background-color: tan;
            text-align: center;
            line-height: 100px;
        }
        /* 让left、right、center都浮动 */
        .left,.right,.center{
     
            float: left;
            height: 400px;
            line-height: 400px;
            /* text-align: center; */
        }
        /* center宽度不设置,自适应 */
        .center{
     
            width: 100%;
            background-color: teal;
        }
        /* left、right宽度固定 */
        .left,.right{
     
            width: 200px;
        }
        /* 设置left的margin-left为-100%,移动到center左边 */
        .left{
     
            margin-left: -100%;
            background-color: thistle;
        }
        /* 设置right的margin-left为负的自身宽度,移动到center右边 */
        .right{
     
            margin-left: -200px;
            background-color: tomato;
        }
        /* 通过给home设置左右margin等于left、right的宽度。使得center中的内容不受left、right遮盖 */
        .home{
     
            margin: 0 200px;

        }

        /* footer上面的元素都浮动了,给footer清除浮动影响 */
        footer{
     
            clear: both;
        }
    </style>
</head>

<body>
    <header>header</header>
    <div class="center">
        <div class="home">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
    <footer>footer</footer>
</body>

3、利用弹性盒子实现三栏

  • 总结:
    1,给主体部分(center、left、right)外面添加一个div,类名为home。
    2,将这个类名为home的div设置为弹性盒子。(display:flex;)
    3,left、right固定宽度。center不设置宽度
    4,将center设置为flex-grow:1;
    5,利用order属性调整left、center、right的排列顺序。元素的order值越小,元素越靠前。
    (left设置order值为1,center设置order值为2,right设置order值为3)
    <style>
         *{
     
            margin: 0;
            padding: 0;
        }
        body{
     
            font-size: 50px;
            /* 设置body的最小宽度 */
            min-width: 620px;
        }
        header,footer{
     
            width: 100%;
            height: 100px;
            background-color: tan;
            text-align: center;
            line-height: 100px;
        }
        .home{
     
            display: flex;
            width: 100%;
            height: 400px;
            font-size: 50px;
            line-height: 400px;
            /* text-align: center; */
        }
        .left,.right{
     
            width: 200px;
            background-color: brown;
        }
        .center{
     
            flex-grow: 1;
            background-color: cadetblue;
        }
        .left{
     
            order: 1;
        }
        .center{
     
            order: 2;
        }
        .right{
     
            order: 3;
        }
        
        /* 1.添加一个最外层的div home
        2.将home设置为弹性盒子
        3.left right 固定宽度 center不设置宽度
        4.将center设置为 flex-grow: 1;
        5.调整顺序,left:1 center:2 right:3
         */
    </style>
</head>
<body>
    <header>header</header>
    <div class="home">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer>footer</footer>
</body>

二、视口

分辨率:屏幕中像素的数量。 PC端常见的分辨率 1920*1080。

手机分辨率一般比较高。

问题:
如果用手机的真实分辨率去呈现网页,网页整体看起来会特别小。

苹果乔布斯在推出iPhone4的时候,为了让页面完整显示在手机上,推出了视口这个概念,让手机浏览器默认为980px。
当前这个980就是视口的宽度。

移动端布局:
1.响应式
2.分别开发两套代码

视口:
(1) 布局视口 :网页的宽度
(2) 视觉视口: 用户可以看到的网站的区域
(3)理想视口: 视觉视口=布局视口

不同的移动设备因为分辨率,屏幕尺寸等问题,造成视觉视口不同,那么理想视口也会不同。

<script>
    // 获取页面中第一个h1标签
    var h1 = document.getElementsByTagName("h1")[0];
    h1.innerHTML = document.documentElement.clientWidth;
</script>
<head>
    <meta charset="UTF-8">
    <!-- 让不同的设备自适应理想视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 自定义视口的宽度 -->
    <!-- <meta name="viewport" content="width=300px"> -->
    <title>Document</title>

三、流式布局 / 百分比布局

流式布局: 百分比布局。

  • 标准文档流浮动之后子盒子的:

宽:相对于父盒子内容宽度的比值。
高:相对于父盒子内容高度的比值。
padding/margin:相对于父盒子内容宽度的比值。

  • 绝对定位之后子盒子的:

宽/padding/margin:相对于定位盒子的宽+左右padding的比值。
高:相对于定位盒子的高+上下padding的比值。

【注】border:不能使用百分数。

四、媒体查询

  • 设备:
    1、 屏幕:PC、 手机端
    2、 打印机
    3、 屏幕阅读器

  • 尺寸:
    常见尺寸 320-420之间

  • 响应式网页:同一个网页,在不同的条件下,使用不同的样式。

  • rem布局/百分比布局:等比例缩放。

  • 【注】
    使用min-width时,通常将小的条件放在前面。
    使用max-width时,通常将大的条件放在前面

1、 媒体查询 实现方式

(1) 内嵌式
格式:@media 设备名 逻辑关键词(and or not)(条件){
样式;
}
(2)外链式:
通过link标签引入样式,再通过media属性设置样式引用的条件。

   <title>Document</title>
   <link rel="stylesheet" href="css/m1.css" media="screen and (max-width:1200px)">
   <link rel="stylesheet" href="css/m2.css" media="screen and (max-width:800px)">

2、 逻辑关键字

and :逻辑与,须满足多个条件。
, :逻辑或,多个条件中满足一个条件即可。
not :逻辑非, 只要不满足该条件就会生效。

(1)逻辑与(and)

可以使用多个and连接多个条件。

    <title>Document</title>
    <style>
        @media screen and (orientation: landscape) and (min-width: 580px){
     
            body{
     
                background-color: crimson;
            }            
        }
    </style>
    <title>Document</title>
    <style>
        /* 设备是屏幕设备  宽度小于等于1500px  */
        @media screen and (max-width:1500px){
     
            body{
     
                background-color: brown;
            }
        }
        /* 设备是屏幕设备  宽度小于等于1200px  */
        @media screen and (max-width:1200px) {
     
            body{
     
                background-color: cadetblue;
            }
        }        
    </style>

(2)逻辑或(,)

使用,隔开。

    <style>
        /* 使用,隔开条件 */
        /* 屏幕设备 或者 宽度大于等于1200px */
        @media print ,(min-width: 1200px) {
     
            h1{
     
                color: brown;
            }
        }
    </style>

(3)逻辑非(not)

    <title>Document</title>
    <style>
        @media not screen {
     
            h1{
     
                color: brown;
            }
        }
    </style>

3、 设备方向

orientation 属性可以定义设备的方向
(1) portrait 竖屏设备 , 高度大于宽度
(2) landscape 横屏设备 ,宽度大于高度

    <title>Document</title>
    <style>
        @media screen and (orientation:landscape){
     
            body{
     
                background-color: brown;
            }
        }
    </style>

4、 常见的查询特性

orientation 设备的方向。landscape横屏设备, portrait竖屏设备
width 设备的宽度
height 设备的高度
min-width 最小宽度
max-width 最大宽度
min-height 最小高度
max-height 最大高度

5、 示例:

(1)内嵌式,逻辑与(and)

    <style>        
        /* 屏幕设备 宽度大于等于800px时生效 */
        @media screen and (min-width: 800px){
     
            body{
     
                background-color: cadetblue;
            }
        }
        /* 
        屏幕设备宽度大于等于1200px时生效 */
        @media screen and (min-width: 1200px){
     
            body{
     
                background-color: brown;
            }
        }        
    </style>
    <style>
        /* 设备是屏幕设备  宽度小于等于1500px  */
        @media screen and (max-width:1500px){
     
            body{
     
                background-color: brown;
            }
        }
        /* 设备是屏幕设备  宽度小于等于1200px  */
        @media screen and (max-width:1200px) {
     
            body{
     
                background-color: cadetblue;
            }
        }        
    </style>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_53125613/article/details/111573977

智能推荐

JAVA Swing日期选择控件datepicker的使用_岚漾忆雨的博客-程序员宅基地_awt 日期控件

声明:本控件来自互联网,仅可应用于个人项目,不可商用,如您未遵守造成的任何问题请自行承担点击下载 datepicker.jar使用方法导入 在eclipse中,单击你的项目名,右键–&gt;Build Path–&gt;Add External Archives–&gt;选择datepicker.jar使用import java.awt.Color;import java.awt.Dimension;im

GWT 入门介绍_struts2的博客-程序员宅基地

GWT 入门介绍GWT使用JSON格式的数据通讯  GWT是 Google Web Toolkit的简称。 GWT是一个以Java语言为工具,以类似Swing的方式编写UI组件,之后通过GWT Compiler编译 为JavaScritp和HTML在客户端浏览器中运行的一个开发工具和编程模型。  GWT应用程序有两种方式运行:Hosted Model     在

实战 | 手把手带你从零搭建永久免费个人博客_可乐python说的博客-程序员宅基地_免费个人博客

文章首发于个人公号:可乐python说0. 前言很喜欢一句话,“好记性不如烂笔头”,一直以来,我都有写技术笔记的习惯,将自己学习的知识、遇到的问题、处理方案等记录下来,长期积累下去,也将是一笔宝贵的财富。上段时间在 知乎 上看到一篇关于博客搭建的文章,写得挺详细,原文使用的环境是 Python 2.7.14,我使用 Python 3.6.8 搭建了一个属于自己的永久免费技术博客。其实,我在 2020 年 4 月 20 日就完成了个人博客的搭建,期间也踩了不少坑。时隔近半年的今天,在踩了众多坑之.

马达 vibrator的android的timed_output实现方式_zzw--开发小农的博客-程序员宅基地

一、  前言前天写了关于安卓震动系统的驱动开发全过程,其中用到了timed_output这个驱动模型,那天只是简单的用了一下,今天拿出来彻底的研究一下,分享一下我的理解。在使用这个驱动模型的时候,我一直都很奇怪,它的名字看上去和时间有很大的关系,在我的心里我也以为它会提供一些与时间操作相关的函数,帮助开发人员简单的完成与时间相关的操作,但是翻遍了它的实现代码都没有发现它与时间的半毛钱关

How to check whether the patches have been applied or not_田攀的博客-程序员宅基地

AD_APPLIED_PATCHES contains the list of patches that were directly applied.AD_BUGS contains the list of all the patches that were directly applied or were contained in the patches that were directly a

随便推点

报告文件上传服务器失败,华三IMCPortal服务器常见错误分析报告.pdf_娟儿啊的博客-程序员宅基地

实用标准文档目录1 Portal Server 进程不能启动 . 22 提示“接收或解析响应报文失败” . 43 上线一段时间掉线 . 64 Portal 服务器获取不到设备信息或者设备...

近期项目bug记录及解决总结如下_Amuletoday的博客-程序员宅基地

Exception一.jar包冲突1.问题描述:2.问题分析:上面的两个slf4j jar包冲突了3.问题解决我们只要在pom.xml排除以上两个中的一个jar包即可:&lt;dependencies&gt; &lt;dependency&gt; &lt;groupId&gt;com.changgou&lt;/groupId&gt; ...

Android -- 基础篇 -- Activity跳转动画的五种方式(下)_qq_21467035的博客-程序员宅基地_activity跳转动画

上一篇文章中我们讲解了在Activity启动过程中获取组件宽高的五种方式。在Activity的启动过程中如果我们直接在生命周期方法中通过view.getWidth()或者是view.getHeight()方法获取组件的宽度和高度其结果都是0,为什么会出现这个问题呢?其实看过我以前写过的Activity启动流程Activity布局加载流程Activity布局绘制流程的同学应该对Activity的启动流程和其布局加载绘制流程不陌生,Activity的启动流程和Activity的布局文件加载绘制流...

Spring 概述核心结构及核心思想_丿涛哥哥的博客-程序员宅基地

Spring 概述及核心结构1、 Spring 简介Spring 是分层的 full-stack(全栈) 轻量级开源框架,以 IoC 和 AOP 为内核,提供了展现层 Spring MVC 和业务层事务管理等众多的企业级应⽤技术,还能整合开源世界众多著名的第三⽅框架和类库,已经成为使⽤最多的 Java EE 企业应⽤开源框架。Spring 官⽅⽹址:http://spring.io/我们经常说的 Spring 其实指的是Spring Framework(spring 框架)。2、 Spring 发

腾讯2019秋招笔试真题 1.小Q爬塔 2.妞妞的问题_pitt1997的博客-程序员宅基地

1.小Q爬塔【问题描述】小Q正在攀爬一座宝塔,这座宝塔很特别,塔总共有n层,但是两层之间的净高却不相同,所以造成小Q爬过每层的时间也不同。如果某一次高度为x,那么爬过这一层所需时间也就是x。小Q还会使用一种魔法,每使用一次可以让他向上跳1层或者两层,但是每次跳后,必须至少爬一层才能接着使用魔法。(你可以认为小Q需要跳两次一层才休息,最后也可以跳到塔外即超过塔高,跳事不消耗时间的)小Q想用最短的时...

关于linuxC语言中创建进程,利用execlp函数执行.c程序问题_苏米素的博客-程序员宅基地_c语言execlp函数

关于linuxC语言中创建进程,利用execlp函数执行.c程序问题对于一个小白来说,这个系统调用真的太难了,完全摸不着头脑啊,一搜execlp函数,全是执行的命令,什么传参硬是没懂。不过说到底,还是自己C语言的基础太薄弱了,对于int main()这样一个最常用的函数都不了解,惭愧惭愧。一般我们很少给int main()函数传递参数,以至于我都不知道int main(int argv,int...

推荐文章

热门文章

相关标签