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 ...
随机推荐
- 【Eclipse】Eclipse 快捷键
Eclipse 快捷键 关于快捷键 Eclipse 的很多操作都提供了快捷键功能,我们可以通过键盘就能很好的控制 Eclipse 各个功能: 使用快捷键关联菜单或菜单项 使用快捷键关联对话窗口或视图或 ...
- Nginx 重写规则指南
作者:运维生存时间 - 默北 链接:www.ttlsa.com/nginx/nginx-rewriting-rules-guide/ 当运维遇到要重写情况时,往往是要程序员把重写规则写好后,发给你,你 ...
- Oops, 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine error
环境: Win7 64位 + VS2005 + Office2013 64位 现象:程序为一个Excel导入程序,导入时报「'Microsoft.ACE.OLEDB.12.0' provider is ...
- android 视频开发2分之1（仿美拍，糗百）
近期比較忙,非常久没更新博客,今天我们仿一个美拍或者糗事百科的录像功能. 首先确认步奏: 1.打开摄像头: 2.開始录制: 3.支持分段录制,并支持分段删除: 4.把分段录制的视频进行合并: 不说废话 ...
- FTP用户-禁止登录系统
OS是Ubuntu 11.10. 1. which nologin #/usr/sbin/nologin 2. vim /etc/shells #在该文件后添加/usr/sbin/nolo ...
- linux 下载 图片
linux curl 下载图片 l=[] with open('ee.html','r',encoding='utf-8') as fr: for i in fr: ii=i.split('&qu ...
- linux 设备树及节点引用【转】
本文转载自:http://blog.csdn.net/KjfureOne/article/details/51972854 1.ARM Linux社区为什么要引入设备树 Linux之父Linus To ...
- remove namespace from xml config file
从xml配置文件中移除命令空间 https://stackoverflow.com/questions/987135/how-to-remove-all-namespaces-from-xml-wit ...
- 【POJ 1995】 Raising Modulo Numbers
[题目链接] http://poj.org/problem?id=1995 [算法] 快速幂 [代码] #include <algorithm> #include <bitset&g ...
- poj2262 Goldbach's Conjecture——筛素数
题目:http://poj.org/problem?id=2262 水水更健康~ 代码如下: #include<iostream> #include<cstdio> #incl ...