以下是 个人在用CSS时遇见问题时写的随笔。有类似问题的可以参考下。
CSS样式选择遵循就近原则
内联样式表：类似<p style=”color:sienna;margin-left:20px”>这是一个段落。</p>
外部样式表：类似<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
内部样式表：类似<style>hr {color:sienna;}</style>
当我们给块级元素设置响应式高度的时候，例如给div设置height:50%，往往没能看到效果。原因是百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的。需要了解的是对于宽度来说，其父级元素无须确定宽度就能设置百分比，但高度则不同，若某元素的父元素没有确定高度，则无法有效使用height:XX%的样式。块级元素在 没有设置高度 的情况下高度是由内容所决定的。
对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
CSS absolute绝对定位是相对于父级元素的，如果元素没有已定位的父元素，那么它的位置相对于<html>。
overflow父级边框塌陷问题，除了父级元素设置高度，还可以在父级元素增加一个空的 div，取消浮动，设置外边距和内边距为0，或者在父级元素中设置overflow属性hidden。
背景图片充满整个屏幕代码：
body {
/* 加载背景图 */
background-image: url('https://static.runoob.com/images/mix/paper.gif');
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色，背景图加载过程中会显示背景色 */
background-color: #464646;
}width:100% 有滚动条背景颜色没有完全覆盖解决办法：
.box{width:100%;background-color:#f00;}
.wrap{width:1200px;margin:0 auto;height:100px;}
<div class=”box”>
<div class=”wrap”></div>
</div>
如果仅仅是这么写。缩小窗口就会出现你说的那个问题，在box里面加一个min-width就不会出现了。
.box{width:100%;min-width:1200px;}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/143090.html
