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

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

两种解决办法：

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# App.config 自定义 配置节

    1)App.config <?xml version="1.0" encoding="utf-8" ?><configuration>  ...

  2. Openstack 实现技术分解 (3) 开发工具 — VIM & dotfiles

    目录 目录 前文列表 扩展阅读 前言 插件管理 Vundle 主题 Solarized 浏览项目目录结构 Nerdtree Symbol 窗口 Tagbar 文件模糊查询 CtrlP 代码补全 You ...

  3. flex 判断对象的类型

    在判断flex对象的类型之前,首先是获取对象类型,获取的方式有: mx.utils.NameUtil.getUnqualifiedClassName(object:Object):String  // ...

  4. go bigfile （文件传输管理系统）前端分片上传demo

    BIGFILE Github地址: https://github.com/bigfile/bigfile 欢迎大家前来issue & star BIGFILE 中文文档地址:https://l ...

  5. 算法初级（scala）

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/two-sum 1.给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为 ...

  6. pandas中.value_counts()的用法

    原文链接:https://www.jianshu.com/p/f773b4b82c66 value_counts()是一种查看表格某列中有多少个不同值的快捷方法,并计算每个不同值有在该列中有多少重复值 ...

  7. kafka学习(二)

    创建kafka生产者 要往kafka写入消息,首先要创建一个生产者对象,并设置一些熟悉.kafka生产者有3个必选的属性.   1.bootstrap.servers 该属性指定broker的地址清单 ...

  8. 远程连接Mysql报错 java.sql.SQLException:null,message from server ... is not allowed to connect

    在MySQL命令行输入如下命令: use mysql; select host from user; update user set host ='%' where user ='root'; 然后重 ...

  9. 关于R文件

    1 什么是R文件 R文件是自动生成的文件,里面保存的是res目录下所有资源的ID. 2 如何使用 2.1 在java代码中使用 txtName = (TextView)findViewById(R.i ...

  10. C#WebApi自动生成文档

    1.效果图 2.在webApi项目,打开Nuget,搜索WebApiTestClient,安装WebApiTestClient,注意是给HelpPage的 3.打开引入WebApiTestClient ...