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

      盒模型是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



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值