盒模型以及清除浮动 041
盒模型 : box model 网页中都会显示一些方方正正的盒子 称这种盒子叫盒模型
盒模型属性:
width : 内容的宽度
height: 内容的高度
border 边框
盒模型的计算 : 先不管margin
盒子的真实宽度 = width + 2*padding + 2*border
盒子的真实高度 = height + 2*padding + 2*border
如果要保证盒子的原来尺寸 加padding就要减去width 减padding就要加width border也一样.
利用border属性画一个圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; height: 300px; background-color: darkgoldenrod; /*border: 1px solid darkred;*/ /*根据方向来设置属性*/ /*border-left: 1px solid darkred;*/ /*border-right: 5px dotted darkgoldenrod;*/ /*border-top: 10px double darkblue;*/ /*border-bottom: 1px solid greenyellow;*/ /*根据三要素*/ /*border-width: 5px 10px 1px;*/ /*border-style: solid double dashed;*/ /*border-color: red yellow darkcyan darkgray;*/ /*border: 0;*/ border-radius: 50%; //边框的弧度 成圆的关键 } </style> </head> <body> <!--三要素 粗细 线性样式 颜色--> <div class="box"></div> </body> </html>
造一个三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> <!--利用边框的宽度挤压出来三角形--> .sanjiao{ width: 0px; height: 0px; border-left: 50px solid transparent; border-bottom: 50px solid green; border-right: 50px solid transparent; } </style> </head> <body> <div class="sanjiao"></div> </body> </html>
padding 和margin的使用 padding 没有问题 可以正常使用 但是margin在垂直方向上就会出现塌陷问题 即给两个标准流下的盒子设置垂直方向上的margin时, 比如上边的盒子设置margin-bottom : 20px; 下边的盒子设置 margin-top : 50px; 结果两个盒子之间的距离仅为50px 不是70px 称这种现象叫做塌陷 没法解决 称这种技巧为'奇技淫巧' 解决方案 设置浮动
margin : 0 auto; 使盒子居中
div{
width: 780px;
height: 50px;
background-color: red;
/*水平居中盒子*/
margin: 0px auto;
/*水平居中文字*/
text-align: center;
}
使用margin: 0 auto 注意事项
1 . 水平居中盒子必须有width 要有明确的width 即不是100% 有具体数量
2 .只有标准流下的盒子才能使用
3 .是居中盒子 不是居中文本 文本居中使用的是text-align:center;
margin 描述的是兄弟盒子之间的关系 而padding 描述的是父子盒子之间的关系
要善于使用父亲的padding 而不是margin
版心设置 : 即让文本在盒子的中心
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } body { font-size: 14px; color: #fff; } a{ text-decoration: none; } #top { width: 100%; background-color: #000; height: 40px; line-height: 40px; } .container{ width: 1226px; /*background-color: red;*/ /*让盒子居中*/ /*margin-right: auto;*/ /*margin-left: auto;*/ margin: 0 auto; } #top a{ font-size: 12px; color: #b0b0b0; } #top a:hover{ color: #fff; } </style> </head> <body> <div id="top"> <div class="container"> <div class="top-l"> <!--div标签是块级标签 独占一行,span是行内标签 一行内显示--> <a href="#">小米商城</a> <span class="sep">|</span> <a href="#">MIUI</a> <span class="sep">|</span> <a href="https://iot.mi.com/index.html" target="_self">loT</a> <span class="sep">|</span> </div> </div> </div> <div> <div class="container"></div> </div> </body> </html>
标准文档流 : 即从上而下 从左到右 进行排布
微观现象有 : 空白折叠现象 :多个空格会被合并成一个空格现在世道浏览器页面中 即空白折叠现象
高矮不齐 底边对齐:即文字和图片并排 高度不一样 但是底边对齐
自动换行 : 一行盛不下换行写
浮动 : 是css里面布局最多的一个属性 也是很重要的一个属性
四大特征 :
浮动的元素脱标
浮动的元素互相贴靠
浮动的元素有字围的效果
收缩的效果
脱标 即脱标准离文档流. 其不在页面中占位置 相当于'飘起来了' 所有标签一旦设置浮动 就能并排 且都不区分行内 块状元素 都能设置宽高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ background-color: red; float: left; width: 400px; height: 50px; padding-top: 50px; } span{ float: left; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="box">alex</div> <span>alex</span> <!--<div>此时这个span能够设置宽度、高度</div>--> </body> </html>
互相贴靠 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .father{ /*width: 500px;*/ /*height: 500px;*/ /*border: 1px solid darkred;*/ } .box{ width: 200px; height: 600px; background-color: red; float: left; } .wrap{ width: 300px; height: 300px; background-color: green; float: left; } .box2{ width: 200px; height: 500px; background-color: yellow; float: left; } </style> </head> <body> <div class="father"> <div class="box"></div> <div class="box2"></div> <div class="wrap"></div> </div> </body> </html>
效果发现：
如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠
字围效果:
.box1{ width: 100px; height: 400px; float: left; background-color: red; } .box2{ width: 150px; height: 450px; float: left; background-color: yellow; } .box3{ width: 300px; height: 300px; float: left; background-color: green; } <div> <img src="./images/企业1.png" alt=""> </div> <p> 123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 </p>
效果发现：所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。
紧凑效果: 一个浮动元素 如果没有设置width 则自动收缩为文字的宽度.
谨记：关于浮动，我们一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动，
清除浮动
如果不给父盒子设置一个高度 那么浮动的子元素不会填充父盒子的高度 因为其脱离了标准文档流 虽然可以实现元素并排的效果 但是还带来了页面布局的极大错乱 所以要清除浮动
方法 : 1 给父盒子设置高度 2 .clear :both 3 伪元素清除法 4 overflow : hidden
第一种 不灵活 使用场景 导航栏
第二种 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both 清除别人对我的浮动影响 内墙法 但是其 无缘无故加了div元素 结构冗余 用的也少
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ width: 100%; background-color: darkorange; /*1.给父盒子设置高度*/ /*height: 40px;*/ } .top .left{ width: 500px; height: 40px; float: left; background-color: darkgreen; } .top .right{ width: 100px; height: 40px; float: right; background-color: darkmagenta; } .header{ width: 500px; height: 100px; background-color: red; } .clearfix{ clear: both; } </style> </head> <body> <div class="top"> <!--<span>alex</span>--> <div class="left"></div> <div class="right"></div> <div class="clearfix"></div> </div> <div class="header"> <span>alex</span> </div> </body> </html>
伪元素选择器:
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
}
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
}
/*在....之后 添加内容，使用非常频繁 通常与布局有很大的关联（清除浮动）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
第三种 用得比较多 给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ width: 100%; background-color: darkorange; } .top .left{ width: 500px; height: 40px; float: left; background-color: darkgreen; } .top .right{ width: 100px; height: 40px; float: right; background-color: darkmagenta; } .header{ width: 500px; height: 100px; background-color: red; } .clearfix:after{ content: '.'; display: block; /*隐藏 元素不占位置*/ /*display: none;*/ /*隐藏 占位置*/ visibility: hidden; height: 0; clear: both; } </style> </head> <body> <div class="top clearfix"> <div class="left"></div> <div class="right"></div> </div> <div class="header"></div> </body> </html>
overflow : hidden:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ width: 100%; background-color: darkorange; /*BFC*/ /*但是不要忘了它本来的一层的意思*/ overflow: hidden; } .top .left{ width: 500px; height: 40px; float: left; background-color: darkgreen; } .top .right{ width: 100px; height: 40px; float: right; background-color: darkmagenta; } .header{ width: 500px; height: 100px; background-color: red; } </style> </head> <body> <div class="top"> <div class="left"></div> <div class="right"></div> </div> <div class="header"></div> </body> </html>
overflow : 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
有五个值：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
逐渐演变成overflow：hidden清除法。
其实它是一个BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522