块级元素和行内元素
标准文档流等级森严 , 标签分为两种等级:
1 行内元素
2 快内元素
行内元素和快内元素的区别: (重要)
行内元素 :
与其他行内元素并排 ;
不能设置宽 , 高 默认的宽度 , 就是文字的宽度 .
块级元素:
霸占一行 , 不能与其他任何元素并列;
能接受宽 , 高 如果不设置宽度, 那么宽度将默认变为父亲的100% .
块级元素和行内元素的分类 :
在以前的HTML 知识中 , 我们已经将标签分过来类 当时分为了：文本级、容器级。
从HTML的角度来讲，标签分为：
- 文本级标签：p、span、a、b、i、u、em。
- 容器级标签：div、h系列、li、dt、dd。
注意 : 为什么说P是文本级标签呢? 因为P里面只能放 文字 或 图片 或 表单元素 , P里面不能放 h 和 ul p里面也不能放 p .
现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
-
行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
-
块级元素：所有的容器级标签都是块级元素，还有p标签。
块级元素可以转换为行内元素：
给一个块级元素设置 成行内元素: display : inline
这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
- 此时这个div不能设置宽度、高度；
- 此时这个div可以和别人并排了
行内元素转换为块级元素：
给一个行内元素设置 成块级元素 : display : block
这个个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
- 此时这个span能够设置宽度、高度
- 此时这个span必须霸占一行了，别人无法和他并排
- 如果不设置宽度，将撑满父亲
display
display : 块级元素与行内元素的转换 :
display: block :将标签立即变成块级元素.
独占一行 / 可以设置宽高, 如果不设置,则默认父盒子宽高的100%
display: inline :将标签变成行内元素
在一行内显示 / 不可以设置宽高 ,根据内容显示宽高.
display: inline-block :行内块
在一行内显示 / 可以设置宽高 .
display: none :不显示,隐藏 ,不在文档上占位置.
visibility: hidden :隐藏 ,在文档上占位置.
脱离标准流
css中一共有三种手段，使一个元素脱离标准文档流：
- （1）浮动
- （2）绝对定位
- （3）固定定位
浮动
浮动 是 css 里面布局最多的一个属性, 也是很重要的一个属性 .
float : 表示浮动的意思 , 他有四个值 .
float none : 表示不浮动
float left : 表示左浮动
float right : 表示右浮动
注意 : 当盒子向右/左浮动时 , 如果有左/右浮动的盒子,那么会贴近以浮动的盒子,没有就去贴边.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*<!--将屏幕没有缝隙-->*/ *{ padding:0; margin: 0; } /*这个div是将高为40px的一条全部沾满*/ .top-Bar{ width:100%; height: 40px; background-color: #333; } /*需要的长度1226,高40,居中--绿色到黄色右边的举例*/ .container{ width: 1226px; height: 40px; /*background-color: red;*/ margin-right: auto; margin-left: auto; } .top-Bar .top-l{ width: 550px; height: 40px; background-color: green; /*浮动,要不然div是换行的*/ float: left; } .top-Bar .top-shop{ width: 100px; height: 40px; background-color: yellow; float: right; } .top-Bar .top-info{ width: 200px; height: 40px; background-color: purple; float: right; /*距离右边距20px*/ margin-right: 20px; } </style> </head> <body> <div class="top-Bar"> <div class="container"> <div class="top-l"> </div> <div class="top-shop"></div> <div class="top-info"></div> </div> </div> </body> </html>
浮动的四大特性 :
1 , 浮动的元素脱离标准流
2 , 浮动的元素互相贴靠
3 , 浮动的元素有"字围" 的效果
4 , 收缩效果 : 一个浮动元素 , 如果没有设置 ,width , 那么自动收缩为文字的宽度 ,
注意 : 要浮动一起浮动 , 有浮动 ,要清除浮动
浮动的好处与缺点 :
--- 好处 : 使元素实现并排/就在页面上占位置
---缺点 : 子盒子浮动 , 不在页面占位置 , 如果父盒子不设置高度 , 那么撑不起父盒子的高度 , 页面会出现紊乱
清除浮动 :
清除浮动的方法 :
1 , 给父盒子设置高度 (后期不好维护)
2 , clear : both
3 , 伪元素清除法
4 , overflow : hidden
有三个值 :
left : 清除当前元素左边的浮动元素
right : 清除当前元素右边的浮动元素
both : 清除当前元素两边的浮动元素.
给浮动元素的后面加一个空的 div , 并且该元素不浮动 , 然后设置 clear (在该元素上面表示清除左边)
示例 :
<div> <ul> <li>Python</li> <li>web</li> <li>linux</li> <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both 清除别人对我的浮动影响--> <!-- 内墙法 --> <!-- 无缘无故加了div元素 结构冗余 --> <div class="clear"></div> </ul> </div> <div class="box"> </div>
*{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li { float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } .clear{ clear: both; }
伪元素清除法
给我浮动元素的父盒子 , 也就是不浮动元素 , 添加一个clerafix 的类 , 然后设置 :
.clearfix:after{ /*必须要写这三句话*/ content: '.'; clear: both; display: block; }
一般都是这样写 :
.clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden }
overflow: hidden 清除法
overflow 属性规定当内容溢出元素框时 发生的事情 ,
说明:
这个属性定义溢出元素内容区的内容如何处理, 如果值为scroll , 不论是否需要 ,用户代理都会提供一种滚动机制, 因此, 有可能使元素框中可以放下所有的内容也会出现滚动条 .
有五个值 :
.
其实这是一个 BFC 区域: https://blog.csdn.net/riddle1981/article/details/52126522
记住 : BFC 内的元素之间互不影响.
