从零开始学习html(十一)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>
二、元素分类--块级元素
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>内联块状元素</title>
<style type="text/css">
div,p{background:pink;}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<p>段落1段落1段落1段落1段落1</p>
</body>
</html>
元素分类--块级元素
什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。
设置display:block
就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
来试一试:感受一下块级元素的特点
在代码编辑器中输入各种块级标签,试一试他们的特点。
三、元素分类--内联元素
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行内元素标签</title>
<style type="text/css">
a,span,em{
background:pink;/*设置a、span、em标签背景颜色都为粉色*/
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
<span>33333</span>
<span>44444</span><em>555555</em>
</body>
</html>
元素分类--内联元素
在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。
当然块状元素也可以通过代码display:inline
将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。
div{
display:inline;
} ...... <div>我要变成内联元素</div>
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联元素之间有一个间距问题。
来试一试:感受一下内联元素的特点
在代码编辑器中输入各种内联元素标签,试一试他们的特点。
行内元素之间会产生间隙bug问题的场景:
1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。
如下代码:
<div>
<a>1</a>
<a>2</a>
<span>33333</span>
<span>44444</span>
<em>555555</em>
</div>
解决方法:
1、写在一行,之间不要有空格之类的符号。
2、使用font-size:0
div{font-size:0;}
a,span,em{font-size:16px;}
<div>
<a>我是链接</a>
<span>我是行空间</span>
</div>
四、元素分类--内联块状元素
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内联块状元素</title>
<style type="text/css">
a{ width:20px;/*在默认情况下宽度不起作用*/
height:20px;/*在默认情况下高度不起作用*/
background:pink;/*设置背景颜色为粉色*/
text-align:center; /*设置文本居中显示*/
}
</style>
</head>
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</body>
</html>
元素分类--内联块状元素
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,
代码display:inline-block
就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
来试试,仿分页页码设计
在代码编辑器中大家可以看到我们为 a 元素设置了宽和高,但都没有起到作用,
原因是a在默认的时候是内联元素,内联元素是不可以设置宽和高的。
在编辑器的第8行,输入:
display:inline-block;
将块元素或行内元素转换为行块内元素:是为后面的课程做铺垫,
你只要知道行内元素不能设置高宽,转换后可以设置就行了,块状元素不能在一行显示转换后可以在一行显示就行了。
a标签变为内联块状元素后,居中设置的意思是,数字在每一个块内里面是居中显示的,而不是整个a标签在页面上居中
inline:内联元素{
1,不能设置width和height;
2,多个行内元素排成一行,直到一行排不下,才会换新一行;
3,只可以设置水平方向的边距,如:margin-left,margin-right,padding-left,padding-right.
}
block:块级元素{
1,块级元素独占一行;
2,可以设置width和height,默认宽度为一整行,除非单独设置宽度;
3,可以设置margin和padding属性。
}
inline-block{
简而言之就是让元素既可以在一行内显示,又可以设置宽高边距等。
}
块级元素默认占一整行 无论它的宽有没有一整行宽 没用完的空间不准其他元素使用
属性:display:block;
默认占一整行 默认宽度一整行 可以设置宽高 一行只有自己
内联(行内)元素 定义的是一段内容(文本)这一行内没占用完的空间其他内联元素可以共同使用
属性:display:inline;
没法设置宽高 一行可以有多个 大小由内容决定
内联块状元素(行内块级元素)
属性:display:inline-block;
可以设置宽高
一行能有多个
五、什么是盒模型
从零开始学习html(十一)CSS盒模型——上的更多相关文章
- 第 16 章 CSS 盒模型[上]
学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 C ...
- HTML+CSS学习笔记 (11) - CSS盒模型
元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
- 从零开始学习html(十二)CSS布局模型——上
一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之 ...
- 从零开始学习前端开发 — 3、CSS盒模型
★ css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- css学习の第三弹—盒模型的创建和使用
一.css盒模型: 元素分类: 块状元素.内联元素(又叫行内元素)和内联块状元素. >>常用的块状元素有: <div>.<p>.<h1>...<h ...
- 第 16 章 CSS 盒模型[下]
学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性 使用 vis ...
- 7.css盒模型
所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
随机推荐
- javascript数据结构与算法---二叉树(删除节点)
javascript数据结构与算法---二叉树(删除节点) function Node(data,left,right) { this.data = data; this.left = left; t ...
- Scala使用Akka模拟RPC机制代码2
RemoteMessage.scala //对象要序列化才能通过网络传输 这个地方没有大括号....这有这个extends声明 trait RemoteMessage extends Serializ ...
- (转)9 db2trc案例2(1,2)
原文:http://book.51cto.com/art/200906/130068.htm 9.3.3 db2trc案例2(1) 在AIX操作系统上,系统原先运行良好,而后用户从DB2 V8 FP ...
- (转)Python的web服务器
1.浏览器请求动态页面过程 2.WSGI Python Web Server Gateway Interface (或简称 WSGI,读作“wizgy”). WSGI允许开发者将选择web框架和web ...
- (转)浅谈AIX下IPFilter防火墙
1 序言 AIX操作系统发行至今,经历数个版本,功能不断增强,就安全方面IP Security也变化不少,如动作中增加了If等功能,但这次暂且讨论配置防火墙策略及防火墙的基本操作,其他高级功能待 ...
- 通过修改CR0寄存器绕过SSDT驱动保护
为了安全起见,Windows XP及其以后的系统将一些重要的内存页设置为只读属性,这样就算有权力访问该表也不能随意对其修改,例如SSDT.IDT等.但这种方法很容易被绕过,我们只要将这些部分修改为可写 ...
- jQuery ajax请求错误返回status 0和错误error的问题
上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...
- Java集合——HashMap,HashTable,ConcurrentHashMap区别
Map:“键值”对映射的抽象接口.该映射不包括重复的键,一个键对应一个值. SortedMap:有序的键值对接口,继承Map接口. NavigableMap:继承SortedMap,具有了针对给定搜索 ...
- sql的存储过程实例--动态根据表数据复制一个表的数据到另一个表
动态根据表数据复制一个表的数据到另一个表 把track表的记录 根据mac_id后两位数字,复制到对应track_? 的表中 如:mac_id=12345678910,则后两位10 对应表为track ...
- 数据序列化导读(3)[JSON v.s. YAML]
前面两节介绍了JSON和YAML,本文则对下面的文章做一个中英文对照翻译. Comparison between JSON and YAML for data serialization用于数据序列化 ...