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



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

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

内联元素(行内元素) 内联元素(inline element) * a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi over...
  • pql925
  • pql925
  • 2016年07月26日 15:30
  • 1744

CSS学习笔记——盒模型,块级元素和行内元素的区别和区别

今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面。自从因为工作需要转前端之后,自己的主要注意力几乎都放在JavaScript上面了,对CSS和HTML这方面其...

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

目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用widt...
  • judyge
  • judyge
  • 2016年07月18日 16:07
  • 242

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

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

html块级元素与行内元素-哪些是块级哪些是内联对象

块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。     如果没有css的作用,块元素会顺序以每次另起一行...

《CSS权威指南》学习记录——行内元素

术语解释匿名文本匿名文本是指所有未包含在行内元素中的字符串。空格也是匿名文本的一部分。em框em框在字体中定义,font-size的值决定了em框的高度。内容区对于非替换元素,内容区是指元素中各em框...

计算盒子模型的尺寸、display属性、块级和内联元素、浮动、overfloat

计算盒子模型的尺寸  盒子实际高度=上下外边距+上下边框+上下内边距+内容高度  盒子实际宽度=左右外边距+左右边框+左右内边距+内容宽度 box-sizing属性  content-box   ...

CSS里有哪些常见的块级元素和行内元素

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级...
  • Im_KK
  • Im_KK
  • 2014年09月27日 15:25
  • 4140

CSS系列1-块级元素VS行内元素

快级元素VS行内元素
  • a_302
  • a_302
  • 2015年01月24日 21:06
  • 370

CSS块级元素和行内元素

本文导读:HTML中的元素可分为两种类型:块级元素和行级元素。这些元素的类型是通过文档类型定义(DTD)来指明。块级元素:显示在一块内,会自动换行,元素会从上到下垂直排列,各自占一行,如p,ul,fo...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS——块级、行内元素&盒模型
举报原因:
原因补充:

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