html+css
swimming_in_it_
IT的爱好者,希望找到志同道合之人。
展开
-
html中的占位符
== 普通的英文半角空格 == == == no-break space (普通的英文半角空格但不换行) == 中文全角空格 (一个中文宽度) == == en空格 (半个中文宽度) == == em空格 (一个中文宽度)原创 2017-08-23 09:57:02 · 1056 阅读 · 0 评论 -
Flex布局教程:语法篇
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地...转载 2019-05-31 20:46:16 · 317 阅读 · 0 评论 -
CSS之Grid网格布局
一:概述网格布局(Grid)是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。上图这样的布局,就是 Grid 布局的拿手好戏。Grid 布局与Flex布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针...转载 2019-05-31 20:25:47 · 792 阅读 · 0 评论 -
js动态添加div
一:添加div样式.popDivTypeContent { width: 450px; height: 260px; background-color: #e3e4e9; display: block; position: absolute; margin: -100px 200px 200px 200px; z-index: 1; padding-left: 20px;}...原创 2018-12-08 17:11:34 · 4516 阅读 · 0 评论 -
html 5 中的Web SQL
为什么要使用Web SQL?在web系统或应用中,经常需要在本地存储一些数据,最早的在客户端存储数据用的是cookie(当然cookie主要还是用来保存用户的状态,业余可以干点保存本地数据的活),事实它并不适合用于保存客户端的本地数据,有以下几个原因:1,每次请求服务器的时候都会增加不必要的流量消耗,因为每次请求服务器是都会讲cookie发送至服务器。2,cookie的数据存储数据的规...原创 2018-11-12 18:08:12 · 741 阅读 · 0 评论 -
html 5中的localStorage和sessionStorage
一:什么是localStorage、sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。二、localStor...原创 2018-11-12 15:44:29 · 223 阅读 · 0 评论 -
html5 拖拽API详解
一、关于拖拽API拖拽API是HTML5的新特性,相对于其他新特性来说,重要程度占到6成,实际开发中使用比例占到3成,学习要求个人认为是达到掌握即可的程度。二、什么是拖拽和释放?拖拽:Drag释放:Drop拖拽指的是鼠标点击源对象后一直移动对象不松手,一但松手即释放了三、什么是源对象和目标对象?源对象:指的是我们鼠标点击的一个事物,这里可以是一张图片,一个DIV,一段文本等...转载 2018-11-12 14:54:39 · 400 阅读 · 0 评论 -
css固定底部的五种方法
本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,下面要讲的布局就是解决如何使元素粘住浏览器底部。需求看下图:方法一:全局增加一个负值下边距等于底部高度有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度,就...转载 2018-11-08 18:10:14 · 3023 阅读 · 0 评论 -
box-sizing和盒子模型
1 前言今天被杭州有赞的前端面试官面了,很多问题一知半解。主要原因还是因为我这几个月大多数时间都在写项目,平常学习也是主要以框架为主,很多基础知识都遗忘了。第一篇文章是讲盒子模型的。2 盒子模型的基本要素 以下图中的button为例在chrome浏览器中查看这个元素,结果是这样的:蓝色部分(28 x 32 )是button的content,绿色的是padding...原创 2018-11-08 15:53:41 · 231 阅读 · 0 评论 -
css中的em和rem的区别以及使用
你可能已经很熟练使用这两个灵活的单位,但你可能不完全了解何时使用 rem ,何时使用 em。 本教程将帮你弄清楚! em 和 rem都是相对单位,由浏览器转换为像素值,具体取决于您的设计中的字体大小设置。 如果你使用值 1em 或 1rem,它可以被浏览器解析成 从16px到 160px 或其他任意值。padding设置了1em,解析出来的值为16px。下面padding...转载 2018-11-08 15:37:02 · 437 阅读 · 0 评论 -
css实现垂直居中的方法
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。方法1:table-cellhtml结构:<div class="box box1"> <span>垂直居中</span></div>css:...转载 2018-08-28 11:37:46 · 199 阅读 · 0 评论 -
WebSocket与消息推送
B/S结构的软件项目中有时客户端需要实时的获得服务器消息,但默认HTTP协议只支持请求响应模式,这样做可以简化Web服务器,减少服务器的负担,加快响应速度,因为服务器不需要与客户端长时间建立一个通信链接,但不容易直接完成实时的消息推送功能,如聊天室、后台信息提示、实时更新数据等功能,但通过polling、Long polling、长连接、Flash Socket以及HTML5中定义的WebS...转载 2017-10-12 09:25:16 · 503 阅读 · 0 评论 -
css float浮动而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因。如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍。1、首先我们先看HTML源代码:> html> head> met转载 2018-01-17 15:56:29 · 600 阅读 · 0 评论 -
html中的行内元素和块级元素
行内元素和块级元素行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行;而块级元素可以包含行内元素和其它块级元素,并占据父元素的整个空间,可以设置宽度和高度属性,浏览器通常会在块级元素前后另起一个新行。因此,行内元素适合显示具体内容,而级块元素适合做布局常用的行内原创 2018-01-11 09:18:40 · 486 阅读 · 0 评论 -
html a标签打电话,发短信等。
有时候,在移动端的页面需要点击电话号码,调用手机拨打电话的接口,才开始以为多难,没想到一个a标签全部搞定。下面是a标签的用法。10086 //点击后直接拨打10086c6088@qq.com //点击后直接给c1586@qq.com发邮件,主题为:TestObject 给 10086 发短信 //点击后直接给10086发信息,消息内容默认为m原创 2017-10-19 11:22:27 · 18090 阅读 · 1 评论 -
前端之网页分享
提高网页浏览量是提高网站信息影响的前提,提高网页浏览量的方式是多种多样的,其中向特定页面添加网页分享是一个很好的主意,网页分享实现方式很多,这里介绍一下百度分享的应用: 一、百度分享之图标式:[html] view plain copy%@ page language="java" contentType="text原创 2017-10-10 10:01:52 · 1031 阅读 · 0 评论 -
css基础
1.css是什么?css是层叠样式语言,对网页语言进行样式修饰2.css常见的语法样式属性名:值;样式属性名:值;样式属性名:值;3.css在网页中哪些地方会出现 a. b. 选择器名称{ css语言 } c.把css语言直接书写在一个后缀是.css结尾的文件原创 2017-03-01 18:44:33 · 282 阅读 · 0 评论 -
Flex 布局教程:实例篇
你会看到,不管是什么布局,Flex往往都可以几行命令搞定。我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明,本节...转载 2019-05-31 20:47:59 · 283 阅读 · 2 评论