HTML小知识点积累
1.怎样让heigth:100%起效?
有时候我们设置heigth:100%,想让当前控件铺满整个屏幕,可是非常少情况下这个属性能达到我们想要的效果,这是为什么呢?
而依据W3C的规范。百分比的高度在设定时须要依据这个元素的父元素容器的高度。所以,假设你把一个div的高度设定为height: 50%;。而它的父元素的高度是100px,那么。这个div的高度应该是50px。
那么,为什么没效果呢?
浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动栏出现)。或者你给整个页面设置一个绝对高度。
否则。浏览器就会简单的让内容往下堆砌。页面的高度根本就无需考虑。
由于页面并没有缺省的高度值。所以。当你让一个元素的高度设定为百分比高度时,无法依据获取父元素的高度,也就无法计算自己的高度。换句话说。父元素的高度仅仅是一个缺省值:height: auto;。当你要求浏览器依据这样一个缺省值来计算百分比高度时,仅仅能得到undefined的结果。也就是一个null值,浏览器不会对这个值有不论什么的反应。
解决方法就是把父级的元素中所有设为100%的高度,覆盖掉默认的auto
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
这样这个div的高度就会100%了
</p>
</div>
</body>
</html>
2.怎样使得一张图片铺满整个浏览器?
也就是图片当成整个网页的背景,那么仅仅须要以下css就能够实现了,当然前提,父级容器高度是大于或等于整个浏览器的
.bg{
width: 100%;
height: 100%;
background: center no-repeat;
/*使得图像最大化,能够覆盖住整个面板*/
background-size: cover;
/*绝对定位,否则图片不显示*/
position: absolute;
width: 100vw; // 这个设置容器宽度为浏览器宽度
height: 100vh; // 这个设置容器高度为浏览器高度
z-index: -999;
}
3.怎样让整个网页变成灰色?
实现以下CSS效果就可以
html { filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"grayscale\"><feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: gray; -webkit-filter: grayscale(1) }
4.bootstrap怎样做到居中?
由于block 没设定宽度是不能 margin auto 来居中的,一个简单的办法是
display: table
width: auto
margin-left: auto
margin-right: auto
或者直接从center标签
<center>
<button class="btn btn-success btn-lg btn-store">马上选择</button>
</center>
再或者指定class为center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
5.禁止小屏幕网页缩放
才開始学习前端的时候,server上传好的页面在手机端訪问总不是非常理想,后来知道是由于缩放的问题,手机端会默认依照大小比例进行缩放,所以手机端看起来非常小.解决方法就是禁止缩放.
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
6.将footer永远固定在底部
想永远固定在底部,肯定要使用绝对定位,那么就会要求页面的最小高度为整个浏览器屏幕高度,最大高度不限制.所以html要例如以下设置.
html{
position: relative;//便于绝对定位
height: auto;//最大不限制高度
min-height: 100%;//最先为整个屏幕的高度
}
那么footer就例如以下设置定位就可以
footer{
height:100px;
position:absolute;//绝对定位
bottom:0;//保证在底部
width: 100%;
background: #48525E;
border: 1px solid blue;
}
7.禁用页面滚动栏
<body scoll=no> 全禁止
<body style="overflow:scroll;overflow-y:hidden"> 禁止纵向滚动栏
<body style="overflow:scroll;overflow-x:hidden"> 禁止纵向滚动栏
overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时怎样显示内容
overflow: auto; 在须要时内容会自己主动加入滚动栏
overflow: scroll; 总是显示滚动栏
overflow-x: hidden; 禁止横向的滚动栏
overflow-y: scroll; 总是显示纵向滚动栏
8.响应式图片
<div style="margin: auto;display: table; text-align: center;margin-bottom: 0">
<img src="data:images/bg-one-img.png" style="max-width:100%">
</div>
9.单行多行文本溢出显示省略号
单行:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行:
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
10.阻止a链接跳转onclick和href
链接的onclick事件被先运行,其次是href属性下的动作(页面跳转,或 javascript 伪链接);
假设链接中同一时候存在href与onclick,假设想让href属性下的动作不运行,onclick必须得到一个false的返值;
假设页面过长有滚动栏,且希望通过链接的 onclick事件运行操作。
应将它的 href属性设为 javascript:void(0); 。而不要是 #。这能够防止不必要的页面跳动;
HTML小知识点积累的更多相关文章
- linux系统下用到的小知识点积累
preface:在ubuntu下做事情,在终端下执行一些命令.或者在vim里面做一些操作.自然而然须要用到一些小知识点,没有怎么系统地看<鸟哥的菜>,基本上是遇到了什么问题想要实现什么功能 ...
- C#小知识点积累
1.sealed 修饰符 概念: C#提出了一个密封类(sealed class)的概念,帮助开发人员来解决这一问题. 密封类在声明中使用sealed 修饰符,这样就可以防止该类被其它类继承.如果试图 ...
- 刚接触Linux,菜鸟必备的小知识点(一)
身为一个将要大四的学生,而且还是学计算机的没有接触过linux简直是羞愧难当.这个假期做了一个软件测试员,必须要熟悉linux的操作,所以对于我这个菜鸟我也就说几点比较重要的小知识点吧. 第一.cd指 ...
- Java学习过程中的总结的小知识点(长期更新)
Java学习过程中的总结的小知识点 (主要是自己不会的知识和容易搞错的东西) 计算某个程序运行的时间 long stime=System.currentTimeMillis(); copy3(file ...
- 【转】HTML5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...
- AngularJS的小知识点
小知识点:$scope和$rootScope (1)每次使用ngController指令,都会调用控制器的创建函数,创建出一个控制器对象. (2)每次创建一个控制器对象,AngularJS都会创建一个 ...
- js中关于value的一个小知识点(value既是属性也是变量)
今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...
- html5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...
- [BS] 小知识点总结-05
[BS] 小知识点总结-05 1. 不论UIWindow的rootViewController是navC.tabBarC还是VC,也不管modalVC和rootVC中间隔着多少个VC,但是modal出 ...
随机推荐
- sql 表连接的3种类型
内连接 inner join (join) 交叉连接 cross join 笛卡尔积 效率低 外连接 outer join (left join ,right join ,full join ...
- (转)WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
[root@bak1 bak]# scp gwsyj.sql.gz root@192.168.21.65:/data/dbdata/ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...
- 经典:区间dp-合并石子
题目链接 :http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=737 这个动态规划的思是,要得出合并n堆石子的最优答案可以从小到大枚举所有石子合并 ...
- DocView mode 1 -- 手册翻译
文档原文在线地址 * 35 Document Viewing** DocView mode is a major mode for viewing DVI, PostScript (PS), PDF, ...
- express中间件的next()方法
next()方法出现在express框架中的中间件部分,由于node异步的原因,我们需要提供一种机制,当当前中间件工作完成之后,通知下一个中间件执行,因此一个基本的中间件应该是这种形式 var mid ...
- Hibernate框架的主键生成策略
在Hibernate中,id元素的<generator>子元素用于生成持久化类的对象的唯一标识符,也就是主键.Hibernate框架中定义了许多主键生成策略类,也叫生成器类.所有的生成器类 ...
- C++类设计1(Class without pointer members)
class complex{ public: complex (double r = 0, double i = 0):re(r), im(i){} //inline complex& ope ...
- 【LeetCode】Game of Life(生命游戏)
这道题是LeetCode里的第289道题. 题目描述: 根据百度百科,生命游戏,简称为生命,是英国数学家约翰·何顿·康威在1970年发明的细胞自动机. 给定一个包含 m × n 个格子的面板,每一个格 ...
- NYOJ 7 街区最短路径问题
街区最短路径问题 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 一个街区有很多住户,街区的街道只能为东西.南北两种方向. 住户只可以沿着街道行走. 各个街道之间的间 ...
- TOJ 2710: 过河 路径压缩
2710: 过河 Time Limit(Common/Java):1000MS/10000MS Memory Limit:65536KByteTotal Submit: 32 ...