流体布局：使用百分比来设置元素的宽度，元素的高度按照实际值。

但是流体布局中存在一个边框的问题，元素的边线无法计入百分比。

两种解决办法：

1）width:calc(20% - 4px)

2）width:20%; box-sizing:border-box

box-sizing这个属性能够改变盒子尺寸的计算方式，content-box是默认的盒子尺寸计算方式，而border-box改变默认计算方法，将边框也算在盒子尺寸中，所以这样设置后，width的20%也包括了边框的4px，就解决了这个问题。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--快捷键是meta:vp [tab],使视口适应移动端，没有缩放页面-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>流体布局</title>

    <style type="text/css">

        body,ul{

            margin:0;

            padding:0;

        }

        ul{

            list-style: none;

        }

        .menu{

            height:50px;

        }

        .menu li{

            /*流体布局的width用百分比表示*/

            width:calc(20% - 4px);

            height:50px;

            text-align: center;

            float:left;

            background-color: darkorange;

            border:2px solid #fff;

        }

    </style>

</head>

<body>

<ul class="menu">

    <li><a href="">菜单文字</a></li>

    <li><a href="">菜单文字</a></li>

    <li><a href="">菜单文字</a></li>

    <li><a href="">菜单文字</a></li>

    <li><a href="">菜单文字</a></li>

</ul>

</body>

</html>

CSS3——PC以及移动端页面适配方法（流体布局）的更多相关文章

  1. CSS3——PC以及移动端页面适配方法（响应布局）

    响应布局就是不同宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而使页面适应不同宽度. <!DOCTYPE html> <html lang="en" ...

  2. PC端、移动端页面适配方案

    前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...

  3. 移动端H5适配方法（盒子+图片+文字）

    一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...

  4. 移动端 rem适配方法

    rem适配 一, 网易适配方法         屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)         document.documentElement. ...

  5. pc和移动端页面字体设置

    移动端项目:font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC” ...

  6. webapp设置适应pc和手机的页面宽高以及布局层叠图片文字

    <!DOCTYPE html> <html lang="zh-cn"> <head> <title>我趣旅行网-美剧迷</ti ...

  7. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  8. h5页面适配小结

    大概是去年的7月想写这个内容去加深自己的理解.现在终于回来补上这篇入门小结了. 1.问题描述 适配的目标:在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放( ...

  9. PC端页面适应不同的分辨率的方法 （转载）

    原文地址:https://blog.csdn.net/fengzhen8023/article/details/81281117 上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题 ...

随机推荐

  1. C# WinForm 添加Windows Media Player 控件调试出现未能加载文件或程序集Interop.WMPLib,该怎么解决

    C# WinForm 添加Windows Media Player 控件调试出现未能加载文件或程序集Interop.WMPLib如标题,在窗体中添加Windows Media Player 控件,当调 ...

  2. 阶段3 1.Mybatis_07.Mybatis的连接池及事务_6 mybatis中的事务原理和自动提交设置

    在实际的开发中,建议使用连接池的形式. JNDI的资料 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\讲义+笔记+资料\主流框架\31.会员版(2.0)-就业课(2. ...

  3. Jmeter之仅一次控制器

    在进行压测时,往往登录只需要一次,其他的接口需要循环测试.这里就会用到控制器中的仅一次控制器.只要放置在控制器的请求,不管在哪种情况下,都只执行一次. 1.名称:可以标识在该控制器下主要完成的 工作内 ...

  4. 第十届山东省acm省赛补题（2）

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4124 L Median Time Limit: 1 Second      ...

  5. 分类属性绘图（seaborn的catplot函数）

    可以通过指定catplot()函数的kind参数为"bar", "box", "violin"等分别绘制以前提过的柱形图,盒图,小提琴图等. ...

  6. 应用安全 - Java Web 应用 - Confluence - 漏洞汇总

    CVE-2019-3395 Date: -- 类型: SSRF 影响范围: Confluence 1.*.*.*.*.3.*.*.4.*.*.5.*.* Confluence 6.0.*.1.*.6. ...

  7. win10安装mysql时报错[MY-012576] [InnoDB] Unable to create temporary file; errno: 2

    报错信息 解决: 在my.ini文件里面的 [mysqld]区段内加入: #自己指定的临时文件目录 tmpdir="临时目录" 添加好后初始化成功 接下来启动mysql服务的时候报 ...

  8. Linux操作系统目录一览表

    / // 根目录 /bin //存放必要的命令 比如ls.cp.mkdir等命令 /boot //存放内核以及启动所需的文件 /dev //存放硬件设备文件 比如声卡.磁盘.光驱 /etc //存放系 ...

  9. C函数调用过程原理及函数栈帧分析（转）

    在x86的计算机系统中,内存空间中的栈主要用于保存函数的参数,返回值,返回地址,本地变量等.一切的函数调用都要将不同的数据.地址压入或者弹出栈.因此,为了更好地理解函数的调用,我们需要先来看看栈是怎么 ...

  10. Hyper-V Centos7 虚拟机固定IP

    在网上看到很多篇文章,自己也去试验过,结果实现的效果都不是很理想,并不是自己所需要的,下面是我自己研究,最后成功的经验,希望能够帮到大家.少走一些弯路. 需求 1.无论物理机的网络环境怎么变化,都需要 ...