1200字范文 > CSS--背景样式---伪类选择器---高级选择器---盒子模型---浮动

CSS--背景样式---伪类选择器---高级选择器---盒子模型---浮动

时间：2022-10-16 17:47:58

文章目录

背景样式背景颜色背景图片图片重复方式图片位置图片附着简写属性伪类选择器高级选择器后代选择器直接后代选择器并列选择器相邻兄弟选择器盒子模型边框内边距外边距外边距合并处理溢出的内容改变元素的盒类型浮动

背景样式

背景颜色

示例如下：

.box {/* 下面 3 种写法是等价的 */background-color: red;background-color: rgb(255, 0, 0);background-color: #ff0000;}

背景图片

示例如下：

.box {background-image: url("./cat.jpg");}

图片重复方式

示例如下：

.box {/* repeat 默认值，默认情况下，在水平和垂直方向上都重复*/background-repeat: repeat;background-repeat: repeat-x;background-repeat: repeat-y;background-repeat: no-repeat;}

图片位置

示例如下：

/*水平：left center right垂直：top center bottom*/.box {background-position: 40px 40px;background-position: 20% 20%;background-position: right bottom;}

图片附着

示例如下：

.box {/* 背景图随着页面内容滚动 */background-attachment: scroll;/* 背景图不会随着页面内容滚动 */background-attachment: fixed;}

简写属性

示例如下：

.box {background: #00ff00 url("smiley.gif") no-repeat fixed center;}

伪类选择器

:link：选择未被点击过的链接。:visited：选择被点击过之后的链接。:hover：选择鼠标悬停在其上的元素。:active：选择正在被点击的元素（点着不放）。

高级选择器

后代选择器

后代选择器用于指定目标选择器必须处于某个选择器对应的元素内部。其语法格式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k60K4bgv-1574474665496)(./img/children_selector.png)]

<!—使用后代选择器 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>后代选择器测试</title><style>div{width:300px;height:60px;background-color:#ddd;}div .a{background-color: green;border:1px solid red;}</style></head><body><div>没有任何属性的div元素</div><div><div class=”a”>处于div之内，且class属性为a的元素</div></div><div class=”a”>没有处于div之内，且class属性为a的元素</div></body></html>

代码中的div .a选择器定义的CSS样式，应该对处于

元素之内且class属性为a的元素起作用。

直接后代选择器

子选择器用于指定目标选择器必须是某个选择器对应的元素的子元素。自选择器的语法格式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qcoJra7z-1574474665498)(./img/child_selector.png)]

子选择器与后代选择器有点相似，它们之间存在如下区别：对于后代选择器，只要目标选择器位于外部选择器对应的元素内部，即使是其“孙子元素”也可；对于子选择器，要求目标选择器必须是外部选择器对应的元素的直接子元素才行。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>后代选择器测试</title><style>div{width:300px;height:60px;background-color:#ddd;}div .a{background-color: green;border:1px solid red;}</style></head><body><div><a href=””>百度一下</a><p class=”a”> div 直接子元素</p><p><a class=”a”>，且class属性为a的元素</a></p></div></body></html>

并列选择器

有些时候，我们需要让一份CSS样式对多个选择器起作用，那就可以利用并列选择器来实现了。并列选择器的语法格式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ns5gICQn-1574474665500)(E:/huohua12/00-%E5%9F%BA%E7%A1%80%E8%AF%BE/day04/%E8%AF%BE%E4%BB%B6/img/share_selector.png)]

对于并列选择器而言，｛｝中定义的CSS样式将会对前面列出的所有选择器匹配的元素起作用。例如下面的示例。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>并列选择器</title><style>div,.a,#abc{width:200px;height:40px;background-color: #888;border:2px dotted green;}</style></head><body><div>没有任何属性的div元素</div><p class=”a”> class属性为a的元素</p><h3 id=”abc”> id为abc的元素</h3></body></html>

上面定义的样式对div元素、class属性为a的元素、id为abc的元素都起作用。

相邻兄弟选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KKNZ66fd-1574474665505)(E:/huohua12/00-%E5%9F%BA%E7%A1%80%E8%AF%BE/day04/%E8%AF%BE%E4%BB%B6/img/sblings_selector.png)]

盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gf3nWcZq-1574474665507)(./img/box_model.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HNSoI07K-1574474665508)(./img/paper_box.png)]

元素盒子有两部分是可见的：内容和边框。内边距是内容和边框之间的空间，外边距是边框和页面上其他元素之间的空间。

边框

border-style属性的值：

none没有边框dashed短线式边框dotted圆点线式边框double双线式边框groove槽线式边框inset有内嵌效果的边框outset有外凸效果的边框ridge脊线边框solid实线边框

div {width: 250px;height: 50px;background-color: #dbdbdb;margin-bottom: 10px;color: red;line-height: 50px;text-align: center;font-weight: bold;}.none {border: none;}.dashed {border: 10px dashed gray;}.dotted {border: 10px dotted gray;}.double {border: 10px double gray;}.groove {border: 10px groove gray;}.inset {border: 10px inset gray;}.outset {border: 10px outset gray;}.ridge {border: 10px ridge gray;}.solid {border: 10px solid gray;}<div class="none">none没有边框</div><div class="dashed">dashed短线式边框</div><div class="dotted">dotted圆点线式边框</div><div class="double">double双线式边框</div><div class="groove">groove槽线式边框</div><div class="inset">inset有内嵌效果的边框</div><div class="outset">outset有外凸效果的边框</div><div class="ridge">ridge脊线边框</div><div class="solid">solid实线边框</div>

内边距

内边距会在元素内容和边框之间添加空白。我们可以为元素的每个边界单独设置内边距，也可以使用padding简写属性，在一条声明中设置所有的值。

外边距

外边距是元素边框和页面上围绕在它周围的所有东西之间的空白区域。围绕在它周围的东西包括其他元素和它的父元素。

跟内边距属性相似，使用百分数值设置外边距时，百分数总是跟包含块的宽度相关。

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

下面三种基本情形会出现外边距合并：

相邻兄弟元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Y21t4lJ-1574474665510)(./img/margin_concat1.png)]

相邻的两个兄弟元素的之间的外边距会合并。如：

<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p><p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>

可以发现这两个段落中间的距离，不是“上面段落的下边距”与“下面段落的上边距”的和，而是两者中的较大者（在此示例中为30px）。

+块级父元素与其第一个或最后一个子元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TN2d7lkB-1574474665512)(./img/margin_concat2.png)]

此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。

空块元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E9b3Ff3j-1574474665514)(./img/margin_concat1.png)]

如果存在一个空的块级元素，其 border、padding、content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例如：

<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p><div style="margin-top: 20px; margin-bottom: 20px;"></div><p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>

当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。

如两个兄弟元素，上面的元素的下边距为 20px ，下面的元素的上边距为 -20px ，那么发生外边距合并后，这两个元素的实际距离将变成 0px 。

处理溢出的内容

如果放置内容的元素尺寸太小的话，浏览器默认的处理方式是内容溢出，溢出的内容会被显示。如下例所示：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文档的标题</title><style>p{border:1px solid blue;width: 100px;height: 100px;}</style></head><body><p>悟空和唐僧一起上某卫视非诚勿扰,悟空上台,24盏灯全灭。理由:1.没房没车只有一根破棍. 2.保镖职业危险.3.动不动打妖精,对女生不温柔. 4.坐过牢,曾被压五指山下500年。唐僧上台，哗!灯全亮。理由:1.公务员； 2.皇上兄弟，后台最硬 3.精通梵文等外语 4.长得帅 5.最关键一点：有宝马！</p></body></html>

我们可以使用overflow属性改变这种行为，下表列出了相关的overflow属性及值。

属性名：

overflow-x设置水平方向的溢出方式overflow-y设置垂直方向的溢出方式overflow简写属性，只能设置一个属性，当水平方向和垂直方向上设置的值相同时，可以使用该属性。

属性值：

visible：默认值。内容不会被修剪，会呈现在元素框之外。hidden：内容会被修剪，溢出部分是不可见的scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto：由浏览器决定如何显示。如果内容太多就显示滚动条，否则就不显示。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>控制内容溢出</title><style>p{border:1px solid blue;width: 100px;height: 100px;}#first{overflow:hidden;}#second{overflow:scroll;} </style></head><body><p id=”first”>小明过生日，妈妈对小明说：儿子吹蜡烛，许个愿吧！吹完蜡烛后，妈妈问小明：许的什么愿啊？小明特无奈的说：我希望下个生日，蜡烛下面能有个蛋糕。</p><p id=”second”>小明过生日，妈妈对小明说：儿子吹蜡烛，许个愿吧！吹完蜡烛后，妈妈问小明：许的什么愿啊？小明特无奈的说：我希望下个生日，蜡烛下面能有个蛋糕。</p></body></html>