CSS基础-元素分类

块级元素(block)

特点

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行(霸道吧,一个块级元素独占一行)

2、块级元素的高度,宽度,行高以及顶和底边距都可以设置

3、块级元素在不设置宽度的时候,是其本身父容器的100%(和父元素宽度一致),除非自己设置宽度

那么,问题来了,我想成为霸道的块级元素怎么办呢?

<div><p><h1><form><ul><li>等就是块级元素

设置display:block就是将元素显示为块级元素


内联元素(行内元素)(inline)

先问个问题,内联元素是个什么鬼?

在HTML中,<span><em><strong><a><label>就是典型的内联元素

块级元素也可以通过设置display:inline成为内联元素

呵呵呵呵,据我猜测,接下来该说特点了吧!

O__O "…如你所愿:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。


内联块状元素(inline-block)

别说话,让我猜猜:

这货应该就是内联元素和块状元素的结合体,哈哈哈哈

。。。先把特点奉上:

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

凸(艹皿艹 ),我觉得这货牛,我要去见见他们:

代码display:inline-block就是将元素设置为内联块状元素

<img><input>就是内联块状元素标签

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,825评论 1 92
  • CSS盒模型 在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型。两种盒子模型都包括pa...
    _空空阅读 3,508评论 0 3
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,315评论 0 3
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,672评论 0 30
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 975评论 0 1