重要属性介绍
display属性
- 功能:规定网页元素如何显示的问题。
- 取值:none(隐藏)、block(以块元素显示)、inline(以行内元素显示)
- block:可以实现将行内元素转成块元素。
- inline:可以实现将块元素转成行内元素。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
p{
display:none;
}
</style>
</head>
<body>
<h1>主席心中的互联网</h1>
<p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>
再删掉下面这一行,查看结果
p{
display:none;
}
Overflow 属性
overflow属性:当内容溢出时,该如何显示
overflow:当内容溢出时,溢出的内容该如何显示。取值:visible(可见)、hidden(隐藏)、scroll(出现滚动条)、auto(自动)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
p{
border:1px solid #f0f0f0;
width:300px;
height:100px;
overflow:scroll;
}
</style>
</head>
<body>
<h1>诺贝尔文学奖花落谁家?</h1>
<p>评论家白烨并不看好村上春树能够获奖。他在接受记者采访时曾指出,村上春树得诺奖几乎没希望,“诺贝尔文学奖很重视作品的文学价值,村上春树的作品对现实社会的关注度并不高,在纯文学圈子里不是特别受到认可”。
评论家止庵等人亦曾分析过,诺贝尔文学奖会给一些有思考的冷门作家以鼓励,也重视作品的文学价值。在白烨看来,村上春树的作品具有流行性、大众性的特点,“正是从这个角度讲,村上很有可能成为一个时间悠久的‘陪跑者’”。
“村上春树得诺奖的希望不大了。”基于相似原因,村上春树作品的译者之一林少华表示。</p>
</body>
</html>
有兴趣也可以试一下overflow的其它几种取值
cursor光标类型
cursor:网页中光标的类型,取值:text(文本)help(帮助)、wait(等待)、pointer(手形)等。
下面实例,把鼠标移动到文本上,查看效果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
p{
border:1px solid #f0f0f0;
width:300px;
height:100px;
overflow:scroll;
cursor:wait;
}
</style>
</head>
<body>
<h1>诺贝尔文学奖花落谁家?</h1>
<p>评论家白烨并不看好村上春树能够获奖。他在接受记者采访时曾指出,村上春树得诺奖几乎没希望,“诺贝尔文学奖很重视作品的文学价值,村上春树的作品对现实社会的关注度并不高,在纯文学圈子里不是特别受到认可”。
评论家止庵等人亦曾分析过,诺贝尔文学奖会给一些有思考的冷门作家以鼓励,也重视作品的文学价值。在白烨看来,村上春树的作品具有流行性、大众性的特点,“正是从这个角度讲,村上很有可能成为一个时间悠久的‘陪跑者’”。
“村上春树得诺奖的希望不大了。”基于相似原因,村上春树作品的译者之一林少华表示。</p>
</body>
</html>
定位
CSS定位
position:元素定位方式,取值static、fixed、relative、absolute
- static:静态定位(默认状态、不定位)。
- Fixed:固定定位。
- Relative:相对定位。
- Absolute:绝对定位。
定位方式,要与定位属性配合使用
定位坐标:指定定位的元素,偏移目标元素多远的距离。
- left:定位元素,距离目标元素左边的距离。
- top:定位元素,距离目标元素上边的距离。
- right:定位元素,距离目标元素右边的距离。
- bottom:定位元素,距离目标元素下边的距离。
固定定位,position:fixed
- 固定定位,是相对于浏览器窗口来进行的定位。
- 固定定位,不占空间,层级要高于普通元素。它不会随着网页的滚动而滚动。
- 如果不指定定位坐标的话,固定定位元素的位置在原地不动。
- 固定定位元素,一定是“块元素”,不管原来它是什么元素。
相对定位,position:relative;
- 相对定位,是相对于“原来的自己”进行定位。
- 相对定位,依然占空间,层级高于普通元素。
- 如果不指定定位坐标的话,相对定位元素的位置在原地不动。
- 相对定位,原来是行内元素,定位后还是行内元素;原来是块元素,定位后还是块元素。
注:相对定位和绝对定位,一般情况下是配合使用。
绝对定位,position:absolute
-
相对于祖先定位元素(相对定位,绝对定位),来进行的定位。
-
如果它的父元素没有进行任何定位的话,再往上找定位元素。
-
如果一直找到都没有找到定位元素的话,那就相对于来进行定位。
-
绝对定位元素,不占空间,层级要高于普通元素。
-
如果不指定定位坐标的话,绝对定位元素的位置在原地不动。
-
绝对定位元素,是一个“块元素”。