今日内容:
1.浮动
关于浮动的详细信息:
1 浮动
浮动能使盒子脱离标准文档流.
四大特性:
1.浮动的元素脱标.
2.浮动的元素互相贴靠.
3.浮动的元素由"字围效果"
4.收缩的效果:将块级元素转化成行内
一定要谨记:关于浮动,我们初期一定要遵循一个原则,永远不是一个盒子单独浮动,要浮动就要一起浮动.另外,有浮动,一定要清除浮动.
清除浮动的方式:
1.给父盒子设置高度
2.clear:both
3.伪元素清除法
4.overflow:hidden
标准文档流:
哪些标签不在标准文档流:浮动,绝对定位,固定定位
如果不是标准文档流的标签(浮动的标签),那它有四个特性:
1.浮动的元素互相贴靠
2.浮动的元素脱标
3.浮动的元素有字围效果
4.收缩的效果:将块级元素转化成行内
5.不占位置
清楚浮动的标签:
好处:
1.浮动的元素能实现并排
2.把空白折叠现象清楚
3.能撑起父盒子的高度
另外:浮动的盒子垂直方向上不会出现塌陷问题.
只要盒子浮动了,就不区分块级标签还是行内标签.
1.可以任意的设置宽高.
2.塌陷问题不会出现
使用margin:0 auto;注意点:
1.使用margin:0 auto;水平盒子必须有width,要有明确width,文字水平居中使用text-align:center;
2.只有标准流下的盒子,才能使用margin:0 auto
3.当一个盒子浮动了,固定定位,绝对定位(后面会讲) margin:0 auto;不能用了.
4.margin:0
auto;居中盒子.而不是居中文本,文字水平居中使用text-allign:center;
关于文字环绕的问题:
示例代码如下:
这里要注意的问题是:
文字环绕表示图片悬浮起来了,文字应该占据图片之前的位置,但是文字并没有占据,而是环绕的.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动的元素有字围效果</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class = "box"> <div class = "box1"> </div> <p> 我爱了空间拉开距离大家来看都尽量快点进垃圾堆里大家代理会计法大家福利卡进度管理离开家领导看见了的开关机拉科技大哥离开家婕拉几个店了解到干来给大家 我爱了空间拉开距离大家来看都尽量快点进垃圾堆里大家代理会计法大家福利卡进度管理离开家领导看见了的开关机拉科技大哥离开家婕拉几个店了解到干来给大家 我爱了空间拉开距离大家来看都尽量快点进垃圾堆里大家代理会计法大家福利卡进度管理离开家领导看见了的开关机拉科技大哥离开家婕拉几个店了解到干来给大家 我爱了空间拉开距离大家来看都尽量快点进垃圾堆里大家代理会计法大家福利卡进度管理离开家领导看见了的开关机拉科技大哥离开家婕拉几个店了解到干来给大家 我爱了空间拉开距离大家来看都尽量快点进垃圾堆里大家代理会计法大家福利卡进度管理离开家领导看见了的开关机拉科技大哥离开家婕拉几个店了解到干来给大家 我爱了空间拉开距离大家来看都尽量快点进垃圾堆里大家代理会计法大家福利卡进度管理离开家领导看见了的开关机拉科技大哥离开家婕拉几个店了解到干来给大家</p> </div> </body> </html> /*css代码如下:*/ *{ padding: 0; margin: 0; } .box{ 500px; height: 500px; background-color: blue; } .box .box1{ background-color: red; 50px; height: 50px; float: left; }
行内元素浮动后的收缩效果,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/index1.css"> </head> <body> <p class = "box">aadd</p> </body> </html> <!-- css代码如下 --> *{ padding: 0; margin: 0; } .box{ /* 200px; */ height: 40px; background-color: green; float: left; }
清除浮动的影响最基础的方法如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动效果</title> <link rel="stylesheet" href="css/index2.css"> </head> <body> <div class = "father"> <div class = "child1"></div> <div class = "child2"></div> <div class = "child3"></div> <div class = "clearfix"></div> </div> <div class = "father2">这个是下面的</div> </body> </html> <!-- css的代码如下 --> *{ padding: 0; margin: 0; } .father{ /* height: 300px; */ background-color: gray; 1260px; } .child1{ 100px; height: 100px; background-color: red; float: left; } .child2{ 100px; height: 200px; background-color: green; float: left; } .child3{ 100px; height: 300px; background-color: blue; float: left; } .father2{ 200px; height: 100px; background-color: yellow; } .clearfix{ clear: left; }
也就是加了个
clear: left;
就可以了.
最常用的方法是下面的方法.伪元素清除法
示例代码如下:
.clearfix:after{
content: ".";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动效果</title> <link rel="stylesheet" href="css/index2.css"> </head> <body> <div class = "father clearfix"> <div class = "child1"></div> <div class = "child2"></div> <div class = "child3"></div> <!-- <div class = "clearfix"></div> --> </div> <div class = "father2">这个是下面的</div> </body> </html> <!-- css的代码如下 --> *{ padding: 0; margin: 0; } .father{ /* height: 300px; */ background-color: gray; 1260px; } .child1{ 100px; height: 100px; background-color: red; float: left; } .child2{ 100px; height: 200px; background-color: green; float: left; } .child3{ 100px; height: 300px; background-color: blue; float: left; } .father2{ 200px; height: 100px; background-color: yellow; } /* .clearfix{ clear: left; } */ .clearfix:after{ content: "."; display: block; visibility: hidden; height: 0; clear: both; }
关于overflow:
这个主要功能就是隐藏超过部分内容.
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow使用说明</title> <style> div{ width: 50px; height: 50px; border: 1px solid red; overflow: hidden; } </style> </head> <body> <div> 看了就看大家拉家带口建档立卡简单了解绝对垃圾的立即按道理讲道理安静的理解大浪街道李经理卡的进来看见奥地利共和国了解家里空间垃圾袋垃圾管理局管理经理据了解了解李经理就婕拉 </div> </body> </html>
使用overflow也是可以消除浮动影响的,但要注意隐藏超出内容的问题的.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动效果</title> <link rel="stylesheet" href="css/index2.css"> </head> <body> <div class = "father clearfix"> <div class = "child1"></div> <div class = "child2"></div> <div class = "child3"></div> <!-- <div class = "clearfix"></div> --> </div> <div class = "father2">这个是下面的</div> </body> </html> <!-- css的代码如下 --> *{ padding: 0; margin: 0; } .father{ /* height: 300px; */ background-color: gray; 1260px; overflow: hidden; } .child1{ 100px; height: 100px; background-color: red; float: left; } .child2{ 100px; height: 200px; background-color: green; float: left; } .child3{ 100px; height: 300px; background-color: blue; float: left; } .father2{ 200px; height: 100px; background-color: yellow; } /* .clearfix{ clear: left; } */ /* .clearfix:after{ content: "."; display: block; visibility: hidden; height: 0; clear: both; } */
浮动的div设置margin的时候不存在塌陷的问题的.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father{ width: 50px; } .child1{ width: 50px; height: 50px; background-color: red; float: left; margin-bottom: 50px; } .child2{ width: 50px; height: 50px; background-color: green; float: left; margin-top: 50px; } </style> </head> <body> <div class = "father"> <div class = "child1"></div> <div class = "child2"></div> </div> </body> </html>
在浮动中margin 0 auto是不能使用的,
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>marginauto不能使用的问题</title> <style> .box{ width: 100px; } .container{ width: 1260px; margin: 0 auto; height: 50px; background-color: red; } .container-test{ width: 1000px; margin: 0 auto; height: 50px; background: green; float: left; } </style> </head> <body> <div class = "box"> <div class = "container"> <div class = "container-test"></div> </div> </div> </body> </html>
文本和文字属性:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性和文字属性</title> <style> p{ width: 300px; height: 80px; font-size: 16px; border: 1px solid red; text-align: justify; text-indent :2em; /*text-decoration: overline;*/ /*text-decoration: line-through;*/ line-height: 30px; padding-top: 20px; } </style> </head> <body> <p>国家国国家国国家国国家国国国家国国家国国家国国家国</p> </body> </html>