美文网首页CSS学习笔记
前端开发学习笔记(七)- Css 元素分类

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

作者: Showtime_ST | 来源:发表于2017-01-10 14:31 被阅读0次

    一.元素分类

    在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.元素的高度,宽度,行高以及顶和底边距离都可设置.

    相关文章

      网友评论

        本文标题:前端开发学习笔记(七)- Css 元素分类

        本文链接:https://www.haomeiwen.com/subject/xwmkbttx.html