关于display

	<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style media="screen">

  .num1{

    display: inline;

  }

    .num2{

      display: inline;

    }

  </style>

</head>

<body>

  <div class="num1">

    nihao

  </div>

  <div class="num2">

    buhao

  </div>

</body>

</html>

要想并排显示nihao 和 buhao 必须两个块状元素都是内联元素。少一个都不行。

	<!DOCTYPE html>

	<html lang="en">

	<head>

	  <meta charset="UTF-8">

	  <title>Document</title>

	  <style media="screen">

	  .num1{

	    display: inline-block;

	  }

	    .num2{

	      display: inline-block;;

	      background: #314181;

	      width: 80px;

	    }

	  </style>

	</head>

	<body>

	  <div class="num1">

	    nihao

	  </div>

	  <div class="num2">

	    buhao

	  </div>

	</body>

	</html>

首先内联（inline）是没有宽高的。 但是你想让他们并排，又想给这个元素宽高。那么使用inline-block。

关于float

1 <div class="num1">

  你好

</div>

<div class="num2">

  heihei

</div>

1 num1的浮动，会让num2上来，但是num2的浮动则不会对num1有什么影响。

2 元素浮动后，他会变为 inline-block。其宽度不是100%。

案例：为什么浮动没有效果。

关键点在于p元素的父元素 .witter-text没有宽度。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style media="screen">

    .twitter-pic img{

      width: 42px;

      height: 42px;

      border-radius: 42px;

    }

    .twitter-text{

      float: left;

      background-color: green;

      width: 80%;这里若是不加宽度，那么他的儿子P标签就会在占满一行后另外重启一行。

      使p标签可以占宽度的100%。那么此时浮动也就没有任何效果。

    }

    .twitter-pic{

      float: left;

      padding: 17px;

      background-color: blue;

      /*display: inline-block;*/

    }

    .twitter-text p{

      display: inline;

    }

  </style>

</head>

<body>

  <div class="owl-item">

    <div class="twitter-pic">

      <a href="http://www.ioart.com/news/accessories_blog6/">

        <img src="http://static.ioart.com/media/magentothem/blog/002564ba9d45115e1e535a.jpg"

        alt="艺术衍生品电商图标" />

      </a>

    </div>

    <div class="twitter-text">

      <span class="name">

        <a href="http://www.ioart.com/news/accessories_blog6/">

          Lily

        </a>

      </span>

      <p>

        艺术衍生品是艺术作品衍生而来的艺术与商品的结合体，具备一定的艺术附加值。

        包括经艺术家亲笔签名且限量发行的专供收藏和欣赏的版画，印有艺术家代表作品的文具、

        生活用品、服装服饰以及与艺术元素相结合的具有收藏价值的产品等。

      </p>

    </div>

  </div>

</body>

</html>

css代码思考:display和float的更多相关文章

  1. 页面css代码

    博主原来的页面css代码 (这个是原来的那种效果,差不多弄出来会是这种效果http://www.cnblogs.com/thmyl/) /*simplememory*/ #google_ad_c1, ...

  2. CSS布局 ——从display，position， float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  3. CSS代码重构与优化之路

    作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...

  4. CSS代码重构

    CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高 ...

  5. CSS代码重构与优化

    CSS代码重构的基本方法 前面说到了CSS代码重构的目的,现在我们来说说一些如何达到这些目的的一些基本方法,这些方法都是易于理解,容易实施的一些手段,大家平时可能也不知不觉地在使用它. 提高CSS性能 ...

  6. CSS代码重构与优化之路（转）

    CSS代码重构与优化之路   阅读目录 CSS代码重构的目的 CSS代码重构的基本方法 CSS方法论 我自己总结的方法 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多 ...

  7. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  8. 我的页面定制CSS代码（SimpleGamboge皮肤）

    我的页面定制CSS代码,针对博客园SimpleGamboge皮肤. 调整: 1.左上图片更换为自己的头像 2.扩大左侧栏宽度,缩小右侧主栏宽度宽度 3.扩大内容页面的评论区宽度,工具图标靠左 4.去广 ...

  9. 实用的60个CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

随机推荐

  1. git分支回退以及目录回退

    分支回退 git checkout - 目录回退 cd -

  2. Design：设计目录

    ylbtech-Design:设计目录 1.返回顶部 1.0 蚂蚁设计 https://design.alipay.com 1.1 Ant Design - 一个 UI 设计语言 https://an ...

  3. Redis详细用法

    Redis详细用法 1.redis启动命令 本机Redis 安装路径是在usr/local/redis 目录下 启动命令: ./redis-server redis.conf(启动时指定配置文件) 测 ...

  4. laravel artisan工具的使用

    Artisan是laravel中自带的命令行工具的名称(一个php文件,放在laravel框架的根目录,因此命令的使用都是在根目录下的). 它提供了一些对应用开发帮助的命令,可以使用list命令列出所 ...

  5. npm ERR! { Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_cache\_locks'

    vue项目安装json-server报错npm ERR!  { Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodej ...

  6. 斯坦福【概率与统计】课程笔记（六）：EDA | 标准差和方差

    这一篇比较简单,就不展开记录了,方差和标准差的计算方法记住了就可以. 计算mean 计算每个样本与mean的差值的平方,将其累加后除以(样本数-1)[注:这里的除数可以是n-1也可以是n],即得到方差 ...

  7. 3.jmeter jsr232 脚本获取当前测试的正在活动的线程数

    jsr232 groovy 脚本获取当前测试的正在活动的线程数 (需要选择 groovy类型, 如果使用beanshell或者javascript,请根据其语法稍作修改即可) import org.a ...

  8. 利用程序随机构造N个已解答的数独棋盘

    高级软件工程第二次作业:利用程序随机构造N个已解答的数独棋盘,代码如下: package SudokuGame; /** * 解决这个问题使用的是回溯+剪枝的算法 * 基本思想:不断地将每个格子可填入 ...

  9. 什么是中间件？中间件和java应用关系是什么

    中间件,比如websphere 是一种独立的系统软件,你的java应用要通过它来管理,比如数据库连接,消息通信等,中间件位于操作系统之上.简单滴说,你不可能直接把你的java应用部署在操作系统上,得由 ...

  10. 任正非：5G技术只独家卖给美国！不卖给韩国、日本、欧洲

    https://v.qq.com/x/page/g3001d0xvxe.html 我只转个标题,细节不管了. 呃,实际上就是说,老任头也决定向美国低头了,对不. 不过,也确实没办法. 该起床吃钙片了.