文章目录
1.透明
opacity：0~1的数字；0代表完全透明，1代表不透明
它在低版本浏览器中有兼容问题，解决方案：
filter：alpha（opactity=0~100的数字）
注意：如果设置元素透明度，元素里边的后代也必然有透明度，即使给子元素设置不透明也不行。
如果只是背景色透明
background:rgba(R,G,B,0~1的透明度)
示例
<style>
.wrap{
width: 500px;
height: 500px;
background-image: url("##");
background-size: 100% 100%;
}
.box{
width: 100px;
height: 100px;
background: rgba(4,4,4,0.5);
opacity: 0.5;
transition: all 2s;
font-size: 80px;
font-weight: bold;
color: skyblue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">憨批</div>
</div>
</body>
2.自适应概念
对于不同的屏幕大小/分辨率/设备，都能显示正常效果
3.宽度自适应
1.使用百分比
width:50%
2.不设置宽度
3.使用最大最小宽度
min-width:*px;最小宽度
max-width:*px;最大宽度
给body设置min-width：版心宽度；
4.高度自适应
1.不设置高度
注意：如果元素的子元素有浮动，就会脱离文档流，导致元素没有内容，就没有高度了。--------高度塌陷/浮动的影响。
解决方案：【高度塌陷的解决/清除浮动】
清除浮动
1.给浮动元素最后添加一个空的div，设置一个类名clear
<div class='clear'></div>
设置样式
.clear{
clear:both;
}
2.给浮动元素的父亲添加类名clearfix,设置样式
父元素 <div class="wrap clearfix"></div>
设置样式
.clearfix：after{
display:block;设置成块元素
content:'';设置该元素的内容为空的
clear:both;清除浮动
height:0;解决兼容
}
3.给浮动元素的父亲设置样式 overflow：Hidden;
在项目，如果高度可能不确定的时候，就不要设置高度
如果写了浮动，就给对应的父元素设置clearfix类名，清除浮动。
2.使用百分比
实现一屏界面，必须加
html,body{
height:100%
}
3.使用最大最小高度
min-height:*px;
max-height:*px;
5查错方式
1.html
1.标签嵌套错误
2.id名有空格
2.css
1.选择器
名字
语法
优先级不够
2.属性
3.属性值
单位
相关属性没有写
该元素是否支持该属性
4.文件引入错误/文件没有引入
3.其他错误
1.没有保存
2.没有刷新
3.文件没有对应
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
