行内替换元素

替换元素比如图片的高度比line-height大,并不会影响整个文字段落的line-height,会让有图片那一行框的高度可以容纳这个图片。

这个图片依然有一个line-height,和在一起的行内元素一样,因为垂直对齐vertical-align值为百分比时要在这个基础上计算。

* * *

增加框属性

替换元素的内容区包括,元素的内外边距及边框。会影响当前行的行框高。

margin可以为负值,负边距是挤入其他行的唯一方法。

* * *

替换元素和基线

替换元素位于基线之上。

这样的方式造成的问题:
表格单元的图片,单元里没有其他内容,图片还是会在基线之上布局。但是在火狐上测试了并不会。另一个问题,行内替换元素margin-bottom设置成负数的时候,和一般情况,将下面的部分往上拉不同。因为行内框比内容区要高,因为行内框位于基线上提高了。

CSS权威指南 - 基础视觉格式化 3的更多相关文章

  1. CSS权威指南 - 基础视觉格式化 2

    行内元素 em a 非替换元素 img 替换元素 两者在内联内容处理方式不一样. inline有时候被翻译成内联,比如inline content,有时候被翻译成行内 inline box. 行布局 ...

  2. css权威指南-基本视觉格式化(水平与垂直)

    1.基本概念     (1)正常流:是指西方语言文本从左向右,从上向下显示.如果要让一个元素不在正常流中国,唯一的办法                     就是使之成为浮动或定位元素.     ( ...

  3. CSS权威指南 - 基本视觉格式化 4

    改变元素显示 没有讨论与表格相关的.列表list-item的值.之后讨论. 改变显示角色 显示为块级元素 将一串链接(行内元素)改变垂直放置,若有如下一连串的链接: <div id=" ...

  4. CSS权威指南 - 基本视觉格式化 1

    定位 定位的想法很简单元素框相对于正常位置出现在哪里. 定位:static,相对, 绝对, fixed, 继承 static就是默认的位置 相对就是相对于默认位置的偏移.原来的static定位位置依然 ...

  5. 《CSS权威指南》基础复习+查漏补缺

    前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...

  6. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  7. CSS权威指南 - 层叠

    CSS权威指南 第三章结构与层叠 - 层叠 按权重及来源排序 1. Reader important declarations 2. Author important declarations 3. ...

  8. css权威指南读书笔记-第10章浮动和定位

    这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...

  9. css权威指南读书笔记

    今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...

随机推荐

  1. Python Web 开发的十个框架【转载】

    Python 是一门动态.面向对象语言.其最初就是作为一门面向对象语言设计的,并且在后期又加入了一些更高级的特性.除了语言本身的设计目的之外,Python标准 库也是值得大家称赞的,Python甚至还 ...

  2. vs 颜色设置

    工具-选项-字体和颜色:在项背景点击自定义-色调85 饱和度123 亮度205, 字体则是选择Calibri,个人认为看起来非常舒服.前景字体我选择了偏紫色,会很搭配背景浅绿色以及不会和关键字颜色搞混 ...

  3. MFC 打开文件夹 调用其他程序 打开文件

    ShellExecute(NULL,TEXT("OPEN"),要打开的文件的路径,NULL,NULL,SW_SHOWNORMAL); ShellExecute(NULL, &quo ...

  4. iOS学习05C语言函数

    本次主要是学习和理解函数,函数树状图如下: 1.函数的声明和定义 函数定义的四要素分别为: 返回值类型 :函数的结果值类型,函数不能返回数组. 指定返回类型是void类型说明函数没有返回值. 函数名 ...

  5. ccc tiledmap 获取元素属性

    cc.Class({ extends: cc.Component, properties: { elementLable: { default: null, type : cc.Label }, ma ...

  6. Codeforces Round #209 (Div. 2) B. Permutation

    解题思路: 如果序列a是单调递增的,则序列为1,2,..... 2n,则将给出的式子化简得Σ(a2i - a2i-1) = n 如果序列a是单调递减的,则序列为2n,.........2, 1,则将给 ...

  7. [深入浅出Windows 10]布局原理

    5.2 布局原理 很多时候在编写程序界面的时候都会忽略了应用布局的重要性,仅仅只是把布局看作是对UI元素的排列,只要能实现布局的效果就可以了,但是在实际的产品开发中这是远远不够的,你可能面临要实现的布 ...

  8. js,html,css注释大集合

    1.js注释: 单行注释,在注释内容前加符号 “//” <script type="text/javascript"> document.write("单行注 ...

  9. SRM 615 DIV1 500

    TC 都615了...时间过的真快啊. 第一次做出500分,心情还是很激动的,虽然看了很久的题解,TC官网上的题解,很详细,但是英语的...我搜了搜,发现一份日语的...好吧,我还是看看英语的吧... ...

  10. 纪念逝去的岁月——C/C++快速排序

    快速排序 代码 #include <stdio.h> void printList(int iList[], int iLen) { ; ; i < iLen; i++) { pri ...