a15180180753的博客

1 前言CSS 作为网页样式的描述语言，在百度一直有着广泛的应用。本文档的目标是使 CSS 代码风格保持一致，容易被理解和被维护。虽然本文档是针对 CSS 设计的，但是在使用各种 CSS 的预编译器(如 less、sass、stylus 等)时，适用的部分也应尽量遵循本文档的约定。2 代码风格2.1 文件[建议] CSS 文件使用无 BOM 的 UT

1.变量（用于定义常用参数）@color:#fff;body{  color:@color;}变量计算    可以加减乘除@color:#234152;@deep-color:@color + #111;        //叠加后为#345163@width:10px;#header{  width:@width * 3;}变量覆盖@color:#222;@color:...

CSS3自定义滚动条样式滚动条组成::-webkit-scrollbar    滚动条整体部分::-webkit-scrollbar-thumb      滚动条滑块::-webkit-scrollbar-track         滚动条滑动轨道::-webkit-scrollbar-button      滚动条两端按钮::-webkit-scrollbar-track-piect...

*{margin:0;padding:0;outline:0a{text-decoration:nonebody,html{font-size:20px;font-family:'Microsoft YaHei,微软雅黑';height:100%;-webkit-input-placeholder{color:#ccc::-moz-placeholder{col...

@charset "utf-8";/* -----------H-ui前端框架-----------------------H-ui.reset.css v1.2重定义浏览器默认样式H-ui.reser CSS file for H-uiCopyright H-ui Inc.http://www.H-ui.netdate:2014.10.09Created & Modifi...

@charset "utf-8";/* -----------H-ui前端框架-----------------------H-ui.reset.css v1.2重定义浏览器默认样式H-ui.reser CSS file for H-uiCopyright H-ui Inc.http://www.H-ui.netdate:2014.10.09Created & Modified by gu...

解决方法1.引入html5shiv.js解决低版本ie浏览器无法识别html5新增标签的问题。 必须加载在head中2.引入respond.js 使低版本ie浏览器支持媒体查询。3.引入rem.js 使低版本浏览器支持字体单位rem。 放在body末尾4.引入样式重置表统一浏览器默认样式，例如不同浏览器margin和padding不同的问题，保证渲染一致性。5.常见css问题5.1块级元素浮动以后...

@media screen and (min-width: 320px) {    html {        /* iPhone5的320px尺寸作为12px基准，以后所有型号按此比例缩放 */        font-size: calc(75%  +  (100vw - 320px) * 0.0375);        font-size: calc(12px +  (100vw - 320...

transform变换transform: translate(30px,30px);    //相对当前位置进行移动transform: rotate(30deg);    //旋转指定角度transform: rotateX(30deg);    //围绕x轴进行旋转，X可替换为Y,Ztransfrom: scale(3,3);    //按参数缩放长宽，为负数时上下颠倒t

@charset "utf-8";//变量@awidth:200px;body{background-color:red;}.box{width:@awidth;.border;}//混合.border{height:200px;}//混合可带参数.classone(@width){width:@width;}.classtw

@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) { html,body { font-size:33.75px; } } @media only screen and (max-width: 960px), onl...