CSS基础三
目录
这篇就想聊聊CSS里那些"看似简单，实则藏着巧思"的细节---或许我们能聊到一块儿去。
一.浮动
块级元素：独占一行
如：h1~h6 p div 列表...
行内元素：不独占一行
如：span a img strong....
行内元素可以被包含在块级元素中，反之，则不可以~
标准文档：
二.Display
控制元素"怎么显示"
-
有的元素默认占一整行（像段落、div），这叫block（块级）；
-
有的元素只占自己内容那么大，旁边能放其他元素（像文字、图片），这叫inline（行内）；
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行！
none
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>效果如下：
三.float
让元素"飘起来"。比如：
想让一张图片靠左，文字绕着它排，就给图片设float: left；
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
}
.layer01 {
border:1px #F00 dashed;
display: inline-block;
float: right;
}
.layer02 {
border:1px #00F dashed;
display: inline-block;
float: right;
}
.layer03 {
border:1px #060 dashed;
display: inline-block;
float: right;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
display: inline-block;
}
</style>
</head>
<body>
<div id="father">
<div class="layer01"><img src="1.jpg" height="300" width="300"/></div>
<div class="layer02"><img src="2.jpg" height="300" width="300"/></div>
<div class="layer03"><img src="4.jpg" height="300" width="552"/></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
</div>
</div>
</body>
</html>效果如下：
四.父级边框塌陷问题
解决方案:
1.增加高度
html
#father {
border:1px #000 solid;
}2.增加一个空的div标签，清除浮动
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
}
.layer01 {
border:1px #F00 dashed;
display: inline-block;
float: right;
}
.layer02 {
border:1px #00F dashed;
display: inline-block;
float: right;
}
.layer03 {
border:1px #060 dashed;
display: inline-block;
float: right;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
display: inline-block;
float:left;
}
/*
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none;
*/
.clear{
clear: both;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="father">
<div class="layer01"><img src="1.jpg" height="300" width="300"/></div>
<div class="layer02"><img src="2.jpg" height="300" width="300"/></div>
<div class="layer03"><img src="4.jpg" height="300" width="552"/></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>3.overflow
html
#father {
border:1px #000 solid;
overflow: hidden;4.在父级边框中加一个伪类：after
html
#father:after {
content:"" ;
display: block;
clear: both;}四种解决方式效果一样：
小结:
- 浮动元素后面增加空div
简单，代码中尽量避免空div
- 设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
- overflow
简单，下拉的一些场景避免使用
- 父类添加一个伪类: after
写法稍微复杂一点，但是没有副作用
五.定位
1.相对定位
元素"相对自己原来的位置动一动"。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
相对定位
相对于自己原来的位置进行偏移~
-->
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
}
#first{
background-color: #a13d30;
border: 1px dashed #b27530;
position: relative; /*相对定位：上下左右*/
top: -20px;
left: 20px;
}
#second{
background-color: #255099;
border: 1px dashed #255066;
}
#third{
background-color: #1c6699;
border: 1px dashed #1c6615;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html 效果如下：
2.绝对定位
定位：基于xxx定位，上下左右~
- 没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，我们通常会相对于父级元素进行偏移~
- 在父级元素范围内移动
**相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留 **
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
position: relative;
}
#first{
background-color: #a13d30;
border: 1px dashed #b27530;
}
#second{
background-color: #255099;
border: 1px dashed #255066;
position: absolute;
left: 100px;
}
#third{
background-color: #1c6699;
border: 1px dashed #1c6615;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>效果如下：
3.固定定位
元素"钉在页面上不动"，不管页面怎么滚动，它都在同一个位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){ /*绝对定位：相对于浏览器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){ /*fixed, 固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>效果如下：div1可以移动
六.z-index
控制元素"谁在上面谁在下面"，像叠纸一样。
图层
默认是0，最高无限～999
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content{
width: 380px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText, .tipBg{
position: absolute;
width: 380px;
height: 25px;
top: 216px;
}
.tipText{
color: white;
z-index: 1;
}
.tipBg{
background: #000;
/*opacity: 0.5; 背景透明度*/
}
</style>
</head>
<body>
<div id="content">
<ul>
<li><img src="2.jpg" height="300" width="300"/></li>
<li class="tipText">qqqqqqq</li>
<li class="tipBg"></li>
<li>时间</li>
<li>地点</li>
</ul>
</div>
</body>
</html>效果如下：
2.透明度
opacity: ; 指背景透明度
结语：CSS的介绍到这里就结束了。当然，观点难免有局限，毕竟每个人的经历和视角都独一无二。