行内替换元素

替换元素比如图片的高度比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. AngularJS 指令(使浏览器认识自己定义的标签)

    对于angular js还有其强大之处,可以利用angular js的指令来自定义许多标签.下面是一个实例: 自定一个名为hello标签,视图如下: <div ng-app="myAp ...

  2. Spring Boot 集成MyBatis

    http://blog.csdn.net/isea533/article/details/50359390

  3. 如何解决在Ue4编辑器中查看中文注释为乱码的情况

    一般人都会在自己定义的函数后面添加注释,Ue4会在蓝图编辑器中显示这些注释,这是一个相当棒的设定. 但是如果这些注释是中文的话,在蓝图编辑器中就会显示乱码. 如何解决呢? 只需要把你的文件用UTF-8 ...

  4. Git分支操作

    1.创建分支 git branch <分支名> 2.切换分支 git checkout <分支名> 该语句和上一个语句可以和起来用一个语句表示: git checkout -b ...

  5. mark元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. POJ3680 Intervals(最小费用最大流)

    选择若干条线段使权值最大,并且点覆盖次数不超过k. 建图如下:vs到0建立容量为k费用为0的边:坐标终点到vt连接一条容量为k费用为0的边:对于每两个相邻坐标连接一条容量为INF费用为0的边:对于线段 ...

  7. Java类加载

    类的生命周期是: 在一个类编译完成之后,下一步就需要开始使用类,如果要使用一个类,肯定离不开JVM.在程序执行中JVM通过装载,链接,初始化这3个步骤完成. 类的装载是通过类加载器完成的,加载器将.c ...

  8. BZOJ4584 : [Apio2016]赛艇

    首先将值域离散化成$O(n)$个连续段. 设$f[i][j][k]$表示第$i$个学校派出的数量在第$j$个连续段,在第$j$个连续段一共有$k$个学校的方案数.用组合数以及前缀和转移即可. 时间复杂 ...

  9. Redis Java API

    package cn.ac.iscas.pebble.dc.redispool; import java.io.File; import java.io.FileOutputStream; impor ...

  10. BZOJ3226[Sdoi2008]校门外的区间 题解

    题目大意: 有5种运算维护集合S(S初始为空)并最终输出S. 5种运算如下: U T  S∪T I T S∩T D T  S-T C T T-S S T S⊕T 基本集合运算如下: A∪B {x : ...