CSS——块级、行内元素&盒模型

原创 2017年03月03日 21:38:30

      盒模型是CSS基本模型之一,页面上每个元素都包含在盒模型内,由元素内容、内边距(padding)、边框(border)和外边框(margin)组成

      块级元素常见标签:div p form ul ol lih1~h6

      行内元素常见标签:span em strong

      块级元素可以包含块级和行内元素,反之则不可。

      在排版时,可以用display改变元素是块级还是行内,但是display并不能从根本意义上改变元素性质。display有一个特殊属性是inline-block行内块,行内块元素作为一个替换元素放在行中,底端默认在基线上,内部没有行分隔符,但是行内块元素的高度可以改变行高

一、主要差别

 a.高度&宽度

       块级元素高度由设置的高度(height)和宽度(weight)以及内外边距和边框宽度决定。

       行内元素的高度则有具体字体的font-size与line-height决定。

       行内元素也有盒子模型,但是内边距和边框不会影响元素行内框的高度(可以用背景色看到效果但是对实际行内框无影响),

外边距不会影响非替换元素的顶端和底端,但是左右内外边距会影响文本布局:


       一般行内非替换元素的line-height比font-size要大,也有特殊情况如下。

eg.tall的对齐方式为vertical-align:top(vertical-align的对齐方式是行框与行内框的边界)

line-height比font-size大


line-height比font-size小


      由上例,line-height是继承属性,为了避免父元素的line-height比子元素的font-size小,line-height建议设置为缩放因子,

此外,行内替换元素的可以增加行框高度,但是并不影响行高。替换元素的行高主要应用于垂直对齐。

       说到垂直对齐,这里补充一下基线的概念,基线是英文字母中小写x的下端沿(不同字体样式不相同)

还有很多关于行内元素的基本知识推荐浏览:http://blog.csdn.net/q121516340/article/details/51483439



版权声明:本文为博主原创文章,未经博主允许不得转载。

[2017-03-04]行内元素和块级元素使用浮动后的变化

今天做前端笔试题get到一个知识点,如下所示代码 hello ...
  • Cathy731946
  • Cathy731946
  • 2017年03月04日 14:20
  • 585

css行内元素有哪些?块级元素有哪些? 盒模型的哪些?

1.内联元素(inline element) * a – 锚点 * abbr – 缩写 * acronym – 首字 * b – 粗体(不推荐) * big – 大字体 * br – 换行...
  • BodCloud
  • BodCloud
  • 2016年02月29日 23:40
  • 220

css盒模型和块级、行内元素深入理解

一、CSS盒模型  盒模型概述  盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框,这个框由元素的内容、内边距、边框和外边距组成。如下图所...
  • besfanfei
  • besfanfei
  • 2013年10月11日 12:00
  • 634

详解css中的display属性(行内元素和块级元素)

display属性 首先,所有主流浏览器都支持 display 属性。其次,我们都知道display 属性规定元素应该生成的框的类型。默认值:inline 我们常用的display属性值有: ...
  • wuzhongchao
  • wuzhongchao
  • 2015年01月06日 13:19
  • 4516

深入理解CSS弹性盒模型flex

前面的话   CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写,一般称之为弹性盒模型。和CSS3其他属性不一样,flexbox并不是一个属性,而是一个模块...
  • alex8046
  • alex8046
  • 2016年07月07日 10:39
  • 1153

栋栋晓05:详解css布局中的display属性(行内元素和块级元素)

display属性是我们写css代码,做css布局经常会用到的属性,把display用熟练了,写起css布局得心应手。首先,所有主流浏览器都支持 display 属性。其次,我们都知道display ...
  • qq_24958837
  • qq_24958837
  • 2015年03月22日 16:16
  • 590

HTML/CSS]盒子模型,块级元素和行内元素

HTML/CSS]盒子模型,块级元素和行内元素 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效。虽然自己不是做前端的,但是,在项目...
  • NotBad_
  • NotBad_
  • 2016年07月21日 11:26
  • 1476

块级元素和行内元素、边距问题

CSS 规定的定位机制有三种,分别是标准文档流、浮动及绝对定位。 标准文档流:从高往低,从左到右,从上到下,输出文档内容。由块级标签和行级标签。 块级元素:从左到右撑占一行,触碰边缘会自动换行。 ...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016年09月20日 13:29
  • 741

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

块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的div、p、ul默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示...
  • ParanoidYang
  • ParanoidYang
  • 2017年01月19日 10:58
  • 1796

HTML/CSS行内元素、块元素、空(void)元素、盒模型

1.内联元素(inline element) * a – 锚点 * abbr – 缩写 * acronym – 首字 * b – 粗体(不推荐) * big – 大字体 * br – 换行...
  • NJUPT_T
  • NJUPT_T
  • 2016年02月19日 14:56
  • 1529
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS——块级、行内元素&盒模型
举报原因:
原因补充:

(最多只允许输入30个字)