【从0到1学Web前端】CSS定位问题二（float和display的使用） 分类： HTML+CSS 2015-05-28 22:03 812人阅读 评论(1) 收藏
display 属性规定元素应该生成的框的类型。
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
浏览器支持:
所有主流浏览器都支持 display 属性。
注释：任何版本的 Internet Explorer （包括 IE8）都不支持
"inherit"、"inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、以及"table-row-group"属性值。
因为对块级元素设置display：inline-block的时候可以达到与float相同的效果。就是使块级元素末尾没有换行符。那么到底什么时候使用float和什么时候使用display：inline-block呢？
大多数时候
float的出现是为了处理文字环绕。所以当我们为了实现文字环绕的时候使用float而处理非文字环绕的情况下，则以使用display：inline-block为主。
1.1float实现的导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>floatNav</title>
<style type="text/css">
body, ul{margin:0;padding:0;}
#body-div{
background-color:#eaebea;
height:40px;
/*设置当浏览器窗口变短时li换行显示*/
overflow:hidden;
/*这里主要是让父级div跟据内容自动伸长*/
float:left;
}
ul li {
list-style:none;
float:left;
border-right:1px solid #d2d5d2;
line-height:40px;
padding: 0 10px;
}
ul li a{
text-decoration:none;
}
a:link, a:visited{color:#3f3b3c;}
a:hover{color:#fd687f;}
</style>
</head>
<body>
<div id="body-div">
<ul>
<li><a href="">首页</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容2</a></li>
<li><a href="">内容3</a></li>
<li><a href="">内容4</a></li>
<li><a href="">内容5</a></li>
<li><a href="">内容6</a></li>
<li><a href="">内容6</a></li>
</ul>
</div>
</body>
</html>在chrome和firefox还有IE中，显示效果如下：
1.2display：inline-block实现的导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inlineNav</title>
<style type="text/css">
body, ul{margin:0;padding:0;}
#body-div{
background-color:#eaebea;
height:40px;
/*这里主要是让父级div跟据内容自动伸长*/
display:inline-block;
/*设置当浏览器窗口变短时li换行显示*/
overflow:hidden;
margin:0 auto;
}
ul li {
list-style:none;
display:inline-block;
border-right:1px solid #d2d5d2;
line-height:40px;
padding:0 10px;
}
ul li a{
text-decoration:none;
}
a:link, a:visited{color:#3f3b3c;}
a:hover{color:#fd687f;}
</style>
</head>
<body>
<div id="body-div">
<ul>
<li><a href="http://www.baidu.com" target="_blank">首页</a></li>
<li><a href="">内容1</a></li>
<li><a href="">内容2</a></li>
<li><a href="">内容3</a></li>
<li><a href="">内容4</a></li>
<li><a href="">内容5</a></li>
<li><a href="">内容6</a></li>
<li><a href="">内容7</a></li>
</ul>
</div>
</body>
</html>这段代码在chrome和firefox,IE(>=8)中的效果如下：
在IE(<=7)的效果如下：
因为IE(<=7)不支持display属性（开头关于display的解释）。
版权声明：本文为博主原创文章，未经博主允许不得转载。
【从0到1学Web前端】CSS定位问题二（float和display的使用） 分类： HTML+CSS 2015-05-28 22:03 812人阅读 评论(1) 收藏的更多相关文章
- 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏
引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...
- 1.PHP站内搜索 分类： PHP开发实例 2015-07-31 22:48 4人阅读 评论(0) 收藏
PHP站内搜索:多关键字.加亮显示 1.SQL语句中的模糊查找 $sql = "SELECT * FROM `message` WHERE `content`like '%$k[0]%' a ...
- ListView 分类： WinForm 2014-07-18 22:03 289人阅读 评论(0) 收藏
一.ListView类(转载) 1.常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示:只有在Details视图该属性才有意义. (2) GridLin ...
- UI基础:视图控制器.屏幕旋转.MVC 分类： iOS学习-UI 2015-07-02 22:21 62人阅读 评论(0) 收藏
UIViewController 视图控制器,继承自UIResponder,作用:管理视图并且响应事件 功能: 1.分担APPdelegate的工作 2.实现模块独立,能提高复用性 创建UIViewC ...
- UI基础:UI程序执行顺序(UIApplicationMain()函数),自定义视图 分类： iOS学习-UI 2015-07-02 22:09 68人阅读 评论(0) 收藏
UI程序的一般执行顺序: 先进入main里面,执行函数UIApplicationMain(),通过该函数创建应用程序对象和指定其代理并实现监听,当执行函数UIApplicationMain()时还会做 ...
- 动态规划：最大连续子序列乘积 分类： c/c++ 算法 2014-09-30 17:03 656人阅读 评论(0) 收藏
题目描述: 给定一个浮点数序列(可能有正数.0和负数),求出一个最大的连续子序列乘积. 分析:若暴力求解,需要O(n^3)时间,太低效,故使用动态规划. 设data[i]:第i个数据,dp[i]:以第 ...
- 修改android应用包名 分类： android 学习笔记 2015-07-16 22:48 4人阅读 评论(0) 收藏
由于项目需要,要修改已经开发好的应用包名,这本身很简单,但是如果你没找到门道,可能会白白浪费许多时间. 修改包名有三个地方要改,这三个地方的修改一定要按顺序来,否则你可能会遇到许多不必要的麻烦. 1. ...
- javascript的全局变量 分类： C1_HTML/JS/JQUERY 2014-08-07 11:03 562人阅读 评论(0) 收藏
javascipt是一门面向对象的编程语言.由于存在一些全局属性及全局函数,因此可以认为存在一个全局变量,这些全局属性及全局函数均是其属性或函数. 在js核心中,并没有定义一个具体的全局变量,因此,j ...
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
随机推荐
- 安卓hid驱动触摸屏
在kernel/drivers/hid/ 目录下三个文件中添加usbtouch的pid vid, 文件分别是hid-multitouch.c .hid-ids.h.hid-core.c 具体如何添加可 ...
- 学以致用二---配置Centos7.2 基本环境
Centos 7 虚拟机安装好后,接下来该配置环境了. 一.查看系统版本 cat /etc/redhat-release 二.修改主机名 /etc/hostname 注意,hostname里的内容为l ...
- C++之引用和指针
作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7050431.html C++之引用和指针 C++引用 引用的基本用法: in ...
- （转）C# 中使用分布式缓存系统Memcached
转自:http://blog.csdn.net/devgis/article/details/8212917 缘起: 在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了 ...
- Codeforces Round #540 (Div. 3)--1118D2 - Coffee and Coursework (Hard Version)
https://codeforces.com/contest/1118/problem/D2 和easy version的主要区别是,数据增加了. easy version采用的是线性查找,效率低 在 ...
- hdu 5088 高斯消元n堆石子取k堆石子使剩余异或值为0
http://acm.hdu.edu.cn/showproblem.php?pid=5088 求能否去掉几堆石子使得nim游戏胜利 我们可以把题目转化成求n堆石子中的k堆石子数异或为0的情况数.使用x ...
- SRM476
250pt 题意:饲养N<=50只Badgers,每只食量是X[i],当没看到别的一只Badgers吃东西时,它的食量就会增加Y[i],现在一共用P的粮食,问最多能养的起多少只獾. 思路:枚举一 ...
- Stringbuffer与substring
1. Stringbuffer 有append()方法 Stringbuffer 其实是动态字符串数组 append()是往动态字符串数组添加,跟“xxxx”+“yyyy”相当那个‘+’号 跟Stri ...
- CentOS下双网卡绑定-bond0
网卡绑定就是多张网卡逻辑上作为一张网卡用.可分为,负载均衡绑定和冗余绑定两种. 加载bonding驱动 #modprobe bonding 1.编辑虚拟网络接口配置文件 [root@test~]# ...
- 11i - 12 Gather Schema Statistics fails with Ora-20001 errors after 11G database Upgrade (文档 ID 781813.1)
11i - 12 Gather Schema Statistics fails with Ora-20001 errors after 11G database Upgrade (文档 ID 7818 ...