目录:
HTML+CSS3(一)——认识浏览器
HTML+CSS3(二)——HTML 初识
HTML+CSS3(三)——HTML基本标签
HTML+CSS3(四)——表单pattern正则属性
HTML+CSS3(五)——CSS基础
HTML+CSS3(六)——行内元素和块级元素
HTML+CSS3(七)——display属性(前面文章已讲过,这里转载一篇)
HTML+CSS3(八)——CSS权重
HTML+CSS3(九)——CSS高级技巧
HTML+CSS3(十)——CSS3新特性之过渡
HTML+CSS3(十)——CSS3新特性之2D变形和3D变形
HTML+CSS3(十)——CSS3新特性之动画
HTML+CSS3(十 一)——案例
HTML+CSS3(十二)——CSS常见问题
display的属性
一、关于diaplay:none
(一)让一个元素隐藏的方法(比较常见的5种)
diaplay:none
visibility:hidden
opacity:0
.hide { //将元素移出可视区
position: absolute;
top: -9999px;
left: -9999px;
}- 将元素的宽度和高度设置为0
(二)diaplay:none
和 visibility:hidden
有什么区别
1.display属性依照词义真正隐藏元素,被隐藏的元素不占据文档空间,这种方式产生的效果就像元素完全不存在。不过请注意,通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。
2.如同opacity属性,被隐藏的元素在文档布局中仍保留原来的空间,与opacity唯一不同的是它不会响应任何用户交互。
二、关于diaplay:block
块状元素的特点
(1)每个块级元素都从新的一行开始,并且其后的元素也另起一行;(一个块级元素独占一行)
(2)元素的高度、宽度、行高以及顶和底边距都可设置;
(3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
三、关于diaplay:inline
内联元素的特点
(1)和其他元素都在一行上;
(2)元素的高度、宽度、行高、外边距和内边距都不可设置;
(3)元素的宽度就是它包含的文字或图片的宽度,不可改变。
四、关于diaplay:inline-block
内联块元素的特点
(1)和其他元素都在一行上;
(2)元素的高度、宽度、行高以及顶和底边距都可设置。
问题一: inline-block元素上浮无法对齐
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
border: 0;
padding: 0;
margin: 0;
}
body{
font-size: 14px;
}
.wrap{
width: 960px;
margin: 0 auto;
margin-top: 100px;
}
.ad{
width: 100px;
height: 60px;
background-color: #0088ff;
color: #fff;
display: inline-block;
*display: inline;
*zoom:1;
}
</style>
</head>
<body>
<div class="wrap">
<div class="ad">过客</div>
<div class="ad">想把我唱给你听想把我唱给你听</div>
<div class="ad"></div>
<div class="ad">穿越太平洋</div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
出现这种情况的原因是:
行内元素和替换元素(如<input><textarea>等)会有一个叫做基线(baseline)的玩意,他的位置
位于文本框的底部,即文字的最底端;当块状行内元素无文本填充的时候,它的基线就会自动移至元素的
最底端;同时,图片以及其他非替换元素的基线也为元素的最底端。
- 1
- 2
- 3
解决办法:
既然页面的混乱是因为“基线对齐”导致的,那只需要设置元素的垂直对齐不参照基线即可,引入vertical-align属性,设置元素的垂直对齐方式。
top、middle、bottom任选其一就可实现对齐。
将 vertical-align:top; 加入 .ad{}样式即可,
- 1
- 2
问题二:inline-block元素的默认间距问题
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
border: 0;
padding: 0;
margin: 0;
}
body{
font-size: 14px;
}
div{
width:50px;
height:20px;
border:1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>林杨</div>
<div>余周周</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
解决办法:换行符惹的祸
方法一:把标签内容写在同一行
虽然这会使代码可读性降低,但这也不失为一种解决方法。
- 1
- 2
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
border: 0;
padding: 0;
margin: 0;
}
body{
font-size: 14px;
}
div{
width:50px;
height:20px;
border:1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>林杨</div><div>余周周</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
方法二:增加注释符
- 1
<body>
<div>林杨</div><!--
--><div>余周周</div>
</body>
- 1
- 2
- 3
- 4
方法三:父元素设置font-size:0
- 1
此种方法给父元素设置了font-size:0之后必须给该元素设置font-size
方法四:父元素Letter-spacing:-3px,子元素letter-spacing:0
- 1
该方法兼容性良好,可以考虑使用。
方法五:给该元素float:left
- 1
此种方法虽然可以实现取消间距,但是可能对布局产生影响,需要考虑布局