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

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

两种解决办法：

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. Python基本语法_基本数据类型_序列类型详解

    目录 目录 序列 序列的标准操作符 切片操作符 一个例子 字符串的连接 序列的功能函数 enumerate 枚举出序列对象的元素 len 获取序列对象的长度 min 取出sequence中的最小值 m ...

  2. RESR API (二)之Responses

    Responses 与基本的HttpResponse对象不同,TemplateResponse对象保留 the details of the context that was provided by ...

  3. javascript 异常处理

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. Android怎么改图标都不生效&&Android studio 如何修改APP图标和名字

    去这里(我自己写的),解决方法包你满意: https://blog.csdn.net/qq_43141611/article/details/101875545

  5. JZOJ2678 树B

    题 Description 已知无向连通图G由N个点,N-1条边组成.每条边的边权给定.现要求通过删除一些边,将节点1与另M个指定节点分开,希望删除的边的权值和尽量小,求此最小代价. Input 每个 ...

  6. 如何在centos6和centos7上部署nfs共享服务器和客户端

    nfs共享服务为中小型企业在存储上提供了有效的节省空间,许多大型的网站也在使用nfs,如百度和阿里等,下面结合自己所学的知识,阐述如何在centos6和centos7下配置nfs.注:除了必要的说明外 ...

  7. linux中的文件类型以及查看文件类型的方法

    Linux文件类型和文件的文件名所代表的意义是两个不同的概念,在linux中文件类型与文件扩展名没有关系.它不像Windows那样是依靠文件后缀名来区分文件类型的,在linux中文件名只是为了方便操作 ...

  8. Window Operations详解

    window(windowLength, slideInterval):返回窗口长度为windowLength,每隔slideInterval滑动一次的window DStream countByWi ...

  9. js 全世界最短的IE浏览器判断代码

    var ie = !+"\v1"; 仅仅需要7bytes!参见这篇文章,<32 bytes, ehr ... 9, ehr ... 7!!! to know if your ...

  10. Python 自定义三方库

    一.注册一个pypi账号 https://pypi.org/ 二.github上创建一个项目 https://github.com/ 三.编写自己的python项目 项目结构(参考):https:// ...