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元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
随机推荐
- 不同角度看Handler——另类三问
之前有一章节介绍了Handler的常见面试题,今天就来说说另类的,可能你没关注的其他问题,一起看看吧. 系统为什么提供Handler 这点大家应该都知道一些,就是为了切换线程,主要就是为了解决在子线程 ...
- Function(函数分享)第二节
一.类型注解 1.1 类型注解 函数的类型注解分为两个部分:参数类型注解和返回值类型注解.其中返回值类型注解有时候我们可以直接省略,因为Typescript可以根据返回的语句来自动判断出返回值的类型. ...
- SMTPAuthenticationError: (535, '5.7.8 authentication failed')解决办法
代码: 运行之后一直报错,SMTPAuthenticationError: (535, '5.7.8 authentication failed'). 查找半天是因为新浪邮箱的STMP的服务没有开启, ...
- C/C++编程日记:逻辑井字棋(圈叉)(用空格初始化)
问题描述: 3*3的棋盘中,只要一条线上出现三个一样的棋子就获胜(玩家或电脑):如果棋盘已经放满还未出现三个棋子一条线则打成平手. 具体细节: 初始化棋盘(用空格初始化) //初始化棋盘 vo ...
- Python 写入和读取Excel数据
写数据到csv文件里 一. 在本地盘符里新建一个Excel文档,然后另存为csv文件 二.打开PyCharm,新建一个Python File ,写入以下代码 import randomimport ...
- pikachs 渗透测试2-XSS漏洞及利用
一.概述 XSS(跨站脚本)概述 Cross-Site Scripting 简称为"CSS",为避免与前端叠成样式表的缩写"CSS"冲突,故又称XSS.一般XS ...
- python-网络安全编程第七天(base64模块)
前言 睡不着,那就起来学习其实base64模块很早之前用过今天做爬虫的时候有个URL需要用它来编码一下 所以百度又学了一下遇到最大的问题就是python3和python2区别问题 python3的这个 ...
- 理解Volatile关键字,其实看这一篇就够了,写的非常细致
前言 volatile是Java虚拟机提供的轻量级的同步机制. volatile关键字作用是什么? 两个作用: 1.保证被volatile修饰的共享变量对所有线程总数可见的,也就是当一个线程修改了一个 ...
- 记录一次tomcat问题排查记录:org.apache.tomcat.util.bcel.classfile.ClassFormatException: Invalid byte tag in constant pool: 19
最近项目升级jdk,从jdk7 升级到 jdk8,本地已经自测完成了,需要部署到测试环境,测试环境已经装好 jdk8 了,但是tomcat 的版本还是 7.不过,据我之前了解,tomcat7是可以运行 ...
- 自学linux——1.VMware的安装及VM下centos的安装
1.CentOS下载 网址:https://www.centos.org/download/ 网盘:https://pan.baidu.com/s/1HrtK6xNig6KC8oh6O-6fyg 提取 ...