1.在制作sidebar时对li里面的元素进行浮动,li在ie6/7下会出现4px的间间隙: 解决方法:在li下加上vertical-align属性,值可为top.bottom.middle: 扩展:vertical-align属性为垂直居中,一般与table-cell联合使用,但是对于ie6/7的兼容是无解的. 2.注意: 元素浮动后在ie6/7下会使margin-bottom失效:在开发过程中要注意margin-bottom的使用. 3.清除浮动clearfix(据说使史上最高大上的方法,兼

CSS3 & CSS var & :root How to change CSS :root color variables in JavaScript https://stackoverflow.com/questions/37801882/how-to-change-css-root-color-variables-in-javascript https://developer.mozilla.org/en-US/docs/Web/CSS/:root :root { --angleBe

css var all in one number :root{ --num: 0; } html{ --num: 0; } let html = document.querySelector(`html`); html.style.setProperty(`--num`, `${angle}deg`); demo OK https://codepen.io/xgqfrms/pen/JQVPzx /* :root{ --num: 30; } */ html{ /* --num: 30; */ -

css var & auto width css triangle https://codepen.io/xgqfrms/pen/PooeEbd css var https://codepen.io/xgqfrms/pen/pooVNNP js & getComputedStyle https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle getComputedStyle(document.queryS

在html篇里提到设置视口宽度和设备宽度,固定的meta配置就是写死的,==死记硬背== 应该清楚的是手机端的适配应该克服的难题就是宽度根据手机屏幕的大小变化,而高度却没有办法跟随比例变化,也就是宽高比,比如在手机上要一行上排列三个div放正方形的三个div,要怎么做,三个div浮动排列后各自设置width为33.3%,那高度呢,在pc端可以直接100*100,但是手机不行,不等比排列太难看了 实现手机宽高比,就是手机端适配的终极目标 现在最常见的宽高比方案有两个 一个是rem 一个vw,vh的

Css做到横竖屏适配:定义两个样式 { @media screen and (orientation: portrait){ Css[竖向定义样式] } @media screen and (orientation: landscape){ Css[横向定义样式] } }

这里不多说了,想详细了解的可以参考 2350305682 的博客 https://www.cnblogs.com/annie211/p/8118857.html 不想多深究,想先实现的看这(移动端): html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/} @media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) { html { font

/*orientation:portrait纵向*/ /*orientation:landscape横向*/ /*iPhone 4*/ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation : portrait) { .m_game .ip_down{top:63%;} .m_game .an_down{top:63%;} } /*iPhone 5*/ @me

.border{ width: 100px; height: 100px; position: relative; } //加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是1px @media screen and (-webkit-min-device-pixel-ratio:2) { .border::after{ content: ''; position: absolute; left: 0; top: 0; border: 1px solid #000; b

在css中为适配浏览器,新特性总加 -webkit,-o, -moz 来适配浏览器,写的烦心,看着也臃肿,让css可读性降低,下面以阴影为例,如何使用scss让我们的css看起来更简洁. 本人使用的IDE为intellij_idea,关于scss怎么用,出门左转 以阴影为例:当你在test.scss中写: @import "Function";//引入自定义Function函数 div{ width: 200px; height: 200px; margin: 40px; @inclu

1.尺寸常用单位:   https://www.cnblogs.com/whitewolf/p/css-em-px-percentage.html px.em.rem.% 2.CSS的长度单位适配方案   :  https://www.jianshu.com/p/eb237e2c0ecf 3.rem的使用: 用px 写CSS,构建时替换为rem 并不提倡直接在代码里写rem,因为你并不知道你当前的1rem代表多少.所以最好的方式是代码里直接用px描述字体和大小,并在后期将其转化为rem(通过构建

//适配android上absolute和input的问题var oHeight = $(document).height(); //屏幕当前的高度$(window).resize(function() { if($(document).height() < oHeight -100) { $(".bottombox").css("display", "none"); } else { $(".bottombox").c

“代码质量”这个术语对于程序员来说并不陌生.毕竟,每个开发人员都知道,代码只是能工作是不够的.它还应该具备其他要素:它应该是可读的,良好的格式和一致性.它也应该符合一些标准的量化指标.不过这些在写CSS时,经常被忽略.我们可以花很多时间讨论为什么会发生这种情况,但重要的是,CSS编码是和JavaScript,PHP等一样,我们要关注我们写代码的方式.否则,可能会导致很多复杂的问题. 在本文中,我们将探讨我们如何能够利用PostCSS帮助我们,保持我们的CSS代码质量更高.首先,找出“好CSS代码

rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算. 计算原理: 1 屏幕宽为 clientWidth(px). 设计稿宽度为 750 (px), 假设 n = clientWidth(px)/750(px)

原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一看使用PostCSS处理的css的世界. PostCSS是什么? PostCSS 是使用 javascript 插件转换 css 的后处理器.PostCSS 本身不会对你的 css 做任何事情,你需要安装一些 plugins 才能开始工作.这不仅使其模块化,同时功能也会更强. 它的工作原理就是解析

之前写了一个工具类点此链接里面含有这段代码,感觉用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjscssfile("http://libs.baidu.com/jquery/1.9.1/jquery.js","js") * @param fileurl 文件路径, * @param filetype 文件类型,支持传入类型,js.css */ loadjscssfi

原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Scoped-CSS 写在前面 问:什么是Scoped CSS规范? Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. 面对组件化的普及,组件的复用很普遍的需求,然而CSS相互污染是经常遇见的问题,建立规范让开发者放心使用各种组件,甚至跨生态的组件是很有必要的一件事情. 目前业界的一些方案 方案一: 如果用webpack的话,可以参考css-loader的这

<script type="text/javascript"> $(function () { var filename = '/assets/css/main.css'; var fileref = document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type&q

前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比如动态样式就相对较复杂 所谓动态样式,是指在页面加载时并不存在,在页面加载完成后动态添加到页面的样式 动态样式包括两种情况:一种是通过<link>元素插入外部样式表,另一种是通过<style>元素插入内部样式.下面将详细介绍这两种情况 外部样式 /*style.css里面的内容*/ .

接触Nodejs不深,看到页面上每一个链接都要写一个handler,像在页面显示图片,或者调用外部CSS.JS文件,每个链接都要写一个handler,觉得太麻烦,是否可以写个程序出来,能够自动识别图片.CSS.JS文件链接,以后要调用图片.外部CSS .JS只需要关心前端怎么写,而不用再管后台.于是有了下面的程序. index.js var http = require("http");//获取http对象 var url = require("url");//获取

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性.方法一:用CSS和JavaScript实现预加载实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.单纯