CSS 03

作者: 秒速18厘米 | 来源:发表于2017-11-21 22:47 被阅读0次

div, span, label的区别

div与span

大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div的定义:div作为分割文档结构自然使它最官方的语义,但是这样的官方语义太让人迷惑,大的结构还好,但是小的地方到底是用div还是用span仍然让人迷惑。其实恰恰是《Microsoft MSDN Library》里面的定义让人豁然开朗。

div:指定渲染HTML的容器
span:指定内嵌文本容器
通俗地讲,就是如果里面还有其他标签的时候就用div,如果里面只有文本就应该用span。

div是一个块级元素,用来为HTML文档内大块的内容提供结构和背景。
span是行内元素,在行内定义一个区域(也就是一行内可以被<span>划分好几个区域)。
div标签中可以镶嵌span标签,(div可以看做是一个大容器,span是一个小容器,大容器当然可以放下一个小容器啦)

span与label

由于有了以上关于span的说法,那么我们就可以对文本进行span的容器操作了,可以定义css样式什么的,但是label好像也可以?但是两者区别有时什么呢?

label标签:主要用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
span则是对普通的文本的一种容器。

相关文章

  • css常见技巧

    [阮一峰老师的css技巧] (http://www.ruanyifeng.com/blog/2010/03/css...

  • CSS样式优先级

    title: CSS样式优先级icon: fa-css3date: 2017-11-03 15:08:25cate...

  • PyQuery

    http://www.ruanyifeng.com/blog/2009/03/css_selectors.html...

  • day04

    A我今天学习到了什么 1温习day03的知识点 1.1css背景 1.2.css文本 1.3.css字体 1.4....

  • 05 常见bug处理 (必会知识点)

    html:全栈记03【html小结】 - 简书 css:全栈记04【css小结】 - 简书 常见bug处理: 小知...

  • 4.0 前端 - 子目录

    0.0 总目录 4.1HTML-day01 4.2HTML-day02 4.3CSS-day03 4.4CSS-d...

  • 探索CSS3动画、过渡

    title: 详解CSS3动画、过渡属性的作用date: 2017年9月21日 00:03:26tags: css...

  • css动画过渡

    title: css动画和transition过渡toc: truedate: 2017-03-20 vue组件 ...

  • js压缩和打包

    https://simmin.github.io/2017/03/31/js-css-compress/ http...

  • pc端自适应

    原链接 https://waliblog.com/css/2018/03/19/compatible.html 配...

网友评论

      本文标题:CSS 03

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