规避脱标流：

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. Spring 进行junit单元测试时，出现method ‘initializationError’ 错误

    首先检查一下所有的方法是否为public 然后看是否有commons-logging这个日志包

  2. JSOI最大值 （线段树）

    change 单点修改 query 区间最值 Program XJOI2321; ; ..maxn*] of longint; i,m,n,ans,p,x:longint; ch:char; func ...

  3. [codevs 1183][泥泞的道路（二分+spfa）

    题目:http://dev.codevs.cn/problem/1183/ 分析:这个和最优比率生成树很像,都可以二分答案的,只不过判定方面一个是求是否有最短路径,一个是求是否有生成树.假设等待判定的 ...

  4. JAVA和C语言的区别

    java语言和c语言的区别:                                      1 un 公司推出的Java 是面向对象程序设计语言,其适用于Internet 应用的开发,称为 ...

  5. Eclipse创建Maven多模块工程

    一.创建父项目 [New]->[Maven Project] 在弹出界面中选择[Create a simple project...] 二.创建子项目 选中刚建的父项目,在弹出菜单中点击[New ...

  6. Cocos2d-X中的菜单

    在Cocos2d-X实现显示菜单的方式比較特殊,首先须要使用CCMenu创建一个菜单,然后使用CCMenuItem创建一个菜单项,实际上程序中显示的菜单是使用CCMenu和CCMenuItemFont ...

  7. Android SwipeToDismiss：左滑/右滑删除ListView条目Item

     <Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(githu ...

  8. Java程序执行超时——Future接口介绍

    在Java中,如果需要设定代码执行的最长时间,即超时,可以用Java线程池ExecutorService类配合Future接口来实现. Future接口是Java标准API的一部分,在java.uti ...

  9. 浅析Netty原理

  10. openStack调试