一、display属性(元素如何显示)
网页上的每个元素都是一个盒模型
。display
属性决定了盒模型的行为方式
,设置元素如何被显示。
display常用的属性共有
4个
值:
-
display: none;
-- 让标签消失(隐藏元素并脱离文档流)-
display: inline;
-- 内联元素(内联标签)-
display: block;
-- 块级元素(块级标签)-
display: inline-block;
-- 既有inline的属性也有block属性
1、display: block(转换为块元素)
display:block
: 转换为块元素
-
block(块元素)
是占用最大可用宽度
的元素,此元素将显示为块级元素
,此元素前后会带有换行符。 - block元素会
独占一行
,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度 - block元素可以设置
width
和height
属性。块级元素即使设置了宽度,仍然是独占一行
- block元素也可以设置
margin
和padding
属性
常见的块级元素有:
div,p,ul,ol,li,h1~h6
等
以下示例中的样式规则将内联<span>
元素显示为块级元素
。
HTML代码:
<span>First hello world.</span>
<span>Second hello world.</span>
<span>Third hello world.</span>
<span>Fourth hello world.</span>
<span>Fifth hello world.</span>
CSS代码:
span {
display: block;
}
执行结果:
2、display: inline(转换为内联元素)
display:inline
: 转换为内联元素
(内联表签)
- inline元素
不会独占一行
,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行 - inline元素的宽度是自身内容的宽度(
默认有多少占多少
) - inline元素设置
width
和height
属性无效
- inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
inline
元素只占用尽可能多
的宽度
,并不强制
换行。
CSS代码:
p {
display: inline;
}
执行结果:
设置元素的display属性只会改变元素的
显示方式
,而不会改变
元素的类型
。所以,带有display: block的内联元素不允许在其中包含其他块元素。
3、display:none(隐藏元素)
display:none
隐藏
一个元素
- display:none属性-
不占用
任何空间
- display:none属性-隐藏
当前
元素,它的子元素
也一定无法显示
- display:none属性-会引起页面重绘和回流,
脱离文档
该元素将被
隐藏
,在页面显示时不会展现出来,就好像该元素不存在
一样。
HTML代码:
<h1>因为display:none,你们看不到我。</h1>
<p>这个就能看到啦</p>
CSS代码:
h1 {
display: none;
}
执行结果:
display还有很多其他的参数值,比如list-item,table,table-cell,table-column,grid等等。
4、display:inline-block(既有inline属性也有block属性)
display:inline-block
属性,既有inline的属性也有block属性
它结合了上述inline和block的特点,如下:
- 使元素变成
行内元素
,拥有行内元素的特性,即可以与其他行内元素共享一行
,不会独占一行 -
能够
改变元素的height
,width
的值 -
可以
设置padding
,margin
的各个属性值,top,left,bottom,right都能够产生边距效果
用通俗的话讲,就是
不独占一行
的块级元素
。如下图可见:
图一:
图二:
两个图可以看出,display:inline-block后块级元素能够在同一行显示。
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个
link(a元素)
设置inline-block
属性,使其既具有block
的可设置宽度
和高度
特性又具有inline
的同行
特性
二、visibility属性(元素可见性)
visibility
属性用于指定元素的可见性。即元素是可见的
还是隐藏的
。
最常见的值是visible
和hidden
。
-
visibility:visible
属性值定义的元素是可见
的,元素会显示出来,是默认的属性值。 -
visibility:hidden
属性值定义的元素是不可见
的,元素不会显示出来,但还会占据原有的空间。
我们可以将visibility
属性设置为“hidden
”来隐藏元素。
还有一种方法可以将元素“隐藏”起来,即将 display
属性设置为“ none
”但是请注意,这两种方法会产生不同的结果:
-
display:none
是彻底消失,不占空间,浏览器也不会解析该元素,当diaplay值为none时会产生回流和重绘-
visibility:hidden
只是看不到了,但占有相对空间,不会彻底消失,浏览器会解析该元素,只重绘不回流
这里是一个例子:
HTML代码:
<h1>hello world</h1>
<div class="hidden">
我被设置了visibility: hidden
</div>
<p>
上方div的位置变成了空行,因为
div元素被设置了visibility: hidden
</p>
CSS代码:
div.hidden {
visibility: hidden;
}
执行结果:
display:none
隐藏一个元素,没有为该元素保留一个位置。
将visibility: hidden
改为display:none
会产生以下效果:
div.hidden {
display: none;
}
执行结果:
三、文档流
1、介绍
文档流是文档中可显示对象在排列时所占用的位置/空间
例如:块元素自上而下摆放,内联元素从左到右摆放
文档流产生的问题:
1.高矮不齐,底边对齐
<span>hello</span>
<img src="图标.png">
2.空格折叠
<span>我是文本 内容</span>
只显示一个空格
3、元素有空隙
<span>我是文本内容</span>
<img src="老虎.png">
<img src="老虎.png">
2、脱离文档流
使一个元素脱离标准文档流有三种方式
- 浮动
- 绝对定位
- 固定定位
四、CSS position定位
1、position属性(元素定位方法的类型)
position
属性指定一个元素(静态的,相对的,绝对或固定
)的定位方法的类型
可以使用top, bottom, left, 和 right
属性来定位元素。
但是,除非position
属性有进行初始化设置参数值这些属性才能起效果。 根据定位方法,它们的工作方式也不同。
position属性的值可以为:
-
absolute
:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。-
fixed
: 生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。-
relative
: 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。-
static
: 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。-
inherit
: 规定应该从父元素继承 position 属性的值。
position:static (静态定位)
HTML元素默认为静态
。 静态定位元素总是按照页面的正常流动
进行定位。
HTML代码:
<p>没有定位</p>
<p>没有定位</p>
<p>没有定位</p>
<p>没有定位</p>
<p>没有定位</p>
<p class="position_static">我用了静态定位</p>
CSS代码:
p.position_static {
position:static;
top: 30px;
right: 5px;
color: red;
}
执行结果:
position:fixed
(固定定位)能使具有固定位置的元素相对于浏览器
窗口被定位
,并且即使窗口被滚动也不会移动。
可以使用top, right, bottom, 和left的一个或多个属性来指定位置。
position:absolute
(绝对定位)生成绝对定位的元素,相对于static定位(默认定位值,即没有定位)以外的第一个父元素
进行定位。
可以使用top, right, bottom, 和left的一个或多个属性来指定位置。
在下面的例子中,使用固定定位将段落固定为top:30px,right:5px。
CSS代码:
p.position_fixed {
position: fixed;
top: 30px;
right: 5px;
color: red;
}
执行结果:
fixed
参数能把元素从正常的顺序中拉出。可以无视其他元素的定位。设置了fixed的元素可以
重叠在
其他元素上。
2、相对定位
position:relative
(相对定位)元素的定位是相对其正常位置,不会脱离文档流。
可以使用top, right, bottom, 和 left的属性来指定呈现的元素将如何移动
。
HTML代码:
<html>
<body>
<p>hello everyone</p>
<div>
<span>hello everyone</span>
<span>hello everyone</span>
<div>
</body>
</html>
CSS代码:
p {
width: 350px;
border: 1px black solid;
position: fixed;
}
span {
background: green;
color:white;
position: relative;
top: 150px;
left: 50px;
}
执行结果:
relative
定位的元素的内容可以移动并与其他元素重叠
,但是元素的保留空间
在正常流程中仍然保留
。
在
table
中设置position:relative是无效
的。
absolute
绝对定位
绝对位置元素相对于具有非静态位置的第一个父元素
进行定位。 如果找不到这样的元素,则针对的是<html>
。
绝对定位的元素将从正常流程中移除。 文档和其他元素的行为像绝对定位的元素不存在。
五、z-index属性(元素的堆栈顺序)
1、介绍
z-index属性指定元素的堆栈顺序(通过z-index的值可以决定哪个元素应放置在其他元素的前面或后面)。
当元素位于正常流程顺序之外时(受position等属性影响时),它们可以重叠于其他元素。
HTML代码:
<html>
<head>
<link rel="stylesheet" href="CSS定位与布局.css">
</head>
<body>
<div class="blue">blue (hello everyone)</div>
<div class="red">red (hello everyone)</div>
</body>
</html>
CSS代码:
.blue {
background-color: #8EC4D0;
margin-bottom: 15px;
width: 120px;
height: 120px;
color: #FFF;
}
.red {
background-color: #FF4D4D;
position: relative;
width: 120px;
height: 120px;
color: #FFF;
margin-top: -50px;
margin-left: 50px;
}
执行结果:
红框与蓝框重叠,红框会位于蓝框上方,因为红框是后加载的。
设置
z-index
属性可以改变这个顺序。
2、指定z-index属性
为蓝色div元素指定较高的
z-index值,为红色div元素指定较低的
z-index值将导致以下结果:
HTML代码:
<html>
<head>
<link rel="stylesheet" href="CSS定位与布局.css">
</head>
<body>
<div class="blue">blue (hello everyone)</div>
<div class="red">red (hello everyone)</div>
</body>
</html>
CSS代码:
.blue {
background-color: #8EC4D0;
position: relative;
margin-bottom: 15px;
width: 120px;
height: 120px;
color: #FFF;
z-index: 3;
}
.red {
background-color: #FF4D4D;
position: relative;
width: 120px;
height: 120px;
color: #FFF;
margin-top: -50px;
margin-left: 50px;
z-index: 2;
}
执行结果:
六、float属性(浮动)
1、介绍
float
属性指定一个盒子(元素)是否应该浮动
。
使用float
,可以将元素向左或向右推,以允许其他元素环绕它。
float
通常与图像
一起使用,但在处理布局时也很有用。
float
属性的值是 left,right,和 none。
-
left,right
会使元素向左或者向右浮动
。-
none
能确保元素不会
进行浮动
浮动的原理:
- 浮动以后使元素脱离了文档流
- 浮动只有左右浮动,没有上下浮动
下面是一个右浮动的图像示例。
HTML代码:
<p>
<img src="图标.png" />
此段落有一个向<strong>右浮动</strong>的图像。
强烈建议为图像添加边距,以便文本
不要太靠近图像。如果您希望您的文本易于阅读,您可以
应始终在单词和边框之间添加几个像素、图像、
和其他内容。
</p>
CSS代码:
img {
float: right;
}
执行结果:
2、元素相邻
如果连续放置几个浮动的元素,那么如果有足够的空间,它们将相互浮动
。
例如,在设置页面布局中,可以通过设置浮动
将图像
和文本
设置到页面中,使得文本
可以跟图像
并排显示。
HTML代码:
<p><img src="图标.png" />
我爱学习,我会暴富
</p>
CSS代码
img {
float: left;
width: 100px;
margin-right: 10px;
}
p {
width: 190px;
float: left;
}
执行结果:
七、清除float
1、清除float
元素设置了float
属性后会使后面的元素
都受其影响
,将环绕在其周围。为了避免这种情况,请使用clear属性
。
clear
属性指定某个元素
不受其他设置了float属性的元素的影响
。具体可见以下例子:
1. 在下面的例子中,如果将div
设置为浮动
,则它后面的段落将会围绕在它周围
HTML代码:
<head>
<link rel="stylesheet" href="CSS定位与布局.css">
</head>
<body>
<p>该段落位于div上方,不受div的float属性影响。</p>
<div class="floating">
<img src="图标.png" />
</div>
<p>该段落位于div下方,受到div的float属性影响。</p>
<p>该段落也位于div下方,受到div的float属性影响。</p>
</body>
CSS代码:
p {
height: 50px; border: 1px solid red;
}
.floating {
float: right;
}
执行结果:
2. 在下面的例子中,当父元素
不给高度
的时候,内部元素不浮动时会撑开;而浮动的时候,父元素变成一条线
HTML代码:
<head>
<link rel="stylesheet" href="CSS定位与布局.css">
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
CSS代码:
.father {
border: 1px solid red;
}
.son1,.son2 {
margin-top: 5px;
height: 100px;
width: 150px;
border: 1px solid #000;
}
.son1 {
float: left;
}
.son2 {
float: right;
}
执行结果:
简单地说,浮动是因为使用了
float:left
或float:right
或两者都是有了
而产生的浮动。
2、使用clear属性
clear
属性可以使用right,left
和both
来指定某一个元素不受其他浮动元素的影响。
none
: 允许两边都可以有浮动对象(默认值)
both
: 不允许有浮动对象
left
: 不允许左边有浮动对象
right
: 不允许右边有浮动对象
both
用来清除来自任一方向
的浮动
效果。
HTML代码:
<html>
<head>
<link rel="stylesheet" href="CSS定位与布局.css">
</head>
<body>
<p>该段落位于div上方,不受div的float属性影响。</p>
<br/><br/>
<div class="floating">
<img src="图标.png" />
</div>
<p>该段落位于div下方,受到div的float属性影响。</p>
<br/>
<div class="clearing">
<p>该段落由于清除了float,所以不受div的float属性影响。</p>
</div>
<br/>
</body>
</html>
CSS代码:
p {
height: 50px; border: 1px solid red;
}
.floating {
float: right;
}
.clearing {
clear: both;
}
执行结果:
八、overflow属性(应对内容溢出)
1、介绍
如前所述,页面上的每个元素都是一个盒子。如果没有设置盒子的高度,那么盒子的高度将随着所需的内容的增大而变大。
overflow属性
指定如果内容溢出
一个元素的框,会发生什么。
HTML代码:
<html>
<head>
<link rel="stylesheet" href="CSS定位与布局.css">
</head>
<body>
<div>
这个文本在div元素里面,它有一个蓝色的
背景颜色,并浮动到左侧。 我们设定一个具体的
div元素的高度和宽度,正如你所看到的,这样会导致文本内容溢出。
</div>
</body>
</html>
CSS代码:
div {
width: 150px;
height: 150px;
background-color: LightBlue;
float: left;
}
执行结果:
2、overflow属性值
overflow
属性有四个值:visible
(默认值),scroll
,hidden
和auto
。
-
visible
:默认值,内容不会被修剪,会呈现
在元素框之外
。-
hidden
:内容会被修剪,并且其余内容是不可见
的。-
scroll
:内容会被修剪,但是浏览器会显示滚动条
以便查看其余的内容(不溢出也会有滚动条
)-
auto
:如果内容被修剪(比如文字溢出时候
),则浏览器会显示滚动条
以便查看其余的内容。
scroll
值能阻止内容溢出
,但会增加出滚动条
,通过拉动滚动条可以浏览所有内容。
CSS代码:
div {
width: 150px;
height: 150px;
background-color: LightBlue;
float: left;
overflow: scroll;
}
执行结果:
3、auto 和 hidden值
auto
- 如果内容溢出
被限制,则会添加一个滚动条
,使超出的内容可以通过滚动
展示出来。
hidden
- 隐藏
掉内容溢出的部分
,溢出的内容将不可见。
CSS代码:
div {
width: 150px;
height: 150px;
background-color: LightBlue;
float: left;
overflow: hidden;
}
执行结果:
scroll与auto的区别:
在内容超出时,均会显示滚动条,但在元素没有超出时,auto会隐藏滚动条,scroll依旧显示滚动条,但是禁用滚动条
![]()