CSS——规避脱标流和vertical-align
规避脱标流：
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的更多相关文章
- CSS 规避脱标之两种用法
大家好,我是小强老师,今天讲解一小点知识哈 对比了才知道什么好 看不出,很漂亮吧! 有木有倾国倾城的美色. 呵呵,好多东西也是这样的,好的东西只有对比了才觉得好. 我们知道我们网页布局 有三模式. ...
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
- 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动 特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素 作 ...
- CSS---文档流布局 | 脱标-postion-zindex | 脱标-浮动
一.css文档流布局概念 1.1,什么是标准文档流 1.2,标准文档流下有哪些微观现象 二.CSS---position属性 2.1,position:relative 2.2,position:fi ...
- H5 59-浮动元素的脱标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- HTML连载45-浮动元素脱标、排序规则、贴靠现象
一.浮动元素脱标 1.什么是浮动元素脱标 脱标:脱离标准流. 当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样 2.浮动元素脱标之后有什么影响 如果前面一个元素浮动了,而后面的一个元 ...
- css标准文档流
css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...
- 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
随机推荐
- A + B Problem Too
Problem Description This problem is also a A + B problem,but it has a little difference,you should d ...
- 《Spring in action》之装配Bean
创建应用对象之间协作关系的行为通常称为装配,这也是依赖注入的本质. Spring装配Bean的三种主要机制: 1.在XML中进行显示配置 2.在java中进行显示配置 3.隐式的bean发现机制和自动 ...
- ssh连接断开后 shell进程退出
问题描述:当SSH远程连接到服务器上,然后运行一个服务 ./catalina.sh start,然后把终端开闭(切断SSH连接)之后,发现该服务中断,导致网页无法访问. 解决方法:使用nohup命 ...
- TI C66x DSP 系统events及其应用 - 5.11（中断控制寄存器）
C66x DSP运行中断的简要流程: 1.使能了全局中断和子中断.假设硬件检測到中断发生,那么CPU就要跳转. 2.软件把CPU内部的A,B类寄存器的值等推入堆栈保存,把当前PC寄存器的值放入IRP寄 ...
- 22、Cocos2dx 3.0游戏开发找小三之音乐与音效：假如世界上没有了音乐，你的耳朵会孤单吗？
重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30485103 假如世界上没有了音乐,在森林里.我们听 ...
- Hadoop生态系统学习路线
主要介绍Hadoop家族产品,经常使用的项目包含Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Ambari, Chukwa.新添加 ...
- LeetCode 249. Group Shifted Strings （群组移位字符串）$
Given a string, we can "shift" each of its letter to its successive letter, for example: & ...
- 【Spark】Stage生成和Stage源代码浅析
引入 上一篇文章<DAGScheduler源代码浅析>中,介绍了handleJobSubmitted函数,它作为生成finalStage的重要函数存在.这一篇文章中,我将就DAGSched ...
- 【Codevs1288】埃及分数
Position: http://codevs.cn/problem/1288/ Description 在古埃及,人们使用单位分数的和(形如1/a的, a是自然数)表示一切有理数. 如:2/3=1/ ...
- ※归并排序（merge sort）
/** 归并排序:通常以递归的方式来实现,它反复将所处理的数组分成两半,并分别对这两半进行排序, 最后再把经过排序的数组归并在一起. */ 归并排序的伪代码实现: 将数组分为两半 对左半部分排序 对右 ...