CSS 中的内联元素、块级元素以及display的各个属性的特点

1. display:block

1.1 block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度

1.2 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行

1.3 block元素可以设置margin和padding属性

2. display:inline

2.1 inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化

2.2 inline元素设置width,height属性无效

2.3 inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果

3. display:inline-block

3.1 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性

3.2 在当两个元素标签之间有换行符时,如果用inline-block的方式将元素并排显示时,如果父容器的宽度正好为并排显示子元素的宽度之和,则有可能不能并排显示,原因是inline-block会将换行渲染成空格占用一定的空间,所以为了让子元素并排显示则可以再父容器上设置font-size:0,这样空格就不会占用空间,如果子元素中又要显示的文本内容,则再在子容器上设置font-size就好

总结:

1. 常见的内联元素有 SPAN, A,INPUT,IMG等

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406918.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

window.print() 前端实现网页打印详解

前言 print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍。 一、print()方法 print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印请求。最简单的打…

判断一个数的二进制形式是否只有一个1,是的话就输出

// 判断一个数的二进制形式是否只有一个1&#xff0c;是的话就输出#include "stdafx.h" #include <stdlib.h>int main(int argc, char* argv[]) {unsigned int n 0;char str[100] {0};do{if(n && (n & (n-1)) 0){printf("%d, %X\n", …

android- Auto Monitor Logcat

启动模拟器的时候弹出窗体&#xff1a; 它实在询问你是否显示logcat视图以便显示此工作空间中的程序信息。 因为如何程序错误&#xff0c;可以从logcat中看到错误的原因&#xff0c;建议选择yes。 单击确定&#xff0c;你会发现多了一个Logcat窗体。转载于:https://www.cnblogs…

C#2.0泛型

泛型是什么 一种类型占位符&#xff0c;或称之为类型参数。我们知道在一个方法中&#xff0c;一个变量的值可以作为参数&#xff0c;但其实这个变量的类型本身也可以作为参数。泛型允许我们在调用的时候再指定这个类型参数是什么。在.net中&#xff0c;泛型能够给我们带来的两…

css行高line-height的一些深入理解及应用

1. 一些字面意思 “行高”是指两行文字间基线之间的距离。基线是在英文字母中用到的一个概念&#xff0c;我们刚学英语的时使用的那个英语本子每行有四条线&#xff0c;其中底部第二条线就是基线&#xff0c;是a,c,z,x等字母的底边线。下图的红色线即为基线 2. line-height与l…

echarts使用大总结

echarts图表x轴数据太多显示不全的问题 问题如图&#xff0c;x轴数据条数过多可能导致x轴显示不全&#xff0c;开始我使用下面方法 xAxis: {type: "category",min: min,max: max,data:time,axisLabel: {interval:num,//interval为x轴两相邻数据之间所包含数据条数&a…

宏定义中##和#的作用

From: http://blog.chinaunix.net/space.php?uid16135252&doblog&id2752917 内核中有很多的宏定义&#xff0c;在宏定义define中经常看到两个字符串##和#&#xff0c;这里把它的用法做一下说明&#xff1a; ##是一个连接符号&#xff0c;用于把参数连在一起 …

我对CSS vertical-align的一些理解与认识(一)

1. vertical-align一大堆乱七八糟的属性 有句俗语叫做“见多不怪”&#xff0c;我估摸着这些top,bottom属性大家都见过&#xff0c;没啥看头&#xff0c;没啥说头。老实讲&#xff0c;我看到这些养臭虫的属性也头疼&#xff0c;所以&#xff0c;忘了他们&#xff0c;我们说点有…

@Repository , @Service , @Controller 和 @Component

用Spring MVC时Controller注解的类将变成一个Spring MVC的控制器. 不用Spring MVC的情况下, 这四个注解没有区别. 根据注解的语义, 注解在类上面可以提高代码的可读性.Repository代表仓库. 一般注解在DAO实现类上, 别人看代码时, 就知道这个类是一个跟数据存储有关的类. Servic…

vue的token刷新处理

前言 以token处理登录的web系统&#xff0c;一般会有两个token&#xff1a;access-token和refresh-token。 node.js中&#xff0c;一般用jsonwebtoken这个模块。 access-token&#xff0c;是用户输入登录的账号密码&#xff0c;后台去db验证然后颁发的&#xff0c;它一般记录…

我对CSS vertical-align的一些理解与认识(二)

1. 我对不同浏览器解析vertical-align属性的理解 在上集中&#xff0c;在最后提供的实例中&#xff0c;vertical-align:middle实际上应该是与后面的文字是独立的&#xff0c;毫无关联&#xff0c;就是说vertical-align无论是什么&#xff0c;都不影响文字在box中的位置&#x…

request_do?send方法

Ruby中 respond_to? 和 send 的用法php?nameRuby" class"t_tag">Ruby中 respond_to? 和 send 的用法[收藏] Ruby中的字符串与符号 如同其他的OO语言一样&#xff0c;在ruby中&#xff0c;通过给对象发送消息&#xff0c;来完成对象的功能&#xff0c;比如…

Vue中token刷新及token过期的实现

总&#xff1a;通过axios&#xff0c;vuex&#xff0c;及自定义的方法实现。 以下是思路&#xff1a; 1.做token刷新必不可少的是&#xff0c;token&#xff08;请求时的token&#xff09; / refresh_token&#xff08;刷新token时用的refresh_token&#xff09; / resetTime&a…

Source Code Library 源代码收集器

对于程序员来说&#xff0c;收集、整理一些常用的源代码是经常性的工作&#xff0c;但很多时候&#xff0c;随着收集的代码、文档、压缩包的增长&#xff0c;也会产生另一个问题&#xff1a;那就是如何快速找到所需要的内容。 这个问题曾经困扰着我&#xff0c;后来我开始使用&…

VC2010如何给ActiveX添加事件

利用VC开发ActiveX时&#xff0c;需要给控件添加标准事件或自定义事件&#xff0c;在VC6中有多种方法&#xff1a; 一、按Ctrl W 打开类向导&#xff0d;&#xff1e;切换到“ActiveX Events"&#xff0d;&#xff1e;Add Event...&#xff0c;如图&#xff1a; 二、右…

css动态设置宽高

css 中可以使用 calc() 来动态设置宽高&#xff0c;但是&#xff0c;在表达式中运算符的前后必须要有空格 height:calc(100vh - 80px);