20181207_Second_小结
1. 上下 200*200 盒子的重叠,切记用 absolute 绝对定位 为最佳解决方案
2. 移动端多使用 粘连布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title> <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta name="viewport"
content="user-scalable=no,
width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0"/> <style rel="stylesheet" type="text/css">
html, body, div {
margin: 0;
padding: 0;
} html, body {
width: 100%;
height: 100%; /* 参照屏幕区域的高 */
min-width: 600px;
overflow: hidden;
} #wrap {
width: 100%;
min-height: 100%; // 使 footer 始终在屏幕的底部 background: cadetblue;
} #content {
width: 100%; padding-bottom: 50px; font-size: 14px;
background: darkgrey;
} #footer { // 必须放在 wrap 的外面
width: 100%;
height: 50px; margin-top: -50px; background: chocolate;
text-align: center;
line-height: 50px;
} </style>
</head> <body> <!-- 模拟屏幕区域 -->
<div id="wrap">
<!-- 内容区域 -->
<div id="content"></div>
</div> <!-- 底部区域 -->
<div id="footer"></div>
</body>
</html>
3. 浏览器有 两个 滚动条
- 单独给 html 或者 body 加 overflow: scroll; 都会作用在 document 上,生成一个滚动条
- 同时给 html、body 加 overflow: scroll; 会出现两个滚动条
- html 的 overflow: scroll; 会作用于 document
- body 的 overflow: scroll; 会作用于 body
4. 在子元素浮动时,解决父元素高度塌陷
(1) 给父元素设置固定 height
(2) 使 父元素 开启 BFC
①父元素 overflow: hidden;
② 父元素 也 浮动 float
③ 绝对定位 position: absolute;
④ 固定定位 position: fixed;
IE6 开启 BFC : zoom: 1;
(3) 使用 块元素 隔离 父、子元素
⑤ 添加一个换行
<div id="wrap">
<div id="box"></div>
<br clear="all">
</div>
⑥ 添加一个空的 <div> 清除浮动 clear: both;
⑦ 伪元素 before 转换为 块
.clearfix:after { /* 伪元素默认是 inline 行内元素 */
content:""; /* 充当父元素的最后一个子元素,默认是 inline 行内元素, 相当一个 <span></span> */
display: block; /* 将 伪元素设置为 block 块级元素 */
clear: both;
}
5. 初始包含块
根元素的包含块 // 大多数情况 <html>就是根元素
初始包含块 由用户代理建立
大多数浏览器中,初始包含块就是一个视窗大小的矩形,但不等同于视窗 // 视窗就是浏览器窗口
- 对于 非根元素 ,
- 若 position: relative/static,包含块是最近的行内块祖先元素的 内容边界 构成
- 若 position: relative/absolue/fixed,包含块是最近的开启了定位的祖先元素
- 若没有祖先元素,则元素的包含块为初始包含块 <html>
20181207_Second_小结的更多相关文章
- 从零开始编写自己的C#框架(26)——小结
一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...
- Python自然语言处理工具小结
Python自然语言处理工具小结 作者:白宁超 2016年11月21日21:45:26 目录 [Python NLP]干货!详述Python NLTK下如何使用stanford NLP工具包(1) [ ...
- java单向加密算法小结(2)--MD5哈希算法
上一篇文章整理了Base64算法的相关知识,严格来说,Base64只能算是一种编码方式而非加密算法,这一篇要说的MD5,其实也不算是加密算法,而是一种哈希算法,即将目标文本转化为固定长度,不可逆的字符 ...
- iOS--->微信支付小结
iOS--->微信支付小结 说起支付,除了支付宝支付之外,微信支付也是我们三方支付中最重要的方式之一,承接上面总结的支付宝,接下来把微信支付也总结了一下 ***那么首先还是由公司去创建并申请使用 ...
- iOS 之UITextFiled/UITextView小结
一:编辑被键盘遮挡的问题 参考自:http://blog.csdn.net/windkisshao/article/details/21398521 1.自定方法 ,用于移动视图 -(void)mov ...
- K近邻法(KNN)原理小结
K近邻法(k-nearst neighbors,KNN)是一种很基本的机器学习方法了,在我们平常的生活中也会不自主的应用.比如,我们判断一个人的人品,只需要观察他来往最密切的几个人的人品好坏就可以得出 ...
- scikit-learn随机森林调参小结
在Bagging与随机森林算法原理小结中,我们对随机森林(Random Forest, 以下简称RF)的原理做了总结.本文就从实践的角度对RF做一个总结.重点讲述scikit-learn中RF的调参注 ...
- Bagging与随机森林算法原理小结
在集成学习原理小结中,我们讲到了集成学习有两个流派,一个是boosting派系,它的特点是各个弱学习器之间有依赖关系.另一种是bagging流派,它的特点是各个弱学习器之间没有依赖关系,可以并行拟合. ...
- scikit-learn 梯度提升树(GBDT)调参小结
在梯度提升树(GBDT)原理小结中,我们对GBDT的原理做了总结,本文我们就从scikit-learn里GBDT的类库使用方法作一个总结,主要会关注调参中的一些要点. 1. scikit-learn ...
随机推荐
- 第十节:数据批注(DataAnnotationModel)和自定义验证(包括Model级别的验证)
一. 简介 写完上一个章节MVC中的常用特性,迫不及待将该系列补全,该章节主要介绍数据批注(也叫:注解). 一听[数据批注],好高大上的名字,但仔细一看,它们其实是[System.ComponentM ...
- 第二十三节: EF性能篇(三)之基于开源组件 Z.EntityFrameWork.Plus.EF6解决EF性能问题
一. 开篇说明 EF的性能问题一直以来经常被人所吐槽,究其原因在于“复杂的操作在生成SQL阶段耗时长,且执行效率不高”,但并不是没有办法解决,从EF本身举几个简单的优化例子: ①:如果仅是查询数据,并 ...
- [再寄小读者之数学篇](2014-06-23 二阶导数估计 [中国科学技术大学2013年高等数学B 考研试题])
设 $f(x)$ 二阶连续可导, $f(0)=f(1)=0$, $\dps{\max_{0\leq x\leq 1}f(x)=2}$. 证明: $$\bex \min_{0\leq x\leq 1}f ...
- Python 官方中文教程(简)
Python 官方教程 前言 这是一次系统学习Python官方教程的学习笔记 整个教程一共16章, 在学习过程中记录自己不知道的和一些重要的知识, 水平有限, 请指正. Python3.7 官方教程. ...
- sass 工具库
github : https://github.com/uustoboy/base_mixins ( 有坑慎用 ) 项目截图: _base_mixins.scss 混合宏的引入文件; _setting ...
- Python 爬虫 JD商品-scrapy+requests
目标站点需求分析 JD商品信息抓取 需求信息字段 涉及的库 scrapy, requests,re lxml 获取单页源码 解析单页源码 获取总页数 获取商品url 解析商品信息 保存本地文件 保存m ...
- java集合(list,set,map)
集合 集合与数组 数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用. ...
- 还在期待安卓9.0吗?Android 10.0要来了
目前,美国 Google公司的 AndroidP (安卓9.0),已经正式全面推出有几个多月了.众多手机品牌厂商也都在积极的进行更新适配 Android 9.0 系统(修改UI界面也算是二次开发,嗯) ...
- vue 使用swiper的一些问题(页面渲染问题)
//Swiper上下滚动初始化 swiper_init(){ this.$nextTick(function(){ var mySwiper = new Swiper ('.swiper-contai ...
- Elasticsearch先聚合再按时间排序返回需要的字段
{ "query": { "bool": { "must": [ { "term": { "area_code ...