前端开发学习笔记(七)- Css 元素分类

一.元素分类

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素,内联元素(又叫行内元素)和内联块状元素.

常用的块元素有:<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<address>,<blockquote>,<form>

常用的内联元素有:<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>

常用的内联块元素有:<img>,<input>

二.块级元素

在html中<div>,<p>,<h1>,<form>,<ul>和<li>就是块级元素.设置display:block就是将元素显示为块级元素。

语法举例:a{display:block;} 这句代码的意思就是将内联元素a转换为块状元素,从而使a元素具有块状元素的特点。

块级元素特点:

1.每个块级元素都从新的一行开始,并且其后的元素也另起一行。

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

3.元素宽度在不设置的情况,是它本身父容器的100%,除非设定一个宽度

三.内联元素

在html中,<span>,<a>,<label>,<strong>和<em>就是典型的内联元素(行内元素)(inline),当然块元素也可以通过代码display:inline将块元素设置为内联元素.

语法举例:div{display:inline;}

内联元素特点:

1.和其他元素都在一行上.

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

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

P:内联元素之间有一个间距问题,后面会详细介绍

四.内联块状元素(inline-block)

内联块状元素就是同时具备内联元素,块状元素的特点。

语法举例:display:inline-block 就是将元素设置为内联块状元素

内联块状元素特点:

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

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

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

推荐阅读更多精彩内容

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