CSS元素分类

Travis 发布于2019-08-29 15:19 / 347人阅读

摘要：元素分类元素大的分为两类块级元素和行内级元素但行内元素可以进一步分为行内替换置换元素行内非替换非置换元素。一块级元素与块元素块级元素元素会新起一行，并独占一行，如等。同时块级元素可以定义元素的宽度和高度。块元素块元素是属性值为的元素。

CSS元素分类

CSS元素大的分为两类：块级元素和行内级元素
但行内元素可以进一步分为：行内替换(置换)元素、行内非替换(非置换)元素。

一、块级元素与块元素

块级元素：元素会新起一行，并独占一行，如div、p、form等。display 属性值为：block, list-item, table, flex, grid 时，都可以将一个元素设置成块级元素。同时块级元素可以定义元素的宽度和高度。

块元素：块元素是display属性值为block的元素。因而二者是包含关系。

二、行内级元素与行内元素

行内级元素：行内级不会以新行开始，在一行文档流中排列，如果超过容器宽度，则折行显示。display 属性值为：inline, inline-table, inline-block, inline-flex, inline-grid 值都可以将一个元素设置成行内级元素。

行内元素：行内元素是display属性值为inline的元素。
行内块元素：display属性值为inline-table, inline-block, inline-flex, inline-grid的元素

行内级元素分类：

1、行内级置换元素
一个元素不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此元素内容的渲染，且元素本身一般拥有固有尺寸(宽度，高度，宽高比)的元素，被称之为置换元素，如img、表单元素（包括input、select、textarea、select等）

行内级置换元素宽度的定义：

若宽高的计算值为auto且元素有固有宽度，则width为固有宽度；

若宽度的计算值为auto且元素有固有宽度，则width为固有宽度；

若宽度的计算值为auto且高度有具体的计算值，同时知道高宽比，则可以计算出width=高度/高宽比；

除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px。

行内级置换元素高度的定义：

若宽高的计算值为auto且元素有固有高度，则height为固有高度；

若高度的计算值为auto且元素有固有高度，则height为固有高度；

若高度的计算值为auto且宽度有具体的计算值，同时知道高宽比，则可以计算出height=宽度*高宽比；

除此之外，当 height的计算值为 auto 时，使用值不能大于150px，且宽度不能大于长方形高度的2倍。

2、行内级非置换元素
无法给元素定义宽度和高度的行内级元素，除了行内级置换元素外剩余的元素都是行内级非置换元素。

参考：http://blog.doyoe.com/2015/03...

GPU云服务器云服务器 css元素索引分类网络分类网站分类

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113241.html

css中元素的分类

摘要：按照显示元素分类行内元素元素的高度，行高，顶底边距由元素所包含的图片或文字所决定，不可改变其宽度为内容文字或图片的宽度所决定，而其左右边距可人为设置。按照显示元素分类：行内元素（lnline-element）：元素的高度，行高，顶底边距由元素所包含的图片或文字所决定，不可改变；其宽度为内容文字或图片的宽度所决定，而其左右边距可人为设置。行内元素的水平方向的padding-left,pa...

harryhappy 2019-04-23 13:25 评论0 收藏0
深入css布局 (1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。从元素的布局特性来分，主要可以分为三类元素块级元素，行内元素，行内块级元素。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们...

ky0ncheng 2019-04-23 13:43 评论0 收藏0
深入css布局(1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。规定元素和属性是包含元素的边框内边距内容的。后来微软也慢慢转向了的标准，在以后支持了标准盒模型。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重...

blankyao 2019-08-29 15:25 评论0 收藏0
CSS || 功能分类

摘要：组件的外观可以通用，但是位置却不能。总结出现上述问题的愿意一个承担的样式太多。在使用等简写属性时，注意其中关于位置和布局的样式等布局和位置由单独的布局类或单独容器元素构成。降低现有类名冲突使用规则进行命名。 CSS模块化规则 CSS模块的设计原则：可重用可维护可扩展 1 常见的问题 1.1 基于父组件直接修改样式 .widget { background: yello...

xuhong 2019-08-29 12:13 评论0 收藏0
CSS选择器的分类

摘要：每个声明是一个属性和该属性的值的组合元素选择器最常见的选择器往往是元素。这个选择器可以与任何元素匹配，就像是一个通配符类选择器要应用样式而不考虑具体涉及的元素，最常用的方法就是使用类选择器。《PHP 面试问答》结合实际 PHP 面试，系统的汇总面试中的各种各样的问题，尝试提供简洁准确的答案。如果你在 PHP 面试中遇到问题，欢迎提 Issues 交流。包含网络协议、数据结构与算法、...

jiekechoo 2019-08-30 15:43 评论0 收藏0