CSS--基础块级元素与内联元素
在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。在HTML和XHTML中,块级元素不能继承自行内元素(即不能嵌套在行内元素),<p>I like <em>it</em></p>是正确的写法,但是<em>I like<p>it</p></em>是不正确的。
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
*可以通过设置display:block就是将内联元素显示为块级元素。块状元素也可以通过代码display:inline将元素设置为内联元素。
*块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
*内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素
*内联块状元素元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
CSS--基础块级元素与内联元素的更多相关文章
- Code笔记之:CSS块级元素、内联元素概念
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- CSS块级元素、内联元素概念
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS的块级元素和内联元素的概念
三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...
- css中块级元素、内联元素(行内元素、内嵌元素)
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...
- CSS的块级元素和内联元素,以及float
说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...
- CSS 块级元素、内联元素概念
p.h1.或div等元素常常称为块级元素,这些元素显示为一块内容:Strong.span等元素称为行内元素,它们的内容显示在行中,即“行内框”.(可以使用display=block将行内元素转换成块元 ...
- CSS文档流、块级元素、内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS块级元素、内联元素概念[转]
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
随机推荐
- 第二篇 .NET高级技术之密闭类和静态类及扩展方法
1.密闭类是修饰为sealed的类, sealed不能有子类.一般只有系统中的一些基本类声明为sealed.面试题:是否可以编写一个类继承自String类? 答:不能,因为string被声明为了sea ...
- Mantis优化改造(技术篇)
为什么要写这篇? 既然都过去这么久了,都回忆不起来了,为什么还要整理出来这篇文章呢? 这还要追溯到2018年3月份. 当时换工作,面试了国内某知名电视厂商. 简历上面写了我优化改造了bug管理系统ma ...
- ufunc函数
无灯可看.雨水从教正月半.探茧推盘.探得千秋字字看. 铜驼故老.说著宣和似天宝.五百年前.曾向杭州看上元. ufunc是universal function的缩写,他是一种对数组的每个元素进行运算的函 ...
- 解决error while loading shared libraries
ldd print shared library dependencies.可以查看哪些库没有找到. 这个进程启动失败,使用ldd命令可以发现是因为memcache库没有发现.把该so文件放入/lib ...
- LightOj 1088 - Points in Segments (二分枚举)
题目链接: http://www.lightoj.com/volume_showproblem.php?problem=1088 题目描述: 给出一个n位数升序排列的数列,然后q个查询,每个查询问指定 ...
- Kruskal HDOJ 1863 畅通工程
题目传送门 /* 此题为:HDOJ 1233 + HDOJ 1232 */ #include <cstdio> #include <algorithm> #include &l ...
- java容器章节总结
- Backbone学习记录(7)
事件委托 <form> <input type="text" class="txt"> <input type="but ...
- C#实现较为实用的SQLhelper
第一次写博客,想不到写什么好b( ̄▽ ̄)d ,考虑的半天决定从sqlhelper开始,sqlhelper对程序员来说就像helloworld一样,很简单却又很重要,helloworld代表着程序员萌新 ...
- gulp插件之gulp-mock-server
本文讲gulp-mock-server的应用,用于虚拟一个服务器,模拟后台返回json数据给前端,这样可以一定程度上实现前后端分离,约定好接口之后,前后端即可同时开发,从而提高效率. 在gulpfil ...