css介绍3
CSS基础三目录
[*]CSS基础三
[*]一.浮动
[*]二.Display
[*]三.float
[*]四.父级边框塌陷问题
[*]1.增加高度
[*]2.增加一个空的div标签，清除浮动
[*]3.overflow
[*]4.在父级边框中加一个伪类：after
[*]五.定位
[*]1.相对定位
[*]2.绝对定位
[*]3.固定定位
[*]六.z-index
[*]图层
[*]2.透明度
这篇就想聊聊CSS里那些“看似简单，实则藏着巧思”的细节—或许我们能聊到一块儿去。
一.浮动
块级元素：独占一行
如：h1~h6 p div 列表...
行内元素：不独占一行
如：span a img strong....
行内元素可以被包含在块级元素中，反之，则不可以~
标准文档：
二.Display
控制元素“怎么显示”
[*]有的元素默认占一整行（像段落、div），这叫block（块级）；
[*]有的元素只占自己内容那么大，旁边能放其他元素（像文字、图片），这叫inline（行内）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
div
span
</body>
</html>效果如下：
三.float
让元素“飘起来”。比如：
想让一张图片靠左，文字绕着它排，就给图片设float: left；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
</head>
<body>
<img src="https://www.cnblogs.com/1.jpg" height="300" width="300"/>
<img src="https://www.cnblogs.com/2.jpg" height="300" width="300"/>
<img src="https://www.cnblogs.com/4.jpg" height="300" width="552"/>
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
</body>
</html>效果如下：
四.父级边框塌陷问题
解决方案:
1.增加高度
#father {
border:1px #000 solid;
}2.增加一个空的div标签，清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
</head>
<body>
<img src="https://www.cnblogs.com/1.jpg" height="300" width="300"/>
<img src="https://www.cnblogs.com/2.jpg" height="300" width="300"/>
<img src="https://www.cnblogs.com/4.jpg" height="300" width="552"/>
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
</body>
</html>3.overflow
#father {
border:1px #000 solid;
overflow: hidden;4.在父级边框中加一个伪类：after
#father:after {
content:"" ;
display: block;
clear: both;}四种解决方式效果一样：
小结:
[*]浮动元素后面增加空div
简单，代码中尽量避免空div
[*]设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
[*]overflow
简单，下拉的一些场景避免使用
[*]父类添加一个伪类: after
写法稍微复杂一点，但是没有副作用
五.定位
1.相对定位
元素“相对自己原来的位置动一动”。
Title 第一个盒子 第二个盒子 第三个盒子
页:
[1]