学完html5和css3后的收获,萌新学习一星期HTML和CSS的收获

什么是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编写博客,希望和大家一起探讨和解决一些关于前端的常见问题和解决方案,希望大家多多支持,在大学生活里不断学习,不断进步!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值