面试 CSS篇清除浮动及display:inline-block
一、 在div使用display:inline-block时，HTML代码中的回车换行键会被转化为一个空白符
如图
<style type="text/css">
*{
margin: 0;
padding: 0; }
div{
width: 100px;
height: 100px;
border: 1px solid #0000FF;
display: inline-block; }
span{
width: 100px;
height: 100px;
border: 1px solid #0000FF;
display: inline-block; }
</style>
</head> <body>
<div id="">
div块元素
</div>
<span>
span行内元素
</span>
</body>
在父辈里添加 font-size: 0px; 在div里添加font-size:14px就能取消缝隙
二、清除浮动
1、 clear:both
图片文字浮动起来div就坍塌了，在代码中添加一个div加上clear:both;后清除浮动；优点: 方便简洁使用起来比较方便 缺点: 添加多余代码，不方便后期的维护
<style type="text/css">
#father{
border: 1px solid #0099CC; }
#father img{
float: left;
}
#father p{
float: right;
}
.clear{
clear:both
}
</style>
</head>
<body>
<div id="father">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg" >
<p>这是一段文字</p>
<div class="clear">
</div>
</div>
2、在页面中添加伪类标签 :after 这种方法是最好的不会在html中添加多余的div
#father:after{
content: '';
display: block;
clear: both;
}
3、在父级页面中添加 overfloat:hidden
面试 CSS篇清除浮动及display:inline-block的更多相关文章
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
- HTML&CSS基础-清除浮动
HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...
- 前端面试——css篇
css盒子模型 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-rig ...
- CSS float清除浮动
解决高度塌陷的问题 – 清除浮动 CSS中有个讨论较多的话题就是如何清除浮动,清除浮动其实就一个目的,就是解决高度塌陷的问题.为什么会高度塌陷?什么时候会高度塌陷?塌陷原因是:元素含有浮动属性 – 破 ...
- 前端老司机常用的方法CSS如何清除浮动？清除浮动的几种方式
在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性.爱,是因为通过浮动,我们能很方便地进行布局:恨,是因为浮动之后遗留下来太多的问题需要解决.下面本篇文章给大家介绍CSS清除 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- 关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
- div+css之清除浮动
当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...
- CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...
随机推荐
- P1426 小鱼会有危险吗(JAVA语言)
题目描述 有一次,小鱼要从A处沿直线往右边游,小鱼第一秒可以游7米,从第二秒开始每秒游的距离只有前一秒的98%.有个极其邪恶的猎人在距离A处右边s米的地方,安装了一个隐蔽的探测器,探测器左右x米之内是 ...
- 2021华为软件精英挑战赛（C/C++实现）-苦行僧的实现过程
下面给出2021华为软件精英挑战赛参与的整个过程,虽然成绩不是很好,但是也是花了一些时间的,希望后面多多学习,多多进步. 代码已经上传到了Github上:https://github.com/myFr ...
- 基于开源的GOCW和Directshow.net，实现摄像头预览、采集、录像等操作
本文基于开源的GOCW和Directshow.net,实现图像采集等操作.最为关键的部分在于可以实现摄像头的控制,同时关于视频采集进行了实现. 具体的内容请关注首发于51CTO的课程<基于Csh ...
- JAVA使用SizeOf
研究一下JAVA的SizeOf 引用外部类实现JAVA的SizeOf JAVA本身是没有SizeOf的,因此我们需要去MavenRepository中下载JAR包(也可以使用maven等),因为这里只 ...
- 全面了解Vue3的 reactive 和相关函数
Vue3的 reactive 怎么用,原理是什么,官网上和reactive相关的那些函数又都是做什么用处的?这里会一一解答. ES6的Proxy Proxy 是 ES6 提供的一个可以拦截对象基础操作 ...
- Spring Cloud：面向应用层的云架构解决方案
Spring Cloud:面向应用层的云架构解决方案 上期文章我们介绍了混合云,以及在实际操作中我们常见的几种混合云模式.今天我们来聊一聊Spring Cloud如何解决应用层的云架构问题. 对于Sp ...
- [BFS]A. 【例题1】走迷宫
A . [ 例 题 1 ] 走 迷 宫 解析 简单的BFS模板题 Code #include <bits/stdc++.h> #define N 1005 using namespace ...
- Tomcat9配置HTTP/2
1 概述 Tomcat从Tomcat8的一些较新版本就支持HTTP/2了,Tomcat9直接支持,本文首先讲述了相关HTTP/2的特性,接着利用一个简单的开源工具mkcert生成证书并利用该证书配置H ...
- 手写Spring DI依赖注入，嘿，你的益达！
目录 提前实例化单例Bean DI分析 DI的实现 构造参数依赖 一:定义分析 二:定义一个类BeanReference 三:BeanDefinition接口及其实现类 四:DefaultBeanFa ...
- ES系列(三)：网络通信模块解析
ES是一个分布式搜索引擎,其除了用户提供必要的通信服务外,集群间也必须保持紧密的通信联系,才能在必要的时候给出正确的结果.其则必然涉及到各种繁多且要求高的通信场景,那么如何实现高性能的通信,则是其必须 ...