inline元素、block元素

inline元素

  • 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行
  • 高、行高、以及外边距和内边距不可改变
  • 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化
  • 内联元素只能容纳文本和其他内联元素
  • 只有水平方向margin-left、margin-right、padding-left、padding-right会产生边距效果

block元素

  • 会独占一行,默认情况下,其宽度自动填满父级元素宽度
  • 高度、行高、以及外边距和内边距都可控制
  • 宽度缺省时默认容器的百分之百
  • 可以容纳内联元素和其他块级元素

display属性

  inline:

  1. 使元素变成行内元素,拥有行内元素的特性,既可以与其他行内元素一起共享一行,不会独占一行。
  2. 不能改变元素的height、width值,大小由内容撑开
  3. 可以使用padding、margin的left和right产生边距效果,但是top和bottom不行
  4. 行内元素之间先默认水平排列,若剩余空间不足以容纳下一个内联元素,则换行 <input/><input/><input/><input/><input/>

  block:

  1. 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素默认填满父级元素的宽度
  2. 能够更改元素的height,width的值
  3. 可以设置padding、margin的各个属性值,top、left、bottom、right都能产生边距效果。

  inline-block:

  1. 行内块级元素,可用于块级元素,也可用于行内元素
  2. 可用于换行,但有一个缺点,同一行内元素内的内容不能换行,只能行内元素之间
  3. 结合了inline与block的一些特点,结合了inline的第一个特点和block的第2,3,4个特点。用通俗的话讲,就是不独占一行的块级元素

 

时间: 2024-09-29 00:32:42

inline元素、block元素的相关文章

block元素和inline元素的特点

一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置heigth/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间(独占一个水平空间) 4.忽略vertical-align 二.inline元素特点 1.水平方向上根据direction依次布局 2.不会在元素前后进行换行 3.受white-space控制 4.margin/padding在垂直方向上无效,在水平方向上有效 5.width/height对非替换行

块元素block,内联元素inline; inline-block;

block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i strong 等: 1.宽高由内容撑开: 2.不支持宽高: 3.一行上显示同类的内联元素: 4.不支持上下的margin; 5.元素换行可以被解析: inline-block: 元素特征 1.块元素在一行内显示; 2.行内元素支持宽高; 3.没有宽度的时候内容撑开宽度;

CSS 中 block 元素(块级元素)与 inline 元素(内联元素)详解

块元素 (block element) 一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素 , 常见块元素是段落标签“P”.“form”这个块元素比较非凡,它只能用来容纳其他块元素. 假如没有 CSS 的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了 CSS 以后,我们可以改变这种 HTML 的默认布局模式,把块元素摆放到你想要的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table 标签也是块元素的一种,Table Based Layout 和 

【css】HTML标签主要类型:块状元素(block)、行间元素(inline)

问题背景 当某些HTML标签使用盒模型属性时,部分属性失效? 块状元素     独占一行(是否添加width),该元素前后其他内容都要换行     直接适用盒模型的所有css属性      行间元素     不独占一行,多个行间元素可以在一行中呈现     部分适用css盒模型属性:     ·宽度.高度设置无效     ·边距设置:左右有效,上下无效 常见块状元素 标签                           说明 <div>                           

当inline元素包裹block元素时会发生什么

经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a> 点击图片自动跳转,不用增加新的点击事件,光标滑过时变成小手等等,这都是a标签的功劳. 但是inline元素包裹block元素后,inline元素本身是否会变成blcok元素,还有待求证,于是做了如下对比: <div>这里是块元素</div> <span>用于测试(没有

inline元素、block元素、inline-block元素

inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示,多个block元素会各自新起一行. inline-block 内联块级元素: 具有宽度高度特性,又具有同行特性(一行内显示) 常見的inline元素:span,a,strong,em等. 常見的block元素:div,p,h1到h6,form,ul,ol等. 常見的inline-block元素:im

块元素(block element)和内联元素

内联元素和块状元素能够用 display :block/inline   相互转换 块状元素变成内联元素的话,他的高就会失效而变为行高: 使用display:inline-block,让行内元素同时具有行内元素特性也能设置宽高 如果display:none的话,该元素就会不见 块状元素   address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout的主要标签 dl - 定义列表 fieldse

display:inline、block、inline-block的区别 摘】

display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片

display:inline、block、inline-block的区别

block元素的特点是: 元素另起一行: 行宽高边距可控制: <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. inline元素的特点是: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片的宽度,不可改变. <span>, <a>, <label>, <input>, <img>, <strong&