html-css
UNDERCOVERj
这个作者很懒,什么都没留下…
展开
-
:nth-child(n)与:nth-of-type(n)的区别
使用p:nth-child(n)得满足两个条件 1. 它的位置必须在它父元素的第n个,从1开始计数 2. 它必须是P元素(相对于p:nth-child(n)来举例) 使用p:nth-of-type(n) - 只要它是第n个P元素就行了<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8">原创 2017-02-17 12:23:34 · 430 阅读 · 0 评论 -
margin坍塌
今天在写代码过程中,解决了一个小问题,代码如下。 在.first的div中设置margin-top,效果却是和父div设置margin-top一样,网上又搜了答案总结一下<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css">原创 2017-02-12 10:45:30 · 877 阅读 · 0 评论 -
html中的垂直居中和水平居中
方法一:运用flex布局<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> .app{width: 500px;height: 500px;background: green;} .app{display: flex;ali原创 2017-02-17 14:56:17 · 1119 阅读 · 0 评论 -
div+css布局
两栏布局利用margin<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> .first{overflow: hidden;;margin-top: 50px;color:#fff;} .first-left{width原创 2017-02-20 23:10:07 · 327 阅读 · 0 评论 -
css兼容
Trident内核:前缀为-msGecko内核:前缀为-mozPresto内核:前缀为-oWebkit内核:前缀为-webkit.box { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}IE5-8不支持原创 2017-04-10 16:46:48 · 285 阅读 · 0 评论 -
cssRule那些事儿
div.style.cssText返回内联样式,并且可以改变<style> .main{width: 100px;height: 200px;background: red}</style><div class="main" style="margin:10px"></div>var el=document.querySelector('.main')el.style.cssTex原创 2017-04-02 13:41:19 · 933 阅读 · 0 评论 -
用requestAnimationFrame做轮播
用setTimeout和setInterval来实现动画没有对调用动画的循环机制进行优化即使传递毫秒为单位的参数,也不能打到ms的准确性。因为JavaScript是单线程的,可能发生阻塞没有考虑绘制动画的最佳时机requestAniamationFramerequestAnimationFrame不需要使用者指定循环间隔时间,浏览器会基于当前页面是否可见、CPU的负荷情况等来自行决定最佳的原创 2017-04-03 11:03:55 · 1825 阅读 · 0 评论 -
float的影响
注:float为非none 原文对自身的影响行内元素将变为块级元素,可设置宽高 题外话,input为内联块级标签,可设置宽高,并且一行排列父级元素设置了float,则会包裹子元素,自适应宽高对兄弟元素的影响浮动元素后面跟非浮动元素会覆盖非浮动元素,非浮动元素的文字或者其他行内元素会环绕浮动元素浮动元素前后的行内元素环绕浮动元素浮动元素临近元素也是浮动元素,且...原创 2017-05-01 16:10:03 · 1634 阅读 · 0 评论 -
html,css题
localStorage 数据写入字段有三种方式:localStorage[“a”]=1;localStorage.b=1;localStorage.setItem(“c”,3);读取字段也有三种方式:var a= localStorage.a;var b= localStorage[“b”];var c= localStorage.getItem(“c”);字体单位px相对长度单位原创 2017-04-21 13:15:57 · 303 阅读 · 0 评论 -
css百分比相对元素问题
相对于父元素宽度的:[max/min-]width、left、right、padding、margin 等; 相对于父元素高度的:[max/min-]height、top、bottom 等; 相对于继承字号的:font-size 等;相对于自身字号的:line-height 等; 相对于自身宽高的:border-radius、background-size、transform: transla原创 2017-05-23 15:20:53 · 719 阅读 · 0 评论 -
web worker
Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。在浏览器后台运行JavaScript, 而不占用浏览器自身线程。Web Worker可以提高应用的总体性能,并且提升用户体验。 学习自: 原文1 原文2//test.html<!DOCTYPE HTML><html> <he原创 2017-04-22 11:59:57 · 547 阅读 · 0 评论 -
正则表达式
用处:测试字符串内的模式。 例如,可以测试输入字符串,以查看字符串内是否出现电话号码模式或信用卡号码模式。这称为数据验证。替换文本。 可以使用正则表达式来识别文档中的特定文本,完全删除该文本或者用其他文本替换它。基于模式匹配从字符串中提取子字符串。 可以查找文档内或输入域内特定的文本。如果正则表达式带有g修饰符,则每一次test方法都从上一次结束的位置开始向后匹配。同时,可以通过正则对原创 2017-03-24 13:34:29 · 264 阅读 · 0 评论 -
某公司电话面试
sessionstorage、localstorage、cookie区别cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。 cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。存储大小: coo原创 2017-03-14 13:42:47 · 404 阅读 · 0 评论 -
隐藏滚动条
::-webkit-scrollbar { display: none;}原创 2017-04-09 20:30:35 · 426 阅读 · 0 评论 -
css权重
第一等:代表内联样式,如: style=””,权值为1000。 第二等:代表ID选择器,如:#content,权值为100。 第三等:代表类,伪类和属性选择器,如.content,权值为10。 第四等:代表类型选择器和伪元素选择器,如div p,权值为1。 通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中原创 2017-02-17 13:06:24 · 327 阅读 · 0 评论 -
src和href的区别
src用于替换当前元素, href 用于在当前文档和引用资源之间确立联系。 src是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本, img 图片和 frame 等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似原创 2017-02-17 13:11:11 · 428 阅读 · 0 评论 -
title与h3的区别、b与strong的区别、i与em的区别?
title属性没有明确意义只表示是个标题, H1 则表示层次明确的标题,对页面信息的抓取也有很大的影响; strong是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时: 会重读,而 是展示强调内容。 i内容展示为斜体, em 表示强调的文本;原创 2017-02-17 15:53:22 · 1483 阅读 · 0 评论 -
清除浮动
清除浮动的方法可以分成两类:一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素原创 2017-02-17 16:16:35 · 205 阅读 · 0 评论 -
用css3画三角形
.triangle_first{width: 0px;height: 0px;border-top: 100px solid red;border-right: 100px solid transparent}<div class="triangle_first"></div>效果: .triangle_first-clone{border-top: 50px solid red;border-l原创 2017-02-12 22:23:11 · 534 阅读 · 0 评论 -
相邻元素之间的margin问题:
任何元素都可以设置border 设置宽高可能无效 行内元素设置padding,margin上下是无效的,左右是有效的外边距合并:指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将原创 2017-02-17 11:06:40 · 6502 阅读 · 0 评论 -
3.8学习总结
文字环绕图片 给图片float.main{width: 400px;word-wrap: break-word;word-break: break-all;}img{float: left}<div class="main"> <img src="apple.png" alt="apple"> <p>vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv原创 2017-03-08 22:00:03 · 244 阅读 · 0 评论 -
3.11面经学习
url回车后发生了什么域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 服务器响应http请求,浏览器得到html代码 –> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) –> 浏览器对页面进行渲染呈现给用户原创 2017-03-11 22:40:27 · 215 阅读 · 0 评论 -
stacking context
stacking context,布局规则z轴上的默认层叠顺序如下(从下到上):根元素的边界和背景 常规流中的元素按照html中顺序 浮动块 positioned元素按照html中出现顺序 如何创建stacking context:根元素 z-index不为auto的定位元素 a flex item with a z-index value other than ‘auto’ opac原创 2017-03-28 15:23:29 · 536 阅读 · 0 评论 -
css3transform属性
skew 一个参数时,水平倾斜。两个参数水平垂直倾斜 transform-origin默认是中心.button { transform: skewX(-45deg);background: red}.button > div { transform: skewX(45deg);}<div class="button"> <di...原创 2017-03-30 14:30:59 · 458 阅读 · 0 评论 -
div并排等高
利用margin-bottom和padding-bottom<!DOCTYPE html><html><head> <title>并排等高</title> <style> *{ margin: 0; padding: 0; } .container::after{原创 2017-12-24 12:54:59 · 553 阅读 · 0 评论