网站评论设计,外贸 推广网站,常州市工程建设交易网,在家没事做建什么网站好文章目录 概述置换元素/非置换元素置换元素非置换元素 行内元素/块级元素/行内块级元素行内元素块级元素行内块级元素 概述
CSS从两个维度上将HTML元素进行了分类#xff1a;
从元素内容的表现形式上#xff0c;将元素分为#xff1a;置换元素、非置换元素。从元素自身的显… 文章目录 概述置换元素/非置换元素置换元素非置换元素 行内元素/块级元素/行内块级元素行内元素块级元素行内块级元素 概述
CSS从两个维度上将HTML元素进行了分类
从元素内容的表现形式上将元素分为置换元素、非置换元素。从元素自身的显示方式上将元素分为行内元素、块级元素、行内块级元素。
要清楚理解元素内容和元素自身的区别
讨论元素内容的时候元素就是个容器里面装的东西就是要关注的内容讨论元素自身的时候内容不重要它的位置、宽高、内外边距才是重点
置换元素/非置换元素
重点关注元素内容的渲染效果内容来源、如何创建。
浏览器渲染HTML文档创建元素内容的时候分两种情况
可以直接从元素标签中获得元素内容。比如p内容区/p直接渲染内容区就能创建好p元素的内容这种元素就是非置换元素需要引入额外对象才能创建好元素内容。比如img srcphoto.png /需要额外加载图片才能创建好img元素的内容再比如button按钮/button浏览器要引入一个按钮组件才能创建好button元素的内容这种元素就是置换元素。
在HTML文档中大部分是都非置换元素只有少数几个置换元素img、select、textarea、input、button、iframe、video、audio、embed、object
置换元素
特点
从HTML源码文档中看元素标签只能看到元素自身看不到具体的元素内容修改元素某些属性值就可以改变元素内容比如input的type属性img的src属性元素自身一般拥有固定尺寸宽、高、宽高比部分元素有height和width属性CSS渲染模型美化不了元素内容只能对元素自身进行美化
非置换元素
特点
从HTML源码文档中看元素标签可以同时看到元素自身和具体的元素内容严格遵循CSS渲染模型机制元素自身和元素内容都可以被CSS美化
行内元素/块级元素/行内块级元素
重点关注元素自身的渲染效果位置、宽高、内外边距。
这种分类方式跟CSS属性display有直接关系该属性可选值有很多这里只涉及其中三个
行内元素用display: inline渲染的元素块级元素用display: block渲染的元素行内块级元素用display: inline-block渲染的元素
浏览器会为每个HTML元素赋予一个默认的display属性值主动改变这个值就可以改变默认的元素分类比如
用display: block修饰a元素就把行内元素变成了块级元素用display: inline修饰div元素就把块级元素变成了行内元素
行内元素
特点
在父元素文档流中不会独占一行左右两边可以出现其它行内元素不能控制高度height和宽度width默认高度和宽度分别为元素内容的高度和宽度仅能在左右两个方向上控制外边距margin和内边距padding上下两个方向不能控制行内元素中不能放置块级元素否则会被CSS渲染出来一些很奇怪的样式效果
在特点1中相邻行内元素之间会存在空白间隙的问题可参考其它文章解决。 在特点2中如果行内元素同时也是置换元素就可以控制元素的宽高这是特例。
常见行内元素img、a、label、span、strong、small、em、i、b、abbr、br、dfn、code、kbd、q、samp、sub、sup、var、city、iframe
块级元素
特点
在父元素文档流中独自占据一整行左右两边不会出现其他元素可以控制高度height和宽度width默认高度为元素内容高度默认宽度为父元素100%宽度可以在上下左右四个方向上控制外边距margin和内边距padding
常见块级元素h1、h2、h3、h4、h5、h6、ol、ul、li、dl、dt、dd、div、form、fieldset、legend、article、header、main、footer、figure、blockquote、figcaption、hr、p、pre
行内块级元素
既有行内元素特点又有块级元素特点
在父元素文档流中不会独占一行左右两边可以有其它元素行内元素特点可以控制高度height和宽度width块级元素特点默认高度和宽度分别为元素内容的高度和宽度行内元素特点可以在上下左右四个方向上控制外边距margin和内边距padding块级元素特点
常见行内块级元素button、input、textarea、select
