2019-03-21

块元素和内联元素

块元素

所谓的块元素就是会独占一行的元素

无论它的内容有多少,它都会独占一整行

常见的块元素:div p h1 h2 h3……

div这个标签没有任何语义,就是一个纯粹的块元素

并且不会为它里边的元素设置任何的默认样式

div元素主要用来对页面进行布局的

内联元素(行内元素)

所谓的行内元素指的是只占自身大小的元素,不会占用一行

常见的内联元素:span a img iframe

span没有任何语义,span标签专门用来选中文字,然后为文字来设置样式

块元素主要用来做页面中的布局,内联元素主要用来选中文本设置样式

一般情况下只使用块元素去包含内联元素,而不会使用内联元素去包含一个块元素

a元素可以包含任意元素,除了他本身

p元素不可以包含任何其它的块元素

我们可以为元素设置class属性

它和id属性类似,只不过class属性可以重复

拥有相同class属性值的元素,我们说他们是一组元素

可以同时为一个元素设置多个class属性值,多个值之间使用空格隔开

元素之间的关系

父元素:直接包含子元素的元素

子元素:直接被父元素包含的元素

祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素

后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素

兄弟元素:拥有相同父元素的元素叫做兄弟元素

title属性,这个属性可以给任何标签指定

当鼠标移入到元素上时,元素中的title属性的值将会作为提示文字显示

像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代元素所继承

利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会自动继承这些样式

但是,并不是所有的样式都会被子元素所继承,比如:背景、边框、定位相关的样式都不会被继承

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,238评论 1 92
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 5,009评论 0 0
  • CSS 指层叠样式表(Cascading Style Sheets),是一种用来为结构化文档(如 HTML 文档或...
    神齐阅读 2,243评论 0 14
  • 第一章 F12: element.style 内联样式(可以直接在上面写代码进行简单调试) user agent...
    fastwe阅读 1,664评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,991评论 1 45

友情链接更多精彩内容