其实在网页中有看不见的基线，就像作业本上面的一行一行的线，但是我们看不见。

div是块状元素，独占一行，用div控制文字的颜色会使得文字换行，使用float可以改善，但是它不会浮在相应的位置；

<style>
#test1{
color:red;
float:left;
}
#test2{
color:blue;
}
</style>
</head>
<body>
<div>
北方有<div id="test1">佳人</div>，绝世而独立。</br>
一顾倾人城，再顾倾人国。</br>
宁不知倾城与倾国，<span id="test2">佳人</span>难再得。</br>
</div>
</body>

span行内元素，只在一行中发挥作用，设置高宽此时没有作用，因为行高已经定了；

<style>
#test1{
color:red;
}
#test2{
color:blue;
}
</style>
</head>
<body>
<div>
北方有<span id="test1">佳人</span>，绝世而独立。</br>
一顾倾人城，再顾倾人国。</br>
宁不知倾城与倾国，<span id="test2">佳人</span>难再得。</br>
</div>
</body>

inline--行内元素的更多相关文章

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

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

  2. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  3. html：块级元素和行内元素的特点

    display:block: 块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理. 块级元素width.height.padding.mar ...

  4. 前端css之文本操作及块级元素和行内元素

    1.文本操作 1.1文本颜色(color) 颜色指定方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如:  red 1.2水平对齐方式 ...

  5. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  6. CSS中的块级元素（block）与行内元素（inline）

    css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...

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

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

  8. 块级元素和行内元素的区别 (block vs. inline)

    块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了w ...

  9. 行内元素(inline标签)设置了行高为什么不生效，还是表现为父盒子的行高？行内元素行高问题终极解释

    最近在看张鑫旭大佬的<css世界>,读到5.2.4  内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...

  10. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

随机推荐

  1. Redis初探

    Redis如今已经成为Web开发社区中最火热的内存数据库之一,而他的诞生距离现在不过才6年的时间,随着Web2.0的蓬勃发展,网站数据快速增长,对高性能读写的需求也越来越多,再加上半结构化的数据比重逐 ...

  2. php接口

    如果要继承多个类的方法规范,用接口,因为抽象类只能继承一个: 如果要共享一个方法体内容,用抽象类: <?php //接口是为了规范实现它的子类,以达到统一的目的 //接口不能被实例化 inter ...

  3. ActiveMQ初体验(转)

    转载地址:http://www.cnblogs.com/diorlv/p/3328712.html 做了修改 首先介绍下MQ,MQ英文名MessageQueue,中文名也就是大家用的消息队列,干嘛用的 ...

  4. CentOS7 FTP服务搭建（虚拟用户访问FTP服务）

    概述 最近在搞Oracle在Linux系统下集群,针对Linux系统,笔人也是一片空白.Liunx外部文件的传输,避免不了使用FTP服务,所以现在就整理下,CentOS7环境下,FTP服务的搭建.FT ...

  5. [C++11][算法][穷举]输出背包问题的所有可满足解

    关于背包问题的题目,前人之述备矣,这里只讨论实现 输入: n ca w_1 v_1 w_2 v_2 ... w_n v_n 其中,n是物品总数,ca是背包大小,w_n是第n个物品的重量,v_n是第n个 ...

  6. 虚拟机（VMware12 pro）安装Mac OS 10.10

    下载VMware12pro,Mac OS 10.10.ios,虚拟机破解: 在虚拟机中创建新虚拟机://http://cdnnn.07net01.com/linux/2016/01/1130384.h ...

  7. mysql在线修改表结构大数据表的风险与解决办法归纳

    整理这篇文章的缘由: 互联网应用会频繁加功能,修改需求.那么表结构也会经常修改,加字段,加索引.在线直接在生产环境的表中修改表结构,对用户使用网站是有影响. 以前我一直为这个问题头痛.当然那个时候不需 ...

  8. java 写一个"HelloJavaWorld你好世界"输出到操作系统文件Hello.txt文件中

    package com.beiwo.homework; import java.io.File; import java.io.FileOutputStream; import java.io.IOE ...

  9. c语言完成宽带拨号

    学校的网络每次开机都需要手动登陆,于是用c写了一个自动登陆的小程序... 程序功能超级简单...只是懒得每次都登陆... PS:代码功能具体没有测试...我自己用的是python #include & ...

  10. [转载]C++堆栈的入门学习

    申明:   转自    http://www.cnblogs.com/pengshao/archive/2011/12/26/2301461.html 头文件stackDemo.h #pragma o ...