1.margin:auto 水平居中只对block有效，对inline和inline-block都无效

2.text-align:center 内容居中对block和inline-block有效，对inline无效

3.水平内外边距对inline，inline-block，block元素都有效，垂直内外边距只对block和inline-block有效

4.内联元素使用clear没有效果，clear只支持块元素

内联元素本身可以float

5.块级元素，postion定义为absolute，没有定义偏移，它所在的位置也会被后面的元素覆盖

块级元素，postion定义为absolute，它的实际宽度会由内容决定（类似inline，但是其他属性，比如换行，可定义宽高跟    block元素一样）(块级浮动元素也是这样)

内联元素也可以定义postion为absolute，此时内联元素可以定义宽高

下例中，第一个span定义宽度有效，第二个span定义的宽度无效，连个span会重叠

<body>
<div>It works!</div>

<span style="position: absolute;width: 300px;">fdafsdf</span>
<span style="width: 300px;">111111</span>
</body>

6.span设置行高，并不会使span的高度变化，但是span里的内容所占高度会变成设置的行高

  1. <body>
  2. 	<span style="background-color: red;line-height: 200px;">test1</span>
  3. 	<hr>
  4. 	<span style="background-color: red;line-height: 200px;">test2</span>
  5.  
  6. </body>　　

上例中span的红色区域高度不会随着行高变高

但是行间距会是200px

7.垂直对齐(vertical-align)对block元素无效，只对inline和inline-block有效

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式（内容可以是block元素）

8.line-height要对父元素设置，才能让自己垂直居中

这样可以让img垂直居中（height要不要都无所谓）：

  1. <div style="height: 200px; line-height: 200px;">
  2.  
  3.         <img src="./src/assets/billicon.png">
  4.  
  5.     </div>

这样不可以，对img的设置，会让img里面的元素垂直居中，但是img里面不能放元素，所以等于没用：

<div>
<img src="./src/assets/billicon.png" style="line-height: 200px;">
</div>
 
这样可以，文字是span里面的东西：

<span style="line-height: 200px;"> fdsaf</span>
 
img放到span里面也可以，img是span里面的东西：
<span style="line-height: 200px;">
<img src="./src/assets/billicon.png">
</span>
 
9.
实现以下效果：
图标和文字组成的子div在粉色的父div中垂直居中：
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  9.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  10.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  11.     <title>Document</title>
  12. </head>
  13.  
  14. <body>
  15.     <div class="container">
  16.         <div class="row" style="background-color: pink">
  17.             <div class="col-xs-6" style="line-height: 100px">
  18.                 <img src="./src/assets/billicon.png" width="50px" height="50px">
  19.                 <span>我的账单</span>
  20.             </div>
  21.             <div class="col-xs-6" style="line-height: 100px">
  22.                 <img src="./src/assets/usershare.png" width="50px" height="50px">
  23.                 <span>点赞分享</span>
  24.             </div>
  25.         </div>
  26.     </div>
  27. </body>
  28.  
  29. </html>

由于css的继承性，line-height也可以设置在row上面，这样两个col都继承了row的行高

 
10.利用line-height只能让inline元素垂直居中（img是特殊的inline元素），并不能让设置了line-height的元素的block或inline-block子元素垂直居中，比如以下代码不能实现垂直居中：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12.     <div style="width:200px;height:200px;border:solid blue; line-height: 200px;">
  13.         <div style="width:100px;height:100px;margin: auto;  background: red;">
  14.         </div>
  15.     </div>
  16.  
  17. </html>

要在这种情况下实现垂直居中，必须参照：

https://www.cnblogs.com/cowboybusy/p/10531625.html

h5笔记(实战)的更多相关文章

  1. NGUI 学习笔记实战之二——商城数据绑定（Ndata）

    上次笔记实现了游戏商城的UI界面,没有实现动态数据绑定,所以是远远不够的.今天采用NData来做一个商城. 如果你之前没看过,可以参考上一篇博客   NGUI 学习笔记实战——制作商城UI界面  ht ...

  2. 应用zip压缩的javascript以及Egret H5游戏实战

    代码地址如下:http://www.demodashi.com/demo/11039.html 主要起因是策划对最快进入登录界面有硬性要求(3秒),那么最开始加载的文件越小越好.对H5的游戏程序进行压 ...

  3. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  4. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  5. NGUI 学习笔记实战——制作商城UI界面

    http://www.cnblogs.com/chongxin/p/3876575.html Unity3D的uGUI听说最近4.6即将推出,但是目前NGUI等UI插件大行其道并且已经非常成熟,所以我 ...

  6. h5页面实战——与andriod和ios的交互

    首先需要我们h5页面需要做一些匹配.比如:如何判断当前手机是andriod还是ios, andriod攻城狮和ios工程师,一般会定义事件的方法.我们套用他们方法就可以了. 那么为什么我要写这个随笔呢 ...

  7. h5笔记02

    Markdown 用普通文本描述富文本的语法 扩展名md,markdown 链接:http://wowubuntu.com/markdown/ 代表h标签 没有符号的代表段落 -符号代表无序列表 1. ...

  8. H5笔记周记

    9.4 一.介绍浏览器 1.title 主题,题目 2.url 网址  3.body 网站的内容 4.html 语言,超文本标记语言 二.文件介绍 三.标签的结构 (一些快捷键:Ctrl+s 保存   ...

  9. 钉钉h5项目实战|仿钉钉聊天|h5移动端钉钉案例

    最近一直着手开发h5仿钉钉项目,使用到了h5+css3+zepto+wcPop2等技术进行开发,实现了消息.表情.动图发送,仿QQ多人拼合图像,可以选择本地图片,并可以图片.视频预览,仿微信发红包及打 ...

随机推荐

  1. vue学习笔记1：el 与 data

    一.vue介绍 vue是目前三大主流框架之一(React.Angular.Vue) vue特点: 易用 灵活 高效 vue官网:官网链接 二,知识点 vue实例选项: el 注:不能 让el直接管理h ...

  2. 【译】如何使用Vue过渡效果来提升用户体验

    在Vue应用中添加过渡效果是一个可以使你的项目感觉更专业的简单方法.通过提升用户体验,可以使你的网站留住更多的用户以及提高转化率. 只需要简单的处理就可以获得巨大的回报,何乐而不为? 在这个指南中,我 ...

  3. 基于javaSwing的贪食蛇游戏

    这个项目时,是我好几年前写的了.但对刚入门,或者想瞧瞧java的图形的界面swing的同学,还是有点用处的. 在这推荐给你. 涉及技术点 swing,多线程,文件读写,多媒体文件播放等 游戏简介 该游 ...

  4. SpingMvc复杂参数传收总结

    上一篇文章[javaWeb传收参数方式总结]总结了简单传收参数,这一篇讲如何传收复杂参数,比如Long[] .User(bean里面包含List).User[].List.List<Map< ...

  5. 「雅礼集训 2017 Day2」棋盘游戏

    祝各位圣诞后快乐(逃) 题目传送门 分析: 首先棋盘上的路径构成的图是一张二分图 那么对于一个二分图,先求出最大匹配,先手如果走到关键匹配点,只要后手顺着匹配边走,由于不再会出现增广路径,所以走到最后 ...

  6. PyCharm2019.3.2专业版激活

    PyCharm2019.3.2专业版激活 Ryan 蚂蚁小黑  PyCharm 专业版激活 今天是除夕,在这阖家团圆的日子里,祝大家新春快乐,鼠年大吉,愿大家在新的一年里身体健康,万事如意! 新的一年 ...

  7. Day9-Python3基础-多线程、多进程

    1.进程.与线程区别 2.python GIL全局解释器锁 3.线程 语法 join 线程锁之Lock\Rlock\信号量 将线程变为守护进程 Event事件 queue队列 生产者消费者模型 Que ...

  8. 【阿里云IoT+YF3300】12.阿里云IoT Studio入门介绍

    阿里云IoT Studio是针对物联网场景提供的生产力工具,可覆盖各个物联网行业核心应用场景,帮助您高效经济地完成设备.服务及应用开发.物联网开发服务提供了移动可视化开发.Web可视化开发.服务开发与 ...

  9. 命令行下使用RAR和7-Zip压缩数据

    3.6.1 RAR Winrar的命令行模式程序在安装目录下的 rar.exe (打包压缩程序),unrar.exe(解压缩程序) WinRAR的常用参数如下: -a 添加文件到压缩文件 -k 锁定压 ...

  10. Jquery 替换全部字符

    item.replace('P','')   只会替换第一个'P'字符 item.replace(/P/gm,'') 替换全部'P'字符