发表于： 2019-03-16 21:57:19
1 739
今天完成的事情：
1今天把css任务十四第一个页面的导航栏与轮播图做出来了
明天计划的事情：
完成第一个页面
收获：
overflow: hidden; 剪切 的是 按该元素的高度来剪切的 即超过该元素的高度就会被剪切 与脱标等无关
例：
将ul 设置绝对定位（必须给他的父级元素设置相对定位 否则ul就是相对窗口左上角脱标的 因为这里是在他的父级元素设置了overflow: hidden 如果不给他的父级元素设置相对定位 那么它的内容不会被剪切 因为这时ul是根据整个窗口定位的 所以即使ul的高度超过了父级元素div的高度 也不会因为父级元素的overflow: hidden而被剪切）
媒体查询不生效的原因：
1.and 后面一定要有空格~~~ 切记
2.meta 里面需要加上一句话：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
3.代码写错了，选择器写错了，样式备覆盖了·等等低级问题（即权重小了），可以先在里面，写个简单的并且绝对会生效的额，先看控制台里面有没有这些media关于尺寸样式代码，如果尺寸代码有，那么，你肯定哪里写错了，细心的找找吧~~~
例; 下面就是因为媒体查询的权重小于 上面的权重
所以应该加上
@media (min-width: 768px) {
.bor {
display: none;
}
header .bg .nav-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
如果宽度设置为100%
那么再设置左右margin 的话就会超过100% 就会出现水平滚动条
所以如果要设置左右margin时 先不要将盒子的宽度设置为100%
例：.top{
@include flex(space-between, row);
@include box(94%,30px );
margin: 0 3%;
100%=94%+3%*2
返回列表
评论