CSS之inline和inline-block
inline-block
控制台-代码:

PS:inline-block是让元素以内联形式存在,也就是不是块级,但是表现起来(又具有块级元素的高度)--也就是可以调高度(margin或者padding,height)

二· 如果是inline的话,也就是内联,inline是只有水平的宽度可以调的,没有高度,任何的属性调高度都无效
三。如果不用上述两个的话,div作为块级元素,会占整个水平块,而inline-block则让他只占住自己元素所在的空间。
CSS之inline和inline-block的更多相关文章
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- css 内联元素inline 行框全解
首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- display:inline 跟 display:block 跟 display:inline-block区别
我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- css 小知识点:inline/inline-block/line-height
inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
- block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
- 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...
随机推荐
- easyui里面的加载tree的两种方式
第一种: 使用EasyUI中Tree 符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My ...
- 851 AlvinZH的鬼畜密码(背包DP大作战N)
851 AlvinZH的鬼畜密码 思路 难题.动态规划. 先判断字符串是否合理(可翻译),然后分段处理,每一小段用动态规划求出解法数. dp[i]:字符串str[0~i]的解法数.通过判断str[i] ...
- 【关于selenium自动化中,Webdriver的原理以及工作流程】
原文地址:https://www.cnblogs.com/imyalost/p/7242747.html#4109245 作者:老 张 1.关于Webdriver 设计模式:按照Server-Clie ...
- php 返回数组中指定多列的方法
php array_column 方法可以返回数组中指定的一列,但不能返回多列,本文将介绍array_column方法的使用,并用代码演示返回数组中指定多列的方法. 1.array_column说明 ...
- MySQL:管理MySQL、事务(三)
干货: 命令行程序mysql实际上是MySQL客户端,真正的MySQL服务器程序是mysqld,在后台运行. 数据库事务具有ACID特性,用来保证多条SQL的全部执行. 五.MySQL 通过mysql ...
- python全栈开发_day12_装饰器
一:装饰器 1)什么是装饰器 装饰器的本质就是利用闭包,在满足开放(修改函数锁包含的功能)封闭(不改变源代码)的情况下完成操作. 2)装饰器的基本运用 def name_judge(f): def a ...
- JavaSwing概述
GUI(Graphic User Interface)为程序提供图形界面,它最初的设计目的是构建一个通用的GUI,使其能在所有平台上运行.在Java1.0中基础类AWT(Abstract Window ...
- Linux平台总线设备驱动
1. 平台总线(Platform bus)是linux2.6内核加入的一种虚拟总线,其优势在于采用了总线的模型对设备(没有挂到真实总线的设备)与驱动进行了管理,这样提高了程序的可移植性. 2. 平台总 ...
- Oracle知识转储
https://blog.csdn.net/u011479200/article/details/53086411 https://www.cnblogs.com/LiYi-Dao/p/9406189 ...
- app唤起的完美解决方案,及阻止浏览器的默认弹窗行为
https://stackoverflow.com/questions/10237031/how-to-open-a-native-ios-app-from-a-web-appvar frame = ...