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

CSS选择器——伪元素选择器之处理父元素高度及外边距溢出

1. 子元素浮动导致父元素高度不够

问题描述:最小高度为100px的父元素,嵌套一个300px高度的子元素,当子元素浮动时,父元素高度并不随之升高。
问题视图:
clipboard.png
期望视图:
clipboard.png

待解决代码:

<!DOCTYPE html>
<html>
<head>
    <title>1</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d0{width: 300px;background: #336;min-height: 100px;}
        .d1{float: right;width: 200px;background: #289;height: 200px;opacity: 0.5}
    </style>
</head>
<body>
    <div class="d0">
        <div class="d1">我是浮动的子元素</div>
    </div>
</body>
</html>

解决方案:父元素底部追加一个内容为空的子元素,class为clear,对其添加样式.clear:after{content:"";display:block;clear:both;}

已解决代码:

<!DOCTYPE html>
<html>
<head>
    <title>1</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d0{width: 300px;background: #336;min-height: 100px;}
        .d1{float: right;width: 200px;background: #289;height: 200px;opacity: 0.5}
        /*解决问题的代码*/
        .clear:after{content:"";display:block;clear:both;}
    </style>
</head>
<body>
    <div class="d0">
        <div class="d1">我是浮动的子元素</div>
        <div class="clear"></div>
    </div>
</body>
</html>

2.子元素浮动导致外边距溢出

问题描述:
在某些特殊的条件下,为子元素设置上外边距时,有可能会作用到父元素上。
问题视图:
clipboard.png
期望视图:
clipboard.png

待解决代码:

<!DOCTYPE html>
<html>
<head>
    <title>2</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d1{width: 300px;height: 100px;background: #336}
        .d2{width: 300px;height: 100px;background: #289}
        .d2son{width: 150px;height: 50px;background: #caa;opacity: 0.5;margin-top: 50px;}
    </style>
</head>
<body>
    <div class="d1">上面的div</div>
    <div class="d2">
        <div class="d2son">下面的div的子元素</div>
    </div>
</body>
</html>

解决方案:
在d2中的第一个子元素位置处(!!!必须是空子元素)生成内容为空显示方式为table(!!!必须是table元素)
d2中添加第一个子元素,对其添加样式:.d2:before {content:"";display:table;}
已解决代码:

<!DOCTYPE html>
<html>
<head>
    <title>2</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d1{width: 300px;height: 100px;background: #336}
        .d2{width: 300px;height: 100px;background: #289}
        .d2son{width: 150px;height: 50px;background: #caa;opacity: 0.5;margin-top: 50px;}
        /*解决问题的代码*/
        .d2:before {content:"";display:table;}
    </style>
</head>
<body>
    <div class="d1">上面的div</div>
    <div class="d2">
        <div class="d2son">下面的div的子元素</div>
    </div>
</body>
</html>

相关文章:

  • 有了这四个“最”,AI或许可以成功预测地震
  • JS设计模式之工厂模式
  • Web前端开发必备手册(Cheat sheet)
  • 如何在招聘中考核.NET架构师
  • 《ActiveMQ 系列》- HelloWorld
  • SSM-Spring-02:Spring的DI初步加俩个实例
  • DOM的那些事
  • 【mysql】count(*),count(1)与count(column)区别
  • 北塔软件:BI+AI+DI,做IT运维数据掘金的使能者
  • 秋季学期学习总结
  • 如何解决微信端直接跳WAP端
  • iOS CAReplicatorLayer 简单动画
  • Java Activiti 工作流引擎 springmvc SSM 流程审批 后台框架源码
  • D-Uni 获斯道资本500万美元投资-「D-Uni颉一科技」
  • 阿里云宣布华北5地域十月开服,将部署国内首个全系Skylake+25G网络
  • canvas 高仿 Apple Watch 表盘
  • Idea+maven+scala构建包并在spark on yarn 运行
  • JAVA多线程机制解析-volatilesynchronized
  • java取消线程实例
  • js
  • SpringBoot几种定时任务的实现方式
  • SSH 免密登录
  • Vue小说阅读器(仿追书神器)
  • Wamp集成环境 添加PHP的新版本
  • 动手做个聊天室,前端工程师百无聊赖的人生
  • 回流、重绘及其优化
  • 紧急通知:《观止-微软》请在经管柜购买!
  • 让你成为前端,后端或全栈开发程序员的进阶指南,一门学到老的技术
  • 探索 JS 中的模块化
  • 找一份好的前端工作,起点很重要
  • 仓管云——企业云erp功能有哪些?
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • %3cli%3e连接html页面,html+canvas实现屏幕截取
  • (C++20) consteval立即函数
  • (Java)【深基9.例1】选举学生会
  • (第9篇)大数据的的超级应用——数据挖掘-推荐系统
  • (附源码)springboot家庭装修管理系统 毕业设计 613205
  • (汇总)os模块以及shutil模块对文件的操作
  • (免费分享)基于springboot,vue疗养中心管理系统
  • (转)机器学习的数学基础(1)--Dirichlet分布
  • (转)全文检索技术学习(三)——Lucene支持中文分词
  • .bat批处理(五):遍历指定目录下资源文件并更新
  • .net refrector
  • .NET 服务 ServiceController
  • .NET/C# 中你可以在代码中写多个 Main 函数,然后按需要随时切换
  • .net经典笔试题
  • .one4-V-XXXXXXXX勒索病毒数据怎么处理|数据解密恢复
  • @javax.ws.rs Webservice注解
  • @TableLogic注解说明,以及对增删改查的影响
  • @WebServiceClient注解,wsdlLocation 可配置
  • [AI]文心一言出圈的同时,NLP处理下的ChatGPT-4.5最新资讯
  • [AIGC] 如何建立和优化你的工作流?
  • [codeforces]Levko and Permutation
  • [C语言]——函数递归
  • [c语言]小课堂 day2