规避脱标流：

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. HBase的集群搭建

    前提:已经安装过jdk,HDFS集群和zookeeper,我的集群规划见HDFS的文章中 1.在1上安装配置hbase 下载:http://mirror.bit.edu.cn/apache/hbase ...

  2. 20、Java并发性和多线程-Slipped Conditions

    以下内容转自http://ifeve.com/slipped-conditions/: 所谓Slipped conditions,就是说, 从一个线程检查某一特定条件到该线程操作此条件期间,这个条件已 ...

  3. fast recovery area

    First of all, the version of my enviroment is Oracle 11.0.2.3. The fast recovery area used to be cal ...

  4. Spring mvc 时间转换

    http://www.cnblogs.com/ssslinppp/p/4600043.html

  5. Linux下C++访问MySQL数据库

    由于想要开始了解并学习用LAMP进行web开发,所以昨晚我在Fedora上安装了MySQL,学习了MySQL的几个常用命令.想着在学习进行web开发(PHP访问数据库)之前,先用我熟悉的C++连接数据 ...

  6. css高级：font-size

    body{ font:62.5%/1.6em "Lucida Grande",Verdana,Geneva,Helvetica,Arial,sansserif; }//font-s ...

  7. Scroller的应用--滑屏实现

    1.Scroller源代码分析 以下是对Scroller源代码的分析,并附有源代码.例如以下: package android.widget; import android.content.Conte ...

  8. 一段shell脚本

    //根据入参增加nginx反向代理#!/bin/bash#set -x log_path="./proc/logs/shellExecute.log"log_path_back=& ...

  9. Mysql的简单使用（一）

    如果你会查询这些相关的问题,说明你是一个正在或者准备从事IT的程序猿,对于一个程序猿而言,不会使用linux系统的程序猿不是一好的程序猿哦!因为windows有时候真的让人很抓狂,而本人也相信没有什么 ...

  10. Scala 获取当前时间

    def NowDate(): String = { val now: Date = new Date() val dateFormat: SimpleDateFormat = new SimpleDa ...