首页 › 业界区 › 业界 ›css介绍3

css介绍3

嘀荼酴 6 天前

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.相对定位

元素“相对自己原来的位置动一动”。
[code] Title 第一个盒子第二个盒子第三个盒子

回复

使用道具举报

6 天前

0

粉丝关注

17

主题发布

板块介绍填写区域，请于后台编辑

财富榜{圆}