h5笔记(实战)
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里的内容所占高度会变成设置的行高
<body>
<span style="background-color: red;line-height: 200px;">test1</span>
<hr>
<span style="background-color: red;line-height: 200px;">test2</span> </body>
上例中span的红色区域高度不会随着行高变高
但是行间距会是200px
7.垂直对齐(vertical-align)对block元素无效,只对inline和inline-block有效
在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式(内容可以是block元素)
8.line-height要对父元素设置,才能让自己垂直居中
这样可以让img垂直居中(height要不要都无所谓):
<div style="height: 200px; line-height: 200px;"> <img src="./src/assets/billicon.png"> </div>
这样不可以,对img的设置,会让img里面的元素垂直居中,但是img里面不能放元素,所以等于没用:
图标和文字组成的子div在粉色的父div中垂直居中:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Document</title>
</head> <body>
<div class="container">
<div class="row" style="background-color: pink">
<div class="col-xs-6" style="line-height: 100px">
<img src="./src/assets/billicon.png" width="50px" height="50px">
<span>我的账单</span>
</div>
<div class="col-xs-6" style="line-height: 100px">
<img src="./src/assets/usershare.png" width="50px" height="50px">
<span>点赞分享</span>
</div>
</div>
</div>
</body> </html>
由于css的继承性,line-height也可以设置在row上面,这样两个col都继承了row的行高
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div style="width:200px;height:200px;border:solid blue; line-height: 200px;">
<div style="width:100px;height:100px;margin: auto; background: red;">
</div>
</div> </html>
要在这种情况下实现垂直居中,必须参照:
h5笔记(实战)的更多相关文章
- NGUI 学习笔记实战之二——商城数据绑定(Ndata)
上次笔记实现了游戏商城的UI界面,没有实现动态数据绑定,所以是远远不够的.今天采用NData来做一个商城. 如果你之前没看过,可以参考上一篇博客 NGUI 学习笔记实战——制作商城UI界面 ht ...
- 应用zip压缩的javascript以及Egret H5游戏实战
代码地址如下:http://www.demodashi.com/demo/11039.html 主要起因是策划对最快进入登录界面有硬性要求(3秒),那么最开始加载的文件越小越好.对H5的游戏程序进行压 ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...
- NGUI 学习笔记实战——制作商城UI界面
http://www.cnblogs.com/chongxin/p/3876575.html Unity3D的uGUI听说最近4.6即将推出,但是目前NGUI等UI插件大行其道并且已经非常成熟,所以我 ...
- h5页面实战——与andriod和ios的交互
首先需要我们h5页面需要做一些匹配.比如:如何判断当前手机是andriod还是ios, andriod攻城狮和ios工程师,一般会定义事件的方法.我们套用他们方法就可以了. 那么为什么我要写这个随笔呢 ...
- h5笔记02
Markdown 用普通文本描述富文本的语法 扩展名md,markdown 链接:http://wowubuntu.com/markdown/ 代表h标签 没有符号的代表段落 -符号代表无序列表 1. ...
- H5笔记周记
9.4 一.介绍浏览器 1.title 主题,题目 2.url 网址 3.body 网站的内容 4.html 语言,超文本标记语言 二.文件介绍 三.标签的结构 (一些快捷键:Ctrl+s 保存 ...
- 钉钉h5项目实战|仿钉钉聊天|h5移动端钉钉案例
最近一直着手开发h5仿钉钉项目,使用到了h5+css3+zepto+wcPop2等技术进行开发,实现了消息.表情.动图发送,仿QQ多人拼合图像,可以选择本地图片,并可以图片.视频预览,仿微信发红包及打 ...
随机推荐
- form get
<form action=""> <input type="text" name="query" id="&qu ...
- 巨坑练习题!!!—— Car的旅行线路
在看题目之前,请童鞋们做好心理准备╮(╯▽╰)╭ 题目描述 又到暑假了,住在城市A的Car想和朋友一起去城市B旅游. 她知道每个城市都有四个飞机场,分别位于一个矩形的四个顶点上,同一个城市中两个机场之 ...
- [校内训练19_09_05]ca
题意 对于任意1 ≤k≤N,求有多少个左右区分的恰有k个叶子节点的二叉树,满足对于每个节点要么没有叶子节点要么有两个节点,同时不存在一个叶子节点,使得根到它的路径上有不少于M条向左的边. 答案对998 ...
- [计算几何+图论]doge
题意 在平面直角坐标系上,你有一只doge在原点处.doge被绳子拴住了,绳子不会打结,没有弹性(但很柔软),并且长度为L.平面上有一些目标,因此你的doge会按照顺序去捡起它们,但是doge只能走直 ...
- Matplotlib API汉化 Pyplot API
https://www.cnblogs.com/chenxygx/p/9554443.html
- mysql创建流水号
mysql数据库创建流水号 CREATE TRIGGER saledetail_id BEFORE INSERT ON saledetail FOR EACH ROW BEGIN declare n ...
- C语言作业12—学期总结
一.我学到的内容 二.我的作业及收获 我的作业: 第一次作业 第二次作业 第三次作业 第四次作业 第五次作业 第六次作业 第七次作业 第八次作业 第九次作业 第十次作业 第十一次作业 我的收获: 转眼 ...
- nmap详解之基础概述
概述 nmap是一个网络探测和安全扫描程序,系统管理者和个人可以使用这个软件扫描大型的网络,获取那台主机正在运行以及提供什么服务等信息.nmap支持很多扫描技术,例如:UDP.TCP connect( ...
- systemctl中添加mysql服务
由于mysql的版本更新,许多术语有了新含义,所以需要特别指出,mysqld.service 等价于mysqld vim /usr/lib/systemd/system/mysqld.service ...
- Idea-LifecycleException when deploying
案例 今天第一次用idea构建项目,出现了如下问题: FAIL - Application at context path /myWebApp could not be started FAIL - ...