规避脱标流：

1、尽量使用标准流。

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style>
  7.         .box1 {
  8.             width: 500px;
  9.             height: 200px;
  10.             background-color: aliceblue;
  11.         }
  12.  
  13.         .box2 {
  14.             width: 50px;
  15.             height: 40px;
  16.             background-color: red;
  17.             margin-left:auto;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="box1">
  23.         <div class="box2"></div>
  24.     </div>
  25. </body>
  26. </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. BP神经网络及其在教学质量评价中 的应用

    本文学习笔记是自己的理解,如有错误的地方,请大家指正批评.共同进步.谢谢! 之前的教学质量评价,仅仅是通过对教学指标的简单处理.如求平均值或人为的给出各指标的权值来加权求和,其评价结果带有非常大主观性 ...

  2. ios16--自定义控件1

    k控制器: // // XMGViewController.h #import <UIKit/UIKit.h> @interface XMGViewController : UIViewC ...

  3. Versioning with the Override and New Keywords (C# Programming Guide)

    The C# language is designed so that versioning between base and derived classes in different librari ...

  4. 让DIV在屏幕上下左右居中

    转自:http://blog.sina.com.cn/s/blog_65d41dff0100v0iz.html 其实解决的思路是这样的:首们需要position:absolute;绝对定位.而层的定位 ...

  5. bzoj 1601 灌水

    题目大意: 决定把水灌到n块农田,农田被数字1到n标记 把一块土地进行灌水有两种方法,从其他农田饮水,或者这块土地建造水库 建造一个水库需要花费wi,连接两块土地需要花费Pij. 计算所需的最少代价 ...

  6. P4111 [HEOI2015]小Z的房间 生成树计数

    这个题是生成树计数的裸题,中间构造基尔霍夫矩阵,然后构成行列式,再用高斯消元就行了.这里高斯消元有一些区别,交换两行行列式的值变号,且消元只能将一行的数 * k 之后加到别的行上. 剩下就没啥了... ...

  7. bzoj4082

    贪心+倍增 首先如果这个问题在序列上,好像可以按右端点排序,然后从起点开始向能到的最远的地方走. 但是环上不可以,因为随即一个起点可能不是最小的. 然后神思路来了:我们先将环展开倍增,再将区间按右端点 ...

  8. Datatable转换为Json 的方法

    /// <summary>         /// Datatable转换为Json         /// </summary>        /// <param n ...

  9. MySQL 1366错误解决办法

    MySQL 1366错误大致描述如下 SQL Error: 1366: Incorrect string value: "xE8xAFxA6xE7xBBx86-" for colu ...

  10. 【WIP】Ruby CSV文件操作

    创建: 2017/09/30                                                                                       ...