当前位置：首页 > news >正文

overflow-hidden ＞选择器（11.8 1.5hour）

news 2025/11/9 10:15:17

一.溢出隐藏

   <style>div{width: 150px;height: 60px;background-color: aqua;overflow: hidden;}</style>
</head>
<body><div>今天天气真好<br>今天天气真好<br>今天天气真好<br>今天天气真好<br></div>

二 .清除浮动

BFC(块级格式上下文)

一般而言,父级元素不设置高度,高度由内容增加自适应高度,当父级元素内部的子元素设置浮动以后,子元素会脱标,不占位,父级元素检测不到子元素的高度,父级元素的高度是0

        <style>.box{background-color: yellow;overflow: hidden;   }.box1{background-color: violet;width: 100px;height: 100px;float: left;}.box2{background-color: turquoise;width: 100px;height: 100px;float: left;}.box3{width: 300px;height: 100px;background-color: blue;}</style></head>
<body><div class="box"><div class="box1"></div><div class="box2"></div></div><div class="box3"></div></body>

三.解决外边距塌陷问题

父级元素内部有子元素,如果给子元素加上一个margin-top,那么父级元素也会跟着下来，这样就造成了外边距塌陷

    <style>*{margin: 0px;padding: 0px;}.box1{width: 100px;height: 100px;background-color: yellowgreen;margin-top: 20px;}.box{overflow: hidden;width: 100%;height: 300px;background-color: aqua;}</style></head>
<body><div class="box"><div class="box1"></div></div></body>

四.>选择器的作用

子代选择器

>子代选择符只找上级的基础上往下查找一层

    <style>div > span{color: aqua;}</style>
</head>
<body><div>1234<span>5</span></div>

无法选中:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div > span{color: aqua;}</style>
</head>
<body><div>1234<span><a href="">5</a></span></div></body>
</html>

查看全文

http://www.dtcms.com/a/586131.html