inline--行内元素
其实在网页中有看不见的基线，就像作业本上面的一行一行的线，但是我们看不见。
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--行内元素的更多相关文章
- block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
- CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- html：块级元素和行内元素的特点
display:block: 块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理. 块级元素width.height.padding.mar ...
- 前端css之文本操作及块级元素和行内元素
1.文本操作 1.1文本颜色(color) 颜色指定方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 1.2水平对齐方式 ...
- 【css】主要的块状元素(block element)和内联元素(inline element行内元素)
内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用 display可以强制转换行内元素和块状元素,还可以取消显示none 块元素(bloc ...
- CSS中的块级元素（block）与行内元素（inline）
css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- 块级元素和行内元素的区别 (block vs. inline)
块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了w ...
- 行内元素(inline标签)设置了行高为什么不生效，还是表现为父盒子的行高？行内元素行高问题终极解释
最近在看张鑫旭大佬的<css世界>,读到5.2.4 内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...
- CSS中定位和浮动对行内元素的宽高的影响
行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...
随机推荐
- 激活webstorm2016如何激活webstorm2016永久激活webstorm2016
没有那么麻烦,我这个方法是简单粗暴: 1.搜webstrom2016,最新的是2016.3 2.官方下载 3.断网,改本地时间,你打算用多久,就把本地时间往未来调多久 4.安装webstorm 5.一 ...
- 算法系列：kmp
作者: 阮一峰 日期: 2013年5月 1日 字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE",我想知道,里面是否包含另 ...
- JDK常用工具集——jps
该命令的作用是罗列出目标系统(target system)中所有具有访问权限到的Java进程. 一.命令简介: jps [option] [hostid] 二.参数说明: option ...
- [参考]wget下载整站
wget -m -e robots=off -U "Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.1.6) Gecko/200 ...
- 论SOA架构的几种主要开发方式
转: http://blog.csdn.net/chenleixing/article/details/44926955 面向服务架构soa以其独特的优势越来越受到企业的重视,它可以根据需求通过网络 ...
- Timer计时器
private Timer timer; timer.schedule(new TimerTask() { @Override public void run() { if (isStopedReco ...
- 注解@RequestMapping 的使用
1首先@RequestMapping 中的值,我们说请求方法l路径,请求url我们都知道怎么请求了,在第一节helloworld中, 我们先说我们先建一个类,RequestMappingTest 方法 ...
- [Leetcode] Decode Ways
A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' - ...
- Java关键字
Java关键字简介 类别 关键字 说明 访问控制 private 私有的 protected 受保护的 public 公共的 类.方法和变量修饰符 abstract 声明抽象 class 类 exte ...
- CF Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined)
1. Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) B. Batch Sort 暴力枚举,水 1.题意:n*m的数组, ...