首页
学习
活动
专区
工具
TVP
发布

前端自学之路之CSS行内元素、行内块元素和块元素

HTML元素都被CSS赋予了一定的结构属性,我们称之为 display,常见的有三种类型:

display: inline; // 行内元素

display: inline-block; // 行内块元素

display: block; // 块元素

display: none; // 隐藏不可见

我们来解释下这三种有什么区别?分别代表什么意义?

// 行内元素

1、默认元素宽度和元素内容宽度保持一致

2、默认可以和其他行内元素同处一行

3、不能设置宽度(width)、高度(height)、上下外边距(margin-top;margin-bottom)

// 块元素

1、默认元素宽度和父元素保持一致,即占一整行 100%

2、默认从新的一行开始,并且独占一行,所以其他元素只能从新一行开始布局

3、可以设置盒子模型的所有属性,包括宽度、高度、外边距

// 行内块元素

行内块元素具有行内元素和块元素的共同特点

1、默认元素宽度和元素内容宽度保持一致

2、默认可以和其他行内元素同处一行

3、可以设置盒子模型的所有属性,包括宽度、高度、外边距

常见的行内元素有哪些:

常见的块元素有哪些:

其实这些结构属性是可以相互转换的,只要通过设置 display 为相应的值就可以

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180212A0JU2200?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券