搬砖~
块元素
- 块级元素前后会单独换行
- 块级元素可设置width,height,margin,padding属性有效
- 可以容纳行内元素和其他块元素,<form>只能容纳其他块元素
块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。块级元素即使设置了宽度,仍然是独占一行。
原文链接:http://caibaojian.com/inline-vs-block.html
<address>
联系方式信息。<article>
HTML5文章内容。<aside>
HTML5伴随内容。<audio>
HTML5音频播放。<blockquote>
块引用。<Canvas>
HTML5绘制图形。<dd>
定义列表中定义条目描述。<div>
文档分区。<dl>
定义列表。<fieldset>
表单元素分组。<figcaption>
HTML5图文信息组标题<figure>
HTML5图文信息组 (参照<figcaption>
)。<footer>
HTML5区段尾或页尾。<form>
表单。<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
标题级别 1-6.<header>
HTML5区段头或页头。<hgroup>
HTML5标题组。<hr>
水平分割线。<noscript>
不支持脚本或禁用脚本时显示的内容。<ol>
有序列表。<output>
HTML5表单输出。<p>
行。<pre>
预格式化文本。<section>
HTML5一个页面区段。<table>
表格。<tfoot>
表脚注。<ul>
无序列表。<video>
HTML5视频。
行内元素
行内元素也叫内联元素或者内嵌元素。
- 会在水平方向排列,不能包含块级元素,只能容纳文本或者其他内联元素。
- 设置width、height无效(可以设置line-height),margin、padding上下无效,但是左右有效
- 宽度高度随文本内容的变化而变化
部分常用的行内元素:
<a>定义超链接
<b>字体加粗
<span>定义在文档中的行内元素
<img>向网页中插入题图像
<input>输入框
<small>小号字体效果
扫描二维码关注公众号,回复: 2406400 查看本文章<br>换行
<big>字体加大加粗
<strong>强调的语气
<select>创建单选或多选菜单
<textarea>定义文本域,多行的文本输入控件
行内块元素--inline-block
行内块状元素综合了行内元素和块状元素的特性,但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。
- 不自动换行
- 能够识别宽高
- margin和padding的上下左右均对其有效
- 默认排列方式为从左到右
常见的行内块元素:img input td ;
然而,块级元素和行内元素和行内块级元素可以相互转换的。即通过display属性设置。
{
display:block; //可将行内元素变为块级元素
/*display:inline; //可将块级元素变为行内元素*/
/*display:inline-block;转换为行内块状元素*/
}
display
首先,所有主流浏览器都支持 display
属性。其次,我们都知道display
属性规定元素应该生成的框的类型。默认值:inline
display常用属性值:
inline
默认。此元素会被显示为内联元素,元素前后没有换行符。
block
此元素将显示为块级元素,此元素前后会带有换行符。
inline-block
行内块元素。(CSS2.1 新增的值)既具有block的宽度高度特性又具有inline的同行特性
none
此元素不会被显示。ps:
display
设置成none
不会保留元素本该显示的空间,但是visibility: hidden
还会保留。默认情况下,block元素宽度自动填满其父元素宽度;
替换元素
内容不受CSS视觉格式化模型控制,渲染模型不考虑对此内容渲染,拥有固定的尺寸(宽、高)的元素。
或者说浏览器依据元素的标签和属性来决定元素的具体显示内容。
比如:<input /> type="text" 的是,这是一个文本输入框,换一个其他的时候,浏览器显示就不一样
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素都没有实际的内容。
行内替换元素:如img ,height/width/padding/margin均可用。效果等于块元素。这也解释了为什么有些行内级元素可以设置矿都、高度、和边距。
非替换元素
与替换元素相反,元素的内容直接显示出来,内容包括在文档中的元素,内容都放在本身之中。如<lable>、<p>等;
行内非替换元素:例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和padding left、right改变宽度。
行内级置换和非置换元素的宽度定义
参考:http://caibaojian.com/inline-vs-block.html
对于行内级非置换元素,宽度设置是不适用的。·
对于行内级置换元素来说,其宽度的设置需遵循以下几点:
- 若宽高的计算值都为
auto
且元素有固有宽度,则width
的使用值为该固有宽度;典型的例子是:拥有默认宽高的
input
当宽度的计算值为auto时,则宽度使用值为其默认的固有宽度 - 若宽度的计算值为
auto
且元素有固有宽度,则width
的使用值为该固有宽度;例子同上
- 若宽度的计算值为
auto
且高度有非auto
的计算值,并且元素有固有宽高比,则width
的使用值为高度使用值 * 固有宽高比
;典型的例子:
img
当只定义了其高度值时,其宽度将会根据固有宽高比进行等比设置 - 除此之外,当
width
的计算值为auto
时,则宽度的使用值为300px
典型的例子:比如iframe, canvas
其它类型的置换元素,其宽度的定义都参照行内置换元素的定义。
行内级置换和非置换元素的高度定义
对于行内级非置换元素,高度设置是不适用的。
对于行内级置换元素来说,其高度的设置需遵循以下几点:
- 若宽高的计算值都为
auto
且元素有固有高度,则height
的使用值为该固有高度; - 若高度的计算值为
auto
且元素有固有高度,则height
的使用值为该固有高度; - 若高度的计算值为
auto
且宽度有非auto
的计算值,并且元素有固有宽高比,则height
的使用值为:宽度使用值 / 固有宽高比
; - 若高度的计算值为
auto
且上述条件完全不符,则height
的使用值不能大于150px
,且宽度不能大于长方形高度的2倍。