53.前端07——css04
2021-03-07 06:26
YPE HTML>
标签：表示 username over 利用 content 范围 oct ble 并且
一、解决浮动带来的影响
1.浮动带来的影响
浮动在方便了块的左右移动的同时也带来了它的副作用：
出现父标签塌陷的问题
2.几种解决方法
1.自己加一个div设置高度
在设置了浮动的div后再根据浮动的这些div标签自己在手动加一个高度和设置的浮动div一样的div来防止塌陷
ps：这个办法是最没有技术含量最蠢最笨最麻烦的方法
2.利用clear属性
加一个clear：left/right
#d4 { clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/ }
3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after { content: ‘‘; display: block; clear:both; }
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
二、溢出属性
一般我们在向框框中导入图片时，要是图片大于框框，我们又想让图片显示出主要部分
那么我们就需要用到overflow这个属性，他的属性如下
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
我们可以通过overflow：hidden，同时调整位置来设置头像，具体实现如下
圆形的头像示例 { 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%; }
三、定位
1.静态
所有的标签默认都是静态的static，无法改变位置
position: static;
2.相对定位(了解)
相对于标签原来的位置做移动relative
position: relative; /*相对定位 标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签 虽然你哪怕没有动 但是你的性质也已经改变了
3.绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以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;
4.固定定位(常用)
相对于浏览器窗口固定在某个位置
eg:右侧小广告
#d4 { position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/ bottom: 10px; right: 20px; height: 50px; width: 100px; background-color: white; border: 3px solid black;
四、验证浮动和定位是否脱离文档流
文档流中：
内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。
换句话说就是一个块标签在消失了以后，其他标签会不会顶替原来的位置
1.不脱离文档流
相对定位：
2.脱离文档流
1.浮动：浮动有父标签塌陷的副作用，说明浮动会脱离文档流
2.绝对定位
3.固定定位
五、z-index模态框
设置对象的层叠顺序。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
以百度登陆页面为例 其实是三层结构
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=100) 离用户最近
Title { 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; }这是最底层的页面内容登陆页面
username:
password:
六、透明度opacity
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
53.前端07——css04
标签：表示 username over 利用 content 范围 oct ble 并且
原文地址：https://www.cnblogs.com/heirenxilou/p/12890614.html
上一篇：前端入门04——CSS
下一篇：js对象格式化为表单数据