css 随笔

山河亦问安

已于 2023-03-30 20:50:51 修改

阅读量108

点赞数 1

分类专栏：前端基础（html+css+js) 文章标签： css 前端 html Powered by 金山文档

于 2023-01-06 17:01:40 首次发布

本文链接：https://blog.csdn.net/qq_43649937/article/details/128579165

版权

前端基础（html+css+js) 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章详细阐述了CSS样式的选择原则，包括内联、外部和内部样式表。讨论了百分比高度在块级元素中的应用，强调了父元素高度的重要性。还提到了CSS绝对定位、边距百分比计算以及解决父级边框塌陷的方法。此外，分享了如何设置背景图片充满屏幕及处理滚动条背景色覆盖问题的技巧。

摘要由CSDN通过智能技术生成

以下是个人在用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>

如果仅仅是这么写。缩小窗口就会出现你说的那个问题，在box里面加一个min-width就不会出现了。

.box{width:100%;min-width:1200px;}