标签：表示 username over 利用 content 范围 oct ble 并且
浮动在方便了块的左右移动的同时也带来了它的副作用：
出现父标签塌陷的问题
加一个clear：left/right
#d4 { clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/ }
.clearfix:after { content: ‘‘; display: block; clear:both; }
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
一般我们在向框框中导入图片时，要是图片大于框框，我们又想让图片显示出主要部分
那么我们就需要用到overflow这个属性，他的属性如下
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
我们可以通过overflow：hidden，同时调整位置来设置头像，具体实现如下
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>圆形的头像示例</title> <style> * { margin: 0; padding: 0; background-color: #eeeeee; } .header-img { width: 150px; height: 150px; border: 3px solid white; border-radius: 50%; overflow: hidden; } .header-img>img { width: 100%; } </style> </head> <body> <div class="header-img"> <img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" > </div> </body> </html>
所有的标签默认都是静态的static，无法改变位置
position: static;
相对于标签原来的位置做移动relative
position: relative; /*相对定位 标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签 虽然你哪怕没有动 但是你的性质也已经改变了
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
#d2 { height: 100px; width: 200px; background-color: red; position: relative; /*已经定位过了*/ } #d3 { height: 200px; width: 400px; background-color: yellowgreen; position: absolute; left: 200px; top: 100px;
相对于浏览器窗口固定在某个位置
#d4 { position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/ bottom: 10px; right: 20px; height: 50px; width: 100px; background-color: white; border: 3px solid black;
内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。
换句话说就是一个块标签在消失了以后，其他标签会不会顶替原来的位置
相对定位：
1.浮动：浮动有父标签塌陷的副作用，说明浮动会脱离文档流
2.绝对定位
3.固定定位
设置对象的层叠顺序。
以百度登陆页面为例 其实是三层结构
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=100) 离用户最近
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } .cover { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 99; } .modal { background-color: white; height: 200px; width: 400px; position: fixed; left: 50%; top: 50%; z-index: 100; margin-left: -200px; margin-top: -100px; } </style> </head> <body> <div>这是最底层的页面内容</div> <div class="cover"></div> <div class="modal"> <h1>登陆页面</h1> <p>username:<input type="text"></p> <p>password:<input type="text"></p> <button>点我点我~</button> </div> </body> </html>
它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
标签：表示 username over 利用 content 范围 oct ble 并且
原文地址：https://www.cnblogs.com/heirenxilou/p/12890614.html
