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>
二、块状元素
块级元素特点：
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 -- 元素简介的更多相关文章
- css012 css布局简介
css012 css布局简介 一. 网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二. 如何进行css布局 1.强大的<div>标签 网页的h ...
- CSS 选择器简介
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 选择器权重 如果以4位数表示选择符权重,那么: 元素选择器的权重是1: id 选择器的权重为100: cl ...
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
- Selenium自动化-CSS元素定位
接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式 大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...
- css 元素溢出
css元素溢出: 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置. overflow的设置项: (1)visible 默认值 内容不 ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用
您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...
- Css - 元素的显示模式
Css - 元素的显示模式 块元素(block) 块元素是指: 1.独占一行,每个div上下之间没有留白,上面的div的底部与下面的div的顶部紧紧靠在一起没有任何缝隙 2.可设置宽高,默认宽度是父元 ...
- 复习-css元素定位
css元素定位 <style type="text/css"> body{ margin: 15px; font-family: "Adobe 宋体 Std ...
- 5：CSS元素类型
5:CSS元素类型 学习目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分 ...
随机推荐
- PYTHON替代MATLAB在线性代数学习中的应用(使用Python辅助MIT 18.06 Linear Algebra学习)
前言 MATLAB一向是理工科学生的必备神器,但随着中美贸易冲突的一再升级,禁售与禁用的阴云也持续笼罩在高等学院的头顶.也许我们都应当考虑更多的途径,来辅助我们的学习和研究工作. 虽然PYTHON和众 ...
- sge的简单的应用
1.sge提交脚本qsub 1.qsub work.sh work.sh 不能以数字开头 2.qsub work.sh 默认工作路径为/home/username 3.qsub -cwd work. ...
- 第三篇 Scrum冲刺博客
一.会议图片 二.项目进展 成员 完成情况 今日任务 冯荣新 商品列表,商品详情轮播图 商品底部工具栏,购物车列表 陈泽佳 历史足迹,静态页面 渲染搜索结果,防抖的实现 徐伟浩 未完成 商品信息录入 ...
- Networks of Spiking Neurons: The Third Generation of Neural Network Models
郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! 顺便安利一下同组的大佬做的SNN教程:https://spikingflow.readthedocs.io/zh_CN/latest/Tu ...
- Spring Boot入门系列（十九）整合mybatis，使用注解实现动态Sql、参数传递等常用操作！
前面介绍了Spring Boot 整合mybatis 使用注解的方式实现数据库操作,介绍了如何自动生成注解版的mapper 和pojo类. 接下来介绍使用mybatis 常用注解以及如何传参数等数据库 ...
- MySQL进阶之MySQL索引以及索引优化
本文配合B站学习视频BV1es411u7we使用效果更佳. 1. MySQL版本 主流版本:5.x版 5.0 - 5.1:早期产品的延续,升级维护 5.4 - 5.x:MySQL整合了三方公司的新存储 ...
- Hive 常见面试题(一)
面试题: hive 内部表和外部表的区别? hive 是如何实现分区的? Hive 有哪些方式保存元数据,各有哪些优缺点? hive中order by.distribute by.sort by和cl ...
- 5. java 的类和对象
1.什么是类 类 :是一组相关属性和行为的集合.可以看成是一类事物的模板,使用事物的属性特征和行为特征来描述该类事物.现实中,描述一类事物:属性 :就是该事物的状态信息.行为 :就是该事物能够做什么. ...
- C/C++ MFC
C++ & MFC(转载) C++是一种静态数据类型检查的.支持多重编程范式的程序设计语言,支持过程化程序设计.数据抽象.面向对象程序设计.制作图标等泛型程序设计的多种程序设计风格. MF ...
- CRMEB单商户商城系统v4.0源码，含前端uni-app源码
CRMEB商城系统是基于ThinkPhp6.0+Vue开发的一套新零售移动电商系统,CRMEB系统就是集客户关系管理+营销电商系统,能够快速积累客户.会员数据分析.智能转化客户. 有效提高销售.会员维 ...