关闭

WEB前端 -- 块元素与内联元素

标签: WEB前端块级元素行内元素
69人阅读 评论(0) 收藏 举报
分类:

1.块级元素

1)块元素一般独自占据一行,可以设定元素的宽和高。

2)块级元素一般是其他元素的容器,可以容纳块级元素和行内元素.

3)可设置4个方向的padding和margin值。

4)常见的块级元素有div,p,h1~h6等。

2.行内元素

1)不可以设置宽和高,但可以与其他行内元素位于同一行,行内元素尽量不要包含块级元素

2)行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。

3)只能设置左右方向的padding和margin值,上下无法设置,因它是行内的行为。

4)常见的行内元素有a,em,strong等。

3.属性display

块级元素:display:block

行内元素:display:inline

块级元素与行内元素之间的转换:display

例:

a转化为块元素:<a href = "#"></a>

p转化为行元素:<p style= "display:inline"></p>

4.1)常见的内联元素

a--锚点

b--粗体

big--大字体

em--强调

font--字体设置

i--斜体

img--图片(虽是内联,但是可以设置宽、高)

input--输入框

label--提示标签

select--列表选择

small--小字体文本

span--常用内联容器,定义文本内的区块

strong--粗体强调

sub--下标

sup--上标

textarea--多行文本输入框

u--下划线

2)常见的块级元素

address--地址

div--常用块级容器

dl--定义列表

fieldset--控制组

form--交互表单

h1~h6--标题

hr--水平分割线

ol--有序列表

p--段落

pre--格式化文本

table--表格

ul--无序列表

0
0
查看评论

块状元素与内联元素的嵌套规则

小细节的问题终究会变成大麻烦,故好好分析了其中的原委。不错,下面大神前辈们的总结吸取过来,方便以后自己查询。 块状元素与内联元素的基本概念:   块状元素:一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素独占一行,不允许别的元素在同一行,,宽度(width)高度(height...
  • qq_29319817
  • qq_29319817
  • 2017-03-14 19:29
  • 300

CSS的盒模型及元素分类(块级元素、内联元素、内联块状元素)

CSS的盒模型及元素分类(块级元素、内联元素、内联块状元素)
  • beibei0921
  • beibei0921
  • 2015-09-12 17:08
  • 1171

内联元素和块元素的区别及转换

1.内联元素和块元素       内联元素:p、 div、 h1~h6        块元素:span、a   区别:内联元素占空间全部宽度,自动换行;  &#...
  • zxy9602
  • zxy9602
  • 2016-08-24 16:46
  • 868

float对内联元素和块元素的影响

原文链接:https://my.oschina.net/jing31/blog/6601       float属性还没有彻底了解,因为遇到了float之后会导致width自适应最小化的问题,所以找到这篇文章。 一直以为float属性不会对div...
  • tt_twilight
  • tt_twilight
  • 2017-05-29 21:42
  • 555

CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)

http://www.w3school.com.cn/htmldom/prop_style_verticalalign.asp(W3C标准,概念不清的看手册很重要哦)       首先,依旧是概念。介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,...
  • Jt1123
  • Jt1123
  • 2013-12-27 09:26
  • 2098

内联元素和块元素

<br />《CSS权威指南》中文中:任何不是块级元素的可见元素都是内联元素。其表现的特性是“ 行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。<br />    block元素的特点:<br /> &...
  • riitxihc
  • riitxihc
  • 2010-10-18 17:28
  • 6746

【WEB前端】3.CSS内联元素和块元素

HTML中内联元素和块元素分别有 块元素(block element)       * address - 地址      * blockquote - 块引用  &#...
  • a316212802
  • a316212802
  • 2016-01-09 23:21
  • 257

css中块元素和内联元素有什么区别?

块级元素和内联元素,我想接触过CSS的朋友都有所了解,但是在实际写CSS代码时却考虑的并不多,我们无意中就已经按照块级元素和内联元素的规则进行布局样式了。我有时在想,为什么要区别块级元素和内联元素呢?这就是所谓的思想指导行动吧。 Block element 块级元素   &#...
  • u014055030
  • u014055030
  • 2014-03-12 14:17
  • 750

块级元素与内联元素(行内元素)及浮动知识总结

块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的div、p、ul默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,...
  • ParanoidYang
  • ParanoidYang
  • 2017-01-19 10:58
  • 1823

内联元素和块级元素的区别

1、先来介绍一下内联元素和块级元素都有哪些: 块元素(block element) * address - 地址   * blockquote - 块引用  * center - 举中对齐块   * dir - ...
  • liushuwei0224
  • liushuwei0224
  • 2013-01-23 11:32
  • 2704
    个人资料
    • 访问:2476次
    • 积分:497
    • 等级:
    • 排名:千里之外
    • 原创:39篇
    • 转载:20篇
    • 译文:0篇
    • 评论:0条
    文章分类