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

归类一下CSS初级的东西

css基础的东西集中体现在了“磊盒子”这一个枯燥无味的东西上面,灵活的运用盒子的内外边距,浮动,定位以及一些基础的属性,将一

css基础的东西集中体现在了“磊盒子”这一个枯燥无味的东西上面,灵活的运用盒子的内外边距,浮动,定位以及一些基础的属性,将一个静态的页面变得磊出来,这是CSS基础的练习。

css基础练习里面有几点需要注意的小点:

1.margin的塌陷问题,这个问题分文两点,一种是上下同级的盒子的上外边距和下外边距的塌陷问题,这个情况劲量避免就好,不值一提;第二个问题就需要有良好的意识去注意子盒子的外边距是否会引起父盒子的外边距的塌陷,需要不需要运用边框1px 外加transparent使边框透明化的方法,使得这个问题得到解决。

2.padding的问题,padding作用于一个“盒子”的时候,需要注意会不会因为加了padding而使得盒子本身被撑大了,因为一个盒子我们一般说大小包括盒子本身的width和height还有边框border的大小以及padding的大小。如果在设置padding之后,盒子被撑大了,并且不是我们所想要的效果,那么我们就需要在盒子的width和height上面前去所设置的padding值,如果padding值设置的是两边都有,那么就需要减去两倍的padding值。所以说,在不是和熟练的情况下,除非真的很麻烦,最好还是连写,不然容易漏掉一些值以及语句,使得我们忘记去减掉。

3.浮动的问题,浮动分为左浮动和右浮动,并且浮动是脱离标准流的,会使原本的行内元素变成行内块元素,不再占据原来的位置,会对后面的“盒子”造成影响,所以我们需要去清楚浮动。清楚浮动一般有四种方法: overflow: hidden|auto|scro; 插一个单独的标签闭合浮动; 单伪类闭合浮动; 双伪类闭合浮动;

单伪类清楚浮动:

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix {*zoom: 1;} (这个事为了适应ie6、7这些奇葩)

双伪类:

.clearfix:before,.clearfix:after{ content:"."; display:table;}

.clearfix:after{ clear:both;}
.clearfix{*zoom:1;}

浮动配合
margin可以实现盒子的位置的调试,不过对于位置特别刁钻的,定位就好了
4.定位 定位时一种和随性的放盒子的方式,只需要知道移动多少距离,就可以完美的将一个盒子放在上面
定位一般用的有
相对定位:
relative; 绝对定位:absolute; 固定定位:fixed; 系统默认的就不说了
相对定位没有脱离标准流
绝对定位脱离了标准流

定位要配合边偏移来使用,包括四个属性:
top bottom left right;

一般来说,说道定位补得不说精灵图,或者说叫雪碧图,这个东西一般都用定位来,个别的用浮动。
想要学习前端开发的同学,可以加群:
543627393
学习哦!




推荐阅读
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • CSS3 animation动画属性详解及用法
    本文详细介绍了CSS3 animation动画的各种属性及用法,包括关键帧动画、动画名称、动画时间、动画曲线、动画延迟、动画播放次数、动画状态和动画前后的状态等。通过本文的学习,读者可以深入了解CSS3 animation动画的使用方法。 ... [详细]
  • 使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • 本文介绍了在HTML中实现表格的页眉页脚布局的解决方案。通过基本的HTML/CSS技术,避免使用内联样式和固定定位,实现了一个标准的页眉页脚布局。提供了一个替代的解决方案,为读者提供了参考。 ... [详细]
  • Java源代码安全审计(二):使用Fortify-sca工具进行maven项目安全审计
    本文介绍了使用Fortify-sca工具对maven项目进行安全审计的过程。作者通过对Fortify的研究和实践,记录了解决问题的学习过程。文章详细介绍了maven项目的处理流程,包括clean、build、Analyze和Report。在安装mvn后,作者遇到了一些错误,并通过Google和Stack Overflow等资源找到了解决方法。作者分享了将一段代码添加到pom.xml中的经验,并成功进行了mvn install。 ... [详细]
  • 本文介绍了CSS样式属性text-overflow、overflow、white-space、width的使用方法和效果。通过设置这些属性,可以实现文本溢出省略号、隐藏溢出内容、禁止换行以及限制元素宽度等效果。详细讲解了每个属性的作用和用法,以及常见的应用场景和注意事项。对于前端开发者来说,掌握这些CSS样式属性的使用方法,能够更好地实现页面布局和文本显示效果。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 标题: ... [详细]
  • 先看官方文档TheJavaTutorialshavebeenwrittenforJDK8.Examplesandpracticesdescribedinthispagedontta ... [详细]
  • 重入锁(ReentrantLock)学习及实现原理
    本文介绍了重入锁(ReentrantLock)的学习及实现原理。在学习synchronized的基础上,重入锁提供了更多的灵活性和功能。文章详细介绍了重入锁的特性、使用方法和实现原理,并提供了类图和测试代码供读者参考。重入锁支持重入和公平与非公平两种实现方式,通过对比和分析,读者可以更好地理解和应用重入锁。 ... [详细]
  • Postgresql备份和恢复的方法及命令行操作步骤
    本文介绍了使用Postgresql进行备份和恢复的方法及命令行操作步骤。通过使用pg_dump命令进行备份,pg_restore命令进行恢复,并设置-h localhost选项,可以完成数据的备份和恢复操作。此外,本文还提供了参考链接以获取更多详细信息。 ... [详细]
  • 本文整理了Java中java.lang.NoSuchMethodError.getMessage()方法的一些代码示例,展示了NoSuchMethodErr ... [详细]
  • 本文整理了Java中com.evernote.android.job.JobRequest.getTransientExtras()方法的一些代码示例,展示了 ... [详细]
  • 本文整理了Java中org.apache.solr.common.SolrDocument.setField()方法的一些代码示例,展示了SolrDocum ... [详细]
author-avatar
有情人都在外头_943
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有