inline-block

控制台-代码：

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

二· 如果是inline的话，也就是内联，inline是只有水平的宽度可以调的，没有高度，任何的属性调高度都无效

三。如果不用上述两个的话,div作为块级元素，会占整个水平块，而inline-block则让他只占住自己元素所在的空间。

CSS之inline和inline-block的更多相关文章

  1. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  2. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  3. css 内联元素inline 行框全解

    首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...

  4. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  5. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  6. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  7. css 小知识点：inline/inline-block/line-height

    inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...

  8. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  9. block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素

    block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...

  10. 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

    最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...

随机推荐

  1. IOS面试题（一）

    第一次写博客,我在这里先给大家分享一些iOS中常见的面试题吧! 1. Object-c的类可以多重继承么?可以实现多个接口么?Category是什么?重写一个类的方式用继承好还是分类好?为什么? 答: ...

  2. POJ1475 Pushing Boxes（双搜索）

    POJ1475 Pushing Boxes  推箱子,#表示墙,B表示箱子的起点,T表示箱子的目标位置,S表示人的起点 本题没有 Special Judge,多解时,先最小化箱子被推动的次数,再最小化 ...

  3. leetcode-118-Pascal's Triangle（生成具有n行的帕斯卡三角形）

    题目描述: Given a non-negative integer numRows, generate the first numRows of Pascal's triangle. Example ...

  4. leetcode-788-Rotated Digits（使用vector替代if else的逐个判断）

    题目描述: X is a good number if after rotating each digit individually by 180 degrees, we get a valid nu ...

  5. Springboot集成WebSocket通信全部代码，即扣即用。

    websocket通信主要来自两个类以及一个测试的html页面. MyHandler 和 WebSocketH5Config,下面全部代码 MyHandler类全部代码: package com.un ...

  6. CentOS 6.5中配置RabbitMQ

    先配置erlang依赖环境 yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel 安装erlang 1 ...

  7. selenium+Python（定位 单选、复选框，多层定位）

    1.定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法.定位一组对象 ...

  8. c++ 网络编程（七） LINUX下 socket编程 基于套接字的标准I/O函数使用 与 fopen,feof,fgets,fputs函数用法

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9614820.html 一.标准I/O 1,什么是标准I/O?其实是指C语言里的文件操作函数,如 ...

  9. sql developer链接不上oracle 报 The Network Adapter could not establish the connection

    安装时候报 : Oracle 支持在具有 DHCP 分配的公共 IP 地址的系统上进行安装.但应使用静态 IP 地址来配置系统的主网络接口, 以便 Oracle 软件正常工作.有关在配置有 DHCP ...

  10. shiro入门与认证原理

    一.shiro介绍 1.什么是shiro  shiro是apache的一个开源框架,是一个权限管理的框架,实现 用户认证.用户授权. 2.shiro的优点  (1)shiro将安全认证相关的功能抽取出 ...