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 ...
随机推荐
- [bzoj1612][Usaco2008 Jan]Cow Contest奶牛的比赛_dfs
Cow Contest奶牛的比赛 bzoj-1612 Usaco-2008 Jan 题目大意:题目链接. 注释:略. 想法: 我们对于每个点dfs,看一下比这个点大的点加上比这个点小的点是否是n-1即 ...
- Mcrouter-基于Memcached协议的缓存层流量管理工具（Memcached集群的另一个选择）（转）
Mcrouter 是一个基于Memcached协议的路由器,它是 Facebook缓存架构的核心组件,在峰值的时候,它能够处理每秒50亿次的请求.近日,Facebook开放了Mcrouter的源代码, ...
- Oracle RAC load blance
首先声明 本文基本是阅读 大话RAC 后的笔记.OK, 进入正题. Oracle 10g RAC中采取两种方式提供负载均衡.第一种是connection blance.在用户连接的时候,根据随机算法把 ...
- php 生成订单号
最近在练手一个订单提交的小项目,需要用到生成订单号,网上找了下,觉得这个最好. function build_order_no(){ return date('Ymd').substr(implode ...
- QT如何修改字符编码格式
编辑-Select Encoding,然后在弹出窗口中修改字符编码.
- 【翻译自mos文章】rman 标准版和企业版的兼容性
rman 标准版和企业版的兼容性 来源于: RMAN Standard and Enterprise Edition Compatibility (文档 ID 730193.1) 适用于: Oracl ...
- 行香子·过尽千山
<行香子·过尽千山> 文/天地尘埃2020 过尽千山.水瘦山寒. 思来路.地咽天玄. 千金散尽,欲补穹天. 但孟春暖,仲春炫.暮春喧. 三皇五帝,魏武挥鞭. 朴无欲.衡玉玑璿. 金生丽水, ...
- Android实现一个自己定义相机的界面
我们先实现拍照button的圆形效果哈.Android开发中,当然能够找美工人员设计图片,然后直接拿进来.只是我们能够自己写代码实现这个效果哈.最经常使用的的是用layout-list实现图片的叠加, ...
- Java设计模式菜鸟系列(一)策略模式建模与实现
转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/39721563 今天開始咱们来谈谈Java设计模式. 这里会结合uml图形来解说,有对uml ...
- Linux下的应用程序开机自启动
Linux下的应用程序开机自启动,目前我知道的有2种: 1.将启动语句写到/etc/rc.local 2.在init.d放置启动脚本 第一种,很简单,直接写进去就行,比如说: /db/mongodb/ ...