display属性
- 通过display样式可以修改元素的类型
| 可选值 | 作用 |
|---|---|
| inline | 可以将一个元素作为内联元素显示 |
| block | 可以将一个元素设置为块元素显示 |
| inline-block | 将一个元素转换为行内块元素 1 |
| none | 隐藏元素，并且元素不会再页面中继续占有位置 |
- 两种隐藏元素的方法
display:none;使用该方式隐藏元素，元素不会再页面显示，并且不再占据页面位置- visibility可以用来设置元素隐藏和显示的状态
可选值：
* visible 默认值，元素默认会在页面显示
* hidden 元素会不显示 - 使用visibility: hidden;隐藏的元素虽然不会在页面中显示，但是它的位置依然会保持在页面中
overflow属性
- 子元素默认是存在父元素的内容区中，理论上讲子元素最大可以等于父元素内容区大小。
- 溢出的内容：如果子元素超过父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容
- 父元素默认是将溢出内容，在父元素外面显示
- 通过overflow可以设置父元素如何处理溢出问题:
可选值：
- visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
- hidden，一处的内容会被修剪，不会显示
- scroll,会为父元素添加滚动条，通过拖动滚动条来查看完整内容；该属性不管内容是否溢出，都会添加水平和垂直双方向滚动条
- auto，会根据需求自动添加滚动条
* 需要水平就添加水平
* 需要垂直就添加垂直
* 不需要就不添加
文档流
- 文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
- 元素在文档流中的特点
块元素
- 块元素在文档流中会独占一行，块元素会自上向下排列
- 块元素在文档流中默认是父元素的100%
- 块元素在文档流中的高度，默认被内容（或子元素）撑开。
内联元素 - 内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
- 在文档流中，内联元素的宽度默认都被内容（子元素）撑开
- 当元素的宽度为auto时，此时指定内边距不会影响可见框的大小，而会自动的修改宽度，以适应内边距
浮动
- 如果希望块元素在页面中水平排列，可以使块元素脱离文档流，使用
float来使元素浮动，从而脱离文档
| 可选值 | 作用 |
|---|---|
| none | 默认值元素默认在文档流中排列 |
| left | 元素会立即脱离文档流，向页面左侧浮动 |
| right | 元素会立即脱离文档流，向页面右侧浮动 |
- 当一个元素设置为浮动以后（float是一个非none值），元素会立即脱离文档流，元素脱离文档流后，它下面的元素会立即向上移动。
- 元素浮动以后会尽量向页面的左上或右上漂浮，直到遇到父元素的边框或其他的浮动元素，停止
- 如果浮动元素上面是一个没有浮动的块元素，则浮动元素不会超过块元素
- 浮动的元素不会超过上面兄弟元素，最多一样齐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
float:right;
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
- 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动设置文字环绕的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.p1{
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p class="p1">最妙的是下点小雪呀。看吧，山上的矮松越发的青黑，树尖上顶着一髻儿白花，好像日本看护妇。山尖全白了，给蓝天镶上一道银边。山坡上，有的地方雪厚点，有的地方草色还露着，这样，一道儿白，一道儿暗黄，给山们穿上一件带水纹的花衣；看着看着，这件花衣好像被风儿吹动，叫你希望看见一点更美的山的肌肤。等到快日落的时候，微黄的阳光斜射在山腰上，那点薄雪好像忽然害了羞，微微露出点粉色。就是下小雪吧，济南是受不住大雪的，那些小山太秀气！ 古老的济南，城里那么狭窄，城外又那么宽敞，山坡上卧着些小村庄，小村庄的房顶上卧着点雪，对，这是张小水墨画，也许是唐代的名手画的吧。 那水呢，不但不结冰，倒反在绿萍上冒着点热气，水藻真绿，把终年贮蓄的绿色全拿出来了。天儿越晴，水藻越绿，就凭这些绿的精神，水也不忍得冻上，况且那些长枝的垂柳还要在水里照个影儿呢！看吧，由澄清的河水慢慢往上看吧，空中，半空中，天上，自上而下全是那么清亮，那么蓝汪汪的，整个的是块空灵的蓝水晶。这块水晶里，包着红屋顶，黄草山，像地毯上的小团花的灰色树影。这就是冬天的济南。</p>
</body>
</html>
- 在文档流中，子元素的宽度默认占父元素的全部，当元素设置浮动以后，会完全脱离文档流，块元素脱离文档流以后，宽度和高度都被内容撑开
- 内联元素设置浮动，脱离文档流以后会变成块元素
简单布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 清除默认样式
*/
*{
margin: 0;
padding: 0;
}
.header{
width: 1000px;
height: 120px;
background-color: yellowgreen;
/*
* 设置居中
*/
margin: 0 auto;
}
.content{
width: 1000px;
height: 400px;
background-color: orange;
margin: 10px auto;
}
.news{
width: 200px;
height: 100%;
background-color: skyblue;
float: left;
}
.inform{
width: 580px;
height: 100%;
background-color: yellow;
float: left;
margin: 0 10px;
}
.detail{
width: 200px;
height: 100%;
background-color: pink;
float: left;
}
.footer{
width: 1000px;
height: 120px;
background-color: silver;
margin: 0 auto;
}
</style>
</head>
<body>
<!--头部div-->
<div class="header"></div>
<!--主体内容div-->
<div class="content">
<div class="news"></div>
<div class="inform"></div>
<div class="detail"></div>
</div>
<!--底部信息div-->
<div class="footer"></div>
</body>
</html>
高度塌陷问题
链接: link.
清除浮动
- 有时我们希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
- clear可以用来清楚其他元素浮动对当前元素的影响
| 可选值 | 作用 |
|---|---|
| none | 默认值，不清除浮动对其他元素的影响 |
| left | 清楚左侧浮动元素对当前元素的影响 |
| right | 清除右侧浮动元素对当前元素的影响 |
| both | 清除两侧浮动元素中对当前元素的影响最大的 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height:100px;
background-color: yellow;
/*设置box1向左浮动*/
float: left;
}
.box2{
width: 200px;
height:200px;
background-color: yellowgreen;
clear: left;
}
.box3{
width: 300px;
height:300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
未清除浮动前：
清除浮动后：
定位
- 定位：指的就是将指定的元素摆放到页面的任意位置。 通过定位可以任意的摆放元素。
- 通过position属性来设置元素的定位
| 可选值 | 作用 |
|---|---|
| static | 默认值，元素没有开启定位 |
| relative | 开启元素的相对定位 |
| absolute | 开启元素的绝对定位 |
| fixed | 开启元素的固定定位（也是绝对定位的一种） |
- 当开启了元素定位时（position的属性值是一个非static的值），可以通过left right top bottom 四个属性来设置元素的偏移量
| 属性 | 作用 |
|---|---|
| left | 元素相对于其定位位置的左侧偏移量 |
| right | 元素相对于其定位位置的右侧偏移量 |
| top | 元素相对于其定位位置的上侧偏移量 |
| bottom | 元素相对于其定位位置的下侧偏移量 |
通常偏移量只需要使用两个，就可以对一个元素进行定位
相对定位
- 相对定位：是相对于元素在文档流中原来位置进行定位
- 当元素的position属性设置为relative时，开启元素的相对定位
- 开启相对定位后的特点：
- 开启相对定位以后，而不设置偏移量时，元素不会发生任何变化
- 相对定位的元素不会脱离文档流
- 相对定位会使元素提升一个层级
- 相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
left: 200px;
top:200px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果图：
绝对定位
- 当position属性值设置为absolute时，则开启了元素的绝对定位
- 绝对定位的特点：
- 开启绝对定位，会使元素脱离文档流。
- 开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化。
- 绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的相对定位都会同时开启父元素的相对定位）；如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
- 绝对定位会使元素提升一个层级。
- 绝对定位会改变元素的性质：内联元素变成块元素，块元素的高度和宽度默认都被内容撑开。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left: 200px;
}
.box3{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果图：
固定定位
- 当元素的positions属性设置为fixed时，则开启了元素的固定定位
- 固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
- 不同的是：
- 固定定位永远都会相对于浏览器窗口进行定位
- 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
- IE6不支持固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: fixed;
}
.box3{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
<div class="box4" style="width: 300px; height: 300px; background-color: orange;position: relative;">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
元素层级
- 如果定位元素的层级是一样的，则下面的元素会盖住上面的元素（结构上的上下）
- 通过
z-index可以设置元素的层级 - 对于没有开启定位的元素不能使用z-index
- 可以为z-index指定一个值，该值将会作为当前元素的层级；层级越高，越优先显示
- 父元素层级再高也不会盖过子元素
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 如果定位元素的层级是一样的，则下面的元素会盖住上面的元素（结构上的上下）
* 通过z-index可以设置元素的层级
* 对于没有开启定位的元素不能使用z-index
* 可以为z-index指定一个值，该值将会作为当前元素的层级
* 层级越高，越优先显示
*/
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*开启绝对定位*/
position: absolute;
/*设置偏移量*/
top: 100px;
left: 100px;
z-index: 25;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*position: relative;
z-index: 3;*/
position: absolute;
top: 200px;
left: 200px;
z-index: 30;
}
.box4{
width: 200px;
height: 200px;
background-color: orange;
/*开启相对定位*/
position: relative;
/**
* 父元素层级再高也不会盖过子元素
*/
z-index: 20;
}
.box5{
width: 100px;
height: 100px;
background-color: skyblue;
/*开启绝对定位*/
position: absolute;
z-index: 10;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
</html>
设置元素的透明背景（opacity）
- opacity可以用来设置元素背景的透明，
- 它需要一个0-1之间的值
- 0表示完全透明
- 1表示完全不透明
- 0.5表示半透明
- opacity属性在IE8及以下的浏览器中不支持
- IE8及其以下的浏览器需要受用如下属性代替：
alpha(opacity=透明度) 透明度需要0-100之间的值
- 0表示完全透明
- 100表示完全不透明
- 50表示半透明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*position: relative;
z-index: 3;*/
position: absolute;
top: 200px;
left: 200px;
z-index: 30;
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
</head>
<body>
<div class="box3"></div>
</body>
</html>
可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高又不会独占一行。
<img />就是一个行内块元素。 ↩︎
扫一扫
7049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
