热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

再战css

1.盒模型的属性:1.padding.box{width:200px;height:200px;background-color:red;*顺时针上右下左*paddi

1.盒模型的属性:

  1.padding

.box{width: 200px;height: 200px;background-color: red;/*顺时针 上右下左*/padding: 20px 30px 40px 50px;}

View Code

  2.border

    三要素:线性的宽度、线性的样式、颜色

.box{width: 200px;height: 200px;background-color: red;/*周围设置*/border: 5px solid green;/*分别对每个边进行设置*/border-left: 5px solid green;border-right: 1px dotted yellow;border-top: 5px double purple;border-bottom: 1px dashed purple;/*选中一个边设置属性*/border-left-style: solid;border-left-width: 1px;border-left-color: green;/*选中一个属性进行设计,也是顺时针*/border-width: 5px 10px;border-color: green yellow;border-style: solid double;}

View Code

    制作圆角:border-redius:xx px;(就是相当于以xxpx为半径切下去一个1/4圆)

  3.margin

      在标准文档流下:margin的水平不会出现任何问题,但是垂直方向上margin会出现塌陷问题

      在父盒子里有一个子盒子时,设置子盒子的margin-top属性,并不是他与父盒子之间的距离,如果想做到和父盒子之间有距离,需要将父盒子设置成浮动效果。

2.display显示

  在标准文档流下

  属性:

    block 块级标签

        独占一行,可以设置宽高,如果不设置宽,默认是父盒子宽度的100%

    inline 行内标签

        在一行显示,不可以设置宽高,根据内容来显示宽高

    inline-block 行内块

        在一行内显示,可以设置宽高

    none  不显示  隐藏  不在文档上占位置

 visibility:hidden;隐藏 在文档上占位置

3.浮动:脱离了标准文档流

    作用好处:是元素实现并排(布局),就在页面上不占位置

    浮动带来的问题:子盒子浮动,不在页面上占位置,如果父盒子不设置高度,那么撑不起父盒子的高度,页面出现紊乱

    清除浮动带来的问题:

      1.个父盒子设置固定的高度(但是后期不好维护)

      2.clear:both;

          给浮动元素的最后面,加一个空的块级标签(标准文档流下的块级标签)

          给当前这个标签设置一个clearfix类名,设置该标签属性clear:both;(但是代码冗余)

.clearfix{clear: both;}

1
2
3
View Code

      3.clearfix:after{

        content:".";

        display:block;

        height:0;

        visibility:hidden;

        clear:both;

}

      4.overfow:hidden;

 1em=当前标签下的字体大小

 

转:https://www.cnblogs.com/qq849784670/p/9677875.html



推荐阅读
  • 新年伊始,正是学习的最佳时机。本文全面解析了CK1957-Zookeeper的核心概念与实践技巧,旨在帮助初学者快速掌握这一深度学习工具。通过详细的理论讲解和实际操作示例,读者可以更好地理解Zookeeper的工作原理及其在分布式系统中的应用。无论是新手还是有一定基础的学习者,都能从中受益匪浅。 ... [详细]
  • 深入解析PowerShell Stable与Preview版的区别与应用
    在研究 PowerShell 的 GitHub 发布页面时,我们注意到除了稳定的 6.2.0 版本外,还推出了 6.2.0 的预览版。本文将详细探讨这两个版本之间的主要区别及其应用场景,帮助用户更好地选择适合自身需求的版本。我们将分析稳定版的成熟度、性能和安全性,以及预览版的新功能、改进和潜在风险,为用户提供全面的参考信息。 ... [详细]
  • BZOJ1034 详细解析与算法优化
    本文深入解析了BZOJ1034问题,并提出了优化算法。通过借鉴广义田忌赛马的贪心策略,当己方当前最弱的马优于对方最弱的马时进行匹配;同样地,若己方当前最强的马优于对方最强的马,也进行匹配。此方法在保证胜率的同时,有效提升了算法效率。 ... [详细]
  • 本文探讨了在Android应用中实现动态滚动文本显示控件的优化方法。通过详细分析焦点管理机制,特别是通过设置返回值为`true`来确保焦点不会被其他控件抢占,从而提升滚动文本的流畅性和用户体验。具体实现中,对`MarqueeText.java`进行了代码层面的优化,增强了控件的稳定性和兼容性。 ... [详细]
  • 题目描述:小K不幸被LL邪教洗脑,洗脑程度之深使他决定彻底脱离这个邪教。在最终离开前,他计划再进行一次亚瑟王游戏。作为最后一战,他希望这次游戏能够尽善尽美。众所周知,亚瑟王游戏的结果很大程度上取决于运气,但通过合理的策略和算法优化,可以提高获胜的概率。本文将详细解析洛谷P3239 [HNOI2015] 亚瑟王问题,并提供具体的算法实现方法,帮助读者更好地理解和应用相关技术。 ... [详细]
  • 成功实现Asp.Net MVC3网站与MongoDB数据库的高效集成
    我们成功地构建了一个基于Asp.NET MVC3框架的网站,并实现了与MongoDB数据库的高效集成。此次更新不仅完善了基本的创建和显示功能,还全面实现了数据的增删改查操作。在创建功能方面,我们修复了之前代码中的错误,确保每个属性都能正确生成。此外,我们还对数据模型进行了优化,以提高系统的性能和稳定性。 ... [详细]
  • 期末Web开发综合实践项目:运用前端技术打造趣味小游戏体验
    期末Web开发综合实践项目中,学生通过运用HTML、CSS和JavaScript等前端技术,设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况,还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果,直观呈现了游戏的互动性和视觉效果。 ... [详细]
  • 本文深入探讨了 Vue.js 中异步组件的应用与优化策略。首先,文章介绍了异步组件的基本概念及其在现代前端开发中的重要性。为了确保最佳实践,建议使用 Webpack 作为模块打包工具,因为 Browserify 默认不支持异步组件的加载。接着,详细解释了异步组件的使用方法,并提供了官方文档的相关链接以供参考。此外,文章还讨论了多种优化技巧,包括代码分割、懒加载和性能调优,以提升应用的整体性能和用户体验。 ... [详细]
  • MySQL 错误:检测到死锁,在尝试获取锁时;建议重启事务(Node.js 环境)
    在 Node.js 环境中,MySQL 数据库操作时遇到了“检测到死锁,在尝试获取锁时;建议重启事务”的错误。本文将探讨该错误的原因,并提供有效的解决策略,包括事务管理优化和锁机制的理解。 ... [详细]
  • 本文介绍了使用 Python 编程语言高效抓取微博文本和动态网页图像数据的方法。通过详细的示例代码,展示了如何利用爬虫技术获取微博内容和动态图片,为数据采集和分析提供了实用的技术支持。对于对网络数据抓取感兴趣的读者,本文具有较高的参考价值。 ... [详细]
  • 在Hive中合理配置Map和Reduce任务的数量对于优化不同场景下的性能至关重要。本文探讨了如何控制Hive任务中的Map数量,分析了当输入数据超过128MB时是否会自动拆分,以及Map数量是否越多越好的问题。通过实际案例和实验数据,本文提供了具体的配置建议,帮助用户在不同场景下实现最佳性能。 ... [详细]
  • HBase在金融大数据迁移中的应用与挑战
    随着最后一台设备的下线,标志着超过10PB的HBase数据迁移项目顺利完成。目前,新的集群已在新机房稳定运行超过两个月,监控数据显示,新集群的查询响应时间显著降低,系统稳定性大幅提升。此外,数据消费的波动也变得更加平滑,整体性能得到了显著优化。 ... [详细]
  • Spring框架入门指南:专为新手打造的详细学习笔记
    Spring框架是Java Web开发中广泛应用的轻量级应用框架,以其卓越的功能和出色的性能赢得了广大开发者的青睐。本文为初学者提供了详尽的学习指南,涵盖基础概念、核心组件及实际应用案例,帮助新手快速掌握Spring框架的核心技术与实践技巧。 ... [详细]
  • 本课程详细介绍了如何使用Python Flask框架从零开始构建鱼书应用,涵盖高级编程技巧和实战项目。通过视频教学,学员将学习到Flask的高效用法,包括数据库事务处理和书籍交易模型的实现。特别感谢AI资源网提供的课程下载支持。 ... [详细]
  • 在处理分享功能时,以往通常会首先考虑使用第三方SDK,如友盟等。然而,通过实际项目经验发现,利用iOS原生的UIActivityViewController不仅可以实现高效、稳定的分享功能,还能更好地控制用户体验。本文将详细介绍如何利用iOS原生技术缓存HTML内容,并结合URL分享的最佳实践,帮助开发者在实际开发中提升应用性能和用户满意度。 ... [详细]
author-avatar
路见不平出手打_418
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有