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

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

两种解决办法：

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. 阶段3 1.Mybatis_11.Mybatis的缓存_5 缓存的概念

    2.Mybatis中的缓存     什么是缓存         存在于内存中的临时数据.     为什么使用缓存         减少和数据库的交互次数,提高执行效率.     什么样的数据能使用缓存 ...

  2. webService框架CXF的简单使用

    最近本来已经将上一个项目交活,全身心投入了另外项目的前端的开发工作.可之前的项目经理通知我,之前的项目需要做一个webService的功能,于是稍微做了一下webService,可是忘了通知我现在的项 ...

  3. springmvc 获取request response

    RequestContextHolder 获取request public HttpServletRequest getRequest() { return ((ServletRequestAttri ...

  4. Nginx/Nginx基础学习

    Nginx与node.js 一.Nginx与Node.js Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡. ...

  5. js for 循环

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

  6. Java IO NIO详细讲解

    1.IO Java IO概述 2.NIO Java NIO浅析

  7. CAS单点登录系统--进阶

    2.CAS服务端数据源设置 2.1需求分析 我们现在让用户名密码从我们的优乐选的user表里做验证 2.2配置数据源 (1)修改cas服务端中web-inf下deployerConfigContext ...

  8. ARM编程模式和7钟工作模式

    一. ARM的基本设定 1.1. ARM 采用的是32位架构 1.2. ARM约定: a. Byte : 8 bits b. Halfword :16 bits (2 byte) c. Word : ...

  9. Scrapy 教程(十)-管道与数据库

    Scrapy 框架将爬取的数据通过管道进行处理,即 pipelines.py 文件. 管道处理流程 一.定义 item item 表示的是数据结构,定义了数据包括哪些字段 class TianqiIt ...

  10. 各种IE（IE6-IE10）兼容问题一行代码搞定

    x-ua-compatible 用来指定IE浏览器解析编译页面的model x-ua-compatible 头标签大小写不敏感,必须用在 head 中,必须在除 title 外的其他 meta 之前使 ...