block、inline、inline-block区别以及标签嵌套
1、block
将元素转为块元素,块元素占一行,可以设置宽和高。
2、inline
将元素转为行内元素,占一行,不可以设置宽和高。
3、inline-block
将元素设置为行内块元素,这时元素既可以设置宽和高,又占一行。但这时的元素之间会出现缝隙,解决办法:1)设置浮动 2)将父元素的font-size设置为0,子元素设置为实际大小
4、常见的几种元素
块级元素 :div、h系列、li、dt、dd、p
行内元素 :span、u、a、、em、b、i、u、em
行内块元素:input 、img 、button 、texterea 、label。
5、p标签不能包含div标签
块级元素和行内元素之间的嵌套,是块级可以嵌套行内元素和某些块级元素,而行内元素不能嵌套块级元素,可以嵌套文本和其他行内元素。但有几个特殊的块级元素只能包含行内元素, h1~h6、p、dt,因此p标签不能包含div元素,因为浏览器渲染的缘故,p包含div元素时会被渲染成:<p>xxx</p><div>xxxx</div><p></p>。
li 内可包含 div 标签
<li><div></div></li>
块级元素与块级元素并列、行内元素与行内元素并列
<div><h2></h2><p></p></div> 正确
<div><a href="#"></a><span></span></div> 正确
<div><h2></h2><span></span></div> 错误,行内元素与块级元素并列了
block、inline、inline-block区别以及标签嵌套的更多相关文章
- display:inline、block、inline-block 的区别
一.块级元素 与 行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...
- css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括
*知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline-block,block,inline的区别与用法
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- block,inline和inline-block概念和区别(转载)
转自: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...
- 2017-08-20 block,inline和inline-block概念和区别
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
- display:inline、block、inline-block的区别(摘抄)
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
随机推荐
- 菜鸟试做GUI简单数据库查询界面 python+tkinter+mysql
一.准备工作: 1.安装mysql3.7,创建一个test数据库,创建student表,创建列:(列名看代码),创建几条数据 (以上工作直接用navicat for mysql工具完成) 二.代码: ...
- 快速增加osdmap的epoch
最近因为一个实验需要用到一个功能,需要快速的增加 ceph 的 osdmap 的 epoch 编号 查询osd的epoch编号 root@lab8107:~# ceph osd stat osdmap ...
- CSS z-index应用靠近用户的框
1.z-index (1)z轴.数值越大,越靠近你 (2)只能作用于定位过的标签元素 应用示例 <!DOCTYPE html> <html lang="zh-CN" ...
- Node.js 爬虫爬取电影信息
Node.js 爬虫爬取电影信息 我的CSDN地址:https://blog.csdn.net/weixin_45580251/article/details/107669713 爬取的是1905电影 ...
- java~通过springloaded实现热部署
之前写过使用自定义的classLoader进行动态加载,热部署:它有很多弊端,我总结一下: 当前项目不能引用第三方包 当前项目必须使用反射的方式调用第三方包的方法 写死的一些路径 springload ...
- FL Studio进行侧链的三种方式(下)
在上篇教程中我们了解了在FL Studio中进行侧链的第一种方式,今天我们就来继续带领大家了解进行侧链的另外两种方式. 如何使用 Fruity Peak Controller(果味峰值控制器)在FL ...
- django基本内容
1,流程 1.1 了解web程序工作流程 1.2 django生命周期 2,django介绍 目的:了解Django框架的作用和特点 作用: 简便.快速的开发数据库驱动的网站 django的优 ...
- 2019年第十届蓝桥杯【C++省赛B组】D、E、G、H、I题解
这场有几道题目思路,在之前比赛中遇到过 D. 数的分解 #枚举 题意 将\(2019\)分解成\(3\)个各不相同的正整数之和,并且每个正整数都不包含数字\(2\)和\(4\),一共有多少种分解方法? ...
- Java基础教程——Date类和Calendar类
Date类和Calendar类都是关于日期的类,都在java.util包中,使用时需要import. Date java.util.Date类的对象用来表示时间和日期,用得最多的是获取系统当前日期和时 ...
- 一万三千字的HashMap面试必问知识点详解
目录 概论 Hasmap 的继承关系 hashmap 的原理 解决Hash冲突的方法 开放定址法 再哈希法 链地址法 建立公共溢出区 hashmap 最终的形态 Hashmap 的返回值 HashMa ...