规避脱标流：

1、尽量使用标准流。

2、标准流解决不了的使用浮动。

3、浮动解决不了的使用定位。

问题解决：嵌套盒子在不使用定位的情况下定位到右上角

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        .box1 {

            width: 500px;

            height: 200px;

            background-color: aliceblue;

        }

        .box2 {

            width: 50px;

            height: 40px;

            background-color: red;

            margin-left:auto;

        }

    </style>

</head>

<body>

    <div class="box1">

        <div class="box2"></div>

    </div>

</body>

</html>

注释：margin-left:auto的意思是盒子往右边冲，冲不动了就停下了。

图片和文字垂直居中：

vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline与基线对齐。

CSS——规避脱标流和vertical-align的更多相关文章

  1. CSS 规避脱标之两种用法

    大家好,我是小强老师,今天讲解一小点知识哈 对比了才知道什么好 看不出,很漂亮吧! 有木有倾国倾城的美色. 呵呵,好多东西也是这样的,好的东西只有对比了才觉得好. 我们知道我们网页布局 有三模式.   ...

  2. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  3. 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例

    1  复习昨天知识 1.1 浮动  特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素   作 ...

  4. CSS---文档流布局 | 脱标-postion-zindex | 脱标-浮动

    一.css文档流布局概念 1.1,什么是标准文档流 1.2,标准文档流下有哪些微观现象 二.CSS---position属性 2.1,position:relative 2.2,position:fi ...

  5. H5 59-浮动元素的脱标

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

  6. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  7. HTML连载45-浮动元素脱标、排序规则、贴靠现象

    一.浮动元素脱标 1.什么是浮动元素脱标 脱标:脱离标准流. 当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样 2.浮动元素脱标之后有什么影响 如果前面一个元素浮动了,而后面的一个元 ...

  8. css标准文档流

    css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...

  9. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

随机推荐

  1. CodeForces 370C

    这道题其实是挺简单的.首先很容易发现最多人用的颜色的人数如果大于n/2,就肯定不能让全部人都成功戴上两只不同颜色的手套.反过来想,如果这个人数小于等于n/2又如何呢?的确,这就能让全部人都能戴上两只不 ...

  2. android获取年月日时分秒

    Calendar calendar=Calendar.getInstance(); //获取当前时间,作为图标的名字 String year=calendar.get(Calendar.YEAR)+& ...

  3. 这篇讲angular 的$q的讲得不错

    原文: https://segmentfault.com/a/1190000000402555 ---------------------------------------------------- ...

  4. 1.3－动态路由协议EIGRP②

    LAB3:Wildcard Mask in EIGRP (通过反掩码,控制运行EIGRP的接口的范围             作用:控制有哪些接口在运行EIGRP) ~~~~~~~~~~~~~~~~~ ...

  5. Ubuntu下用hadoop2.4搭建集群（伪分布式）

    要真正的学习hadoop,就必需要使用集群,可是对于普通开发人员来说,没有大规模的集群用来測试,所以仅仅能使用伪分布式了.以下介绍怎样搭建一个伪分布式集群. 为了节省时间和篇幅,前面一些步骤不再叙述. ...

  6. Java基础：初始化和清理

    转载请注明出处:jiq•钦's technical Blog (1) 初始化: 所以假设继承关系为:A导出B再导出C,在创建C对象的情况下的调用顺序是: * (1) A的静态域,B的静态域,C的静态域 ...

  7. 关于require.js的用法总结

    require.js就是将多个js文件集中化处理,在要运行的HTML文件里,写入<script data-main='js/main.js' src='js/require.js'>< ...

  8. cordova windows环境配置

    * 安装Cordova 1.cordova是利用nodeJS进行管理,所以要先下载nodeJS. 2. 打开命令窗口,输入:“npm install -g cordova”即可安装 3. 安装后,输入 ...

  9. Eclipse下单个文件中文乱码问题

    有时候用eclipse打开单个文件,会出现中文乱码问题. 这时可以点菜单栏 Edit -> Set Encoding,Other:UTF-8,通常可以解决问题.

  10. User32.dll详细介绍

    RegisterServiceProcess(ProcessID:Long,Type:Long) 该函数存在于Kernal32.dll中. Process指向进程的ID,Type表示是否向系统注册该进 ...