美文网首页
萌新学习一星期HTML和CSS的收获

萌新学习一星期HTML和CSS的收获

作者: 小铮冲冲冲 | 来源:发表于2020-11-11 17:40 被阅读0次

    什么是HTML

    HTML 是用来描述网页的一种语言。
    HTML 指的是超文本标记语言: HyperText Markup Language
    HTML 不是一种编程语言,而是一种标记语言
    标记语言是一套标记标签 (markup tag)
    HTML 使用标记标签来描述网页
    HTML 文档包含了HTML 标签及文本内容
    HTML文档也叫做 web 页面

    以上基础内容简单易懂,有手就行,其他相关内容可以自行去 菜鸟教程学习
    本人热爱html和css技术,经过一周不断的学习学会了各种技术和解决问题的思路和方法,学习了盒模型和浮动,可以自己构建网页的布局,接着遇到了高度塌陷的问题,并通过学习寻找到了解决方式。这里简单介绍一下解决的方案。

    高度塌陷的解决方案

    1.将元素的overflow设置为一个非visible的值(推荐hidden和auto),此方法可以开启元素的BFC属性,解决高度塌陷的问题。(其中IE6浏览器不兼容此种方法,因此我们可以将元素的zoom设置为1,开启IE6中元素属性HasLayout从而解决问题)
    2.再学习了浮动的知识后,可以发现更多解决高度塌陷的方法

    • 我们可以用clear清除浮动对当前元素的影响,所以在一个元素浮动脱离文档流时我们可以在高度塌陷的最后添加一个空白的div由于这个div没有浮动所以可以完全撑开父元素的高度,对其清除浮动可解决高度塌陷的问题(该方法基本无副作用,但却在页面中添加了一个无意义的空白div,我们知道html负责页面结构而css负责页面样式,这是不合理的,所以我们希望通过css用该思路来解决该高度塌陷的问题问题)
    • 我们考虑到css中有一个样式为after,用这个样式可以在元素后加入内容且无法选中,因此我们可以用这个样式完成高度塌陷问题的最优解如下:
    .box:after{content="";
               display:block;
               clear:both}          
    

    所以通过after伪类向元素最后添加一个空白块元素进行清除浮动可最终解决高度塌陷的问题(IE6不支持这种方法,所以老老实实使用zoom:1;即可)

    这是本人第一次用markdown编写博客,希望和大家一起探讨和解决一些关于前端的常见问题和解决方案,希望大家多多支持,在大学生活里不断学习,不断进步!!

    相关文章

      网友评论

          本文标题:萌新学习一星期HTML和CSS的收获

          本文链接:https://www.haomeiwen.com/subject/tutybktx.html