一、元素分类

在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>

二、块状元素

块级元素特点：

1、每个块级元素独占一行。

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

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>块状元素</title>

    <style type="text/css">

    div, p{

        background: pink;

        /*display: inline; 将块状元素转换为内联元素*/

    }

    </style>

</head>

<body>

    <div>走走停停</div>

    <div>磕磕绊绊</div>

    <p>人生路上，精彩不断</p>

</body>

</html>

运行结果：

三、内联元素

内联元素特点：

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

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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>行内元素标签</title>

    <style type="text/css">

    a,

    span,

    em {

        background: pink;

        /*设置a、span、em标签背景颜色都为粉色*/

        /*display: block; 将内联元素转换为块状元素*/

    }

    </style>

</head>

<body>

    <a href="http://www.tt.com">网址</a>

    <span>平凡之路</span>

    <span>偶阵雨</span>

    <div>最初的梦想</div>

    <em>追光者</em>

</body>

</html>

运行结果：

四、内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素特点的元素。

内联块状元素特点：

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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>内联块状元素</title>

    <style type="text/css">

    a {

        width: 20px;

        /*a是内联函数，所以在默认情况下宽度不起作用*/

        height: 20px;

        /*a是内联函数，所以在默认情况下高度不起作用*/

        background: pink;

        /*设置背景颜色为粉色*/

        text-align: center;

        /*设置文本居中显示*/

        display: inline-block;  /*将a转换内联块状元素*/
　　　　/*display: none; none设置此元素不会被显示*/

    }

    </style>

</head>

<body>

    <a>1</a>

    <a>2</a>

    <a>3</a>

</body>

</html>

运行结果：

参考：https://www.w3school.com.cn

CSS -- 元素简介的更多相关文章

  1. css012 css布局简介

    css012  css布局简介 一.    网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二.    如何进行css布局 1.强大的<div>标签 网页的h ...

  2. CSS 选择器简介

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 选择器权重 如果以4位数表示选择符权重,那么: 元素选择器的权重是1: id 选择器的权重为100: cl ...

  3. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  4. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

  5. css 元素溢出

    css元素溢出: 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置. overflow的设置项: (1)visible 默认值 内容不 ...

  6. 您可能不知道的CSS元素隐藏“失效”以其妙用

    您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...

  7. Css - 元素的显示模式

    Css - 元素的显示模式 块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...

  8. 复习-css元素定位

    css元素定位 <style type="text/css"> body{ margin: 15px; font-family: "Adobe 宋体 Std ...

  9. 5：CSS元素类型

    5:CSS元素类型 学习目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分 ...

随机推荐

  1. 【HNOI2015】菜肴制作 - 拓扑排序+贪心

    题目描述 知名美食家小 A被邀请至ATM 大酒店,为其品评菜肴. ATM 酒店为小 A 准备了 N 道菜肴,酒店按照为菜肴预估的质量从高到低给予1到N的顺序编号,预估质量最高的菜肴编号为1. 由于菜肴 ...

  2. SpringBoot---关于 WebMvcConfigurerAdapter 过时问题及解决方法

    SpringBoot---关于 WebMvcConfigurerAdapter 过时问题及解决方法 环境: IDEA :2020.1 Maven:3.5.6 SpringBoot: 2.3.2 在Sp ...

  3. 分析dubbo心跳检测机制

    目的: 维持provider和consumer之间的长连接 实现: dubbo心跳时间heartbeat默认是60s,超过heartbeat时间没有收到消息,就发送心跳消息(provider,cons ...

  4. JavaScript学习系列博客_10_JavaScript中的while语句

    循环语句 - while循环 - 语法: while(条件表达式){ 语句... } - 执行流程: while语句在执行时,会先对条件表达式进行求值判断, 如果判断结果为false,则终止循环 如果 ...

  5. 进阶6：连接查询 一、sql92标准

    #进阶6:连接查询/*含义:又称多表查询,当查询的字段来自于多个表时,就会用到连接查询 笛卡尔乘积现象:表1 有m行,表2有n行,结果=m*n行 发生原因:没有有效的连接条件如何避免:添加有效的连接条 ...

  6. Promise 解析

    Promise 由于js的语言特性(用户交互)和工作环境(浏览器脚本),决定了它是单线程工作,所以两段脚本不能同时运行,但为了实现功能,所以人们使用了事件和回调来初步解决这个问题,例如(addEven ...

  7. 容器生态.png

    https://www.cnblogs.com/CloudMan6/p/6706546.html

  8. Python之运维

    这几日一直研究运维监控的事情,有次看见有一个脚本写的还不错,如今已经找不到地址了 就只能用Python代替shell了 其中原理是 监控 /proc/下的各种文件,/proc/ 顾名思义其为进程的文件 ...

  9. Redis主从复制（读写分离）

    主从复制(读写分离):读在从库读,写在主库写. 主从复制的好处:避免redis单点故障构建读写分离架构,满足读多写少的需求. 主从架构: 操作(启动实例,在一台机器上启动不同的实例,进行伪主从复制): ...

  10. 数组的三种方式总结 多维数组的遍历 Arrays类的常用方法总结

    一.数组的三种声明方式总结 public class WhatEver { public static void main(String[] args) { //第一种 例: String[] tes ...