摘要：宋体块级元素主要有宋体宋体内联元素不会以新行开始，和相邻的内联元素在同一行。也就是说，绝对定位或者浮动的内联元素，实际表现为块级元素，可以设置宽高和边距。
为什么有些内联（行内）元素如img、input可以设置宽高？
在说明之前我们先来了解一些定义。
①块级元素总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制。
块级元素主要有:
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
②内联元素不会以新行开始，和相邻的内联元素在同一行。
一般情况下，宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，只能改变左右边距。
内联元素主要有:
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
③可变元素，根据上下文关系确定该元素是块元素还是内联元素：
applet , button , del , iframe , ins , map , object , script
一般情况下，行内元素只能包含数据和其他行内元素，而块级元素可以包含行内元素和其他块级元素。
①置换元素
一个内容不受CSS视觉格式化模型控制，CSS渲染模型不考虑对其内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。
浏览器会根据元素的标签和属性，来决定置换元素的具体显示内容。
它们所具有的特征为：在不使用css修饰时，元素的标签和属性也会影响元素的显示。
例如，浏览器会根据
<title>paddingtitle>
<style>
.test {
width: 200px;
height: 50px;
padding: 10px;
border: 1px solid #000;
box-sizing: border-box;
}
style>
head>
<body>
<div class="test">块级元素div>
<input class="test" type="button" value="行内置换元素"/>
<br />
<label class="test">行内非置换元素label>
<br />
文本
body>
html>
结果：
一些边距规则： ①所有元素（除 ②所有元素（除 ③当我们为行内非置换元素设置纵向内边距（padding-top/padding-bottom）或纵向外边距（margin-top/margin-bottom）时，如果不将之转化为行内块（inline-block）或者块级（block）元素，那么它的纵向边距属性不会影响布局。上、下边距会在当前元素的行框基础上向顶部和底部外延，但是这些外延不会拓展新的布局大小。 ④如果元素的position不是static | relative或者float不是none或者该元素是根元素，当display: inline | inline-block | run-in | table-*系时，display的计算值为block。也就是说，绝对定位或者浮动的内联元素，实际表现为块级元素，可以设置宽高和边距。table-row-group | table-header-group | table-footer-group | table-column-group | table-row外）都可以设置横向内边距(padding-right/padding-left)；所有元素（除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 和 行内非置换元素 之外）都可以设置纵向内边距（padding-top/padding-bottom）。非table | inline-table | table-caption的表格类元素之外）都可以设置横向外边距（margin-right/margin-left）；所有元素（除 非table | inline-table | table-caption的表格类元素 和 行内非置换元素 之外）都可以设置纵向外边距（margin-top/margin-bottom）。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/2001.html
摘要：元素分类关于这点我还有些问题，暂且放上来，慢慢修改，非常欢迎纠正中的标签元素大体被分为三种不同类型块状元素，内联元素和内联块状元素常见的块状元素有常见的内联元素有有类特殊的元素如等，他们被称为可置换元素。 我们常用的display属性值有： inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间，但是 vis...
摘要：在中，和就是典型的行内元素元素。内联元素不单独占一行，给他设置宽高是没有用的。在中和就是块级元素。此元素会根据上下文作为块级元素或内联元素显示。此元素会作为块级表格来显示类似，表格前后带有换行符。 display属性 首先，所有主流浏览器都支持 display 属性。其次，我们都知道display 属性规定元素应该生成的框的类型。默认值：inline 我们常用的display属性值...
摘要：块元素内联元素内联块元素块元素内联元素内联块元素元素就是标签，布局中常用的有三种标签，块元素内联元素内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。css元素溢出 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。 overflow的设置项： 1、visible 默认值。内容不会被修剪，会呈现在元素框之外。2、hid...
摘要：基于特有的属性拥有内联元素的特性同时可以定义宽高，我们可以设置一个行内块用于定义高度，再让其他内联元素与其对齐，实现垂直居中。如果居中的元素超过了视窗会被裁剪掉。使用时，不仅在水平方向上将元素居中，垂直方向上也是如此。 事实上，每次面试前端必问的问题就是这个。及其常见的需求，看起来似乎非常简单，但是实现起来很费劲，尤其是涉及尺寸不固定的元素。 本篇文章将介绍比较流行的几种方法。 行内块...
阅读 994·2021-11-22 14:56
阅读 942·2021-11-11 16:54
阅读 7088·2021-09-23 11:55
阅读 2955·2021-09-22 15:57
阅读 2772·2021-08-27 16:25
阅读 653·2019-08-30 15:55
阅读 1640·2019-08-30 15:43
阅读 1577·2019-08-30 14:23
