/* IE6下最小宽度的CSS表达式 */ width:100%; min-width:1024px; _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1024?"1024px":""); 模块垂直居中,兼容IE6,注意,模块的所有父辈标签不能有定位属性,不能有overflow:hidden; .duilian_right{width:90p…

在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下CSS相关的优化知识,写篇博客梳理一下,还望大家多多指教 关于CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都能实现某些效果,但并不是所有的方式效果都相同,我们看过不少关于JavaScript方面的语法优化知识,其实C…

原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下CSS相关的优化知识,写篇博客梳理一下,还望大家多多指教 关于CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都能实…

一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal;字间距 letter-spacing: 数值 | inherit | normal;词间距 word-spacing: 数值 | inherit | normal;空格 white-space: pre(保留) | nowrap(不换行) | normal; /*表格宽度自适应*/ th { white-space: nowrap; } 显示 display: none;…

图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中不变形 web端: img{vertical-align:middle;object-fit: cover} object-fit: cover 的效果和background-size:cover;的效果一样,一个缺点就是容器不够适应的原图大小的比例的话,会按照比例进行放大裁剪 object-fit…

CSS基础必学列表 CSS width宽度 CSS height高度 CSS border边框 CSS background背景 CSS sprites背景拼合 CSS float浮动 CSS margin外边距 CSS padding内边距 CSS color字体颜色 CSS font-size字体大小 CSS font-family字体 CSS font-weight字体加粗 CSS display显示与隐藏 CSS overflow隐藏与滚动条 CSS position定位 CSS tex…

一. 浮动的特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"字围"效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中:margin: 0 auto;如果盒子浮动了,margin: 0 auto;就不起任何作用 需求:让浮动的盒子居中 给浮动盒子,加一个父盒子,设置宽度跟浮动盒子一样大小,并且overflow:hidden; 设置该盒子margin: 0 auto; .box{ width: 400px; height: 30…

table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4缺一带你了解相对还是绝对抑或是固定定位,实现div绝对居中法/*父定位子绝对,子的坐标系是父的左上角:*/绝对定位和相对定位的相同点:脱离文档流,都在文档流的上方;不同点(1)绝对的坐标系在浏览器的左上角,相对的坐标系在自己的左上角(2)绝对不占位,相对占位;最后/*z-index定位层级高度,只能…

一直以来我们被教育说CSS Expression是个坏东西,很影响性能,应该禁止使用,但是如果仔细想想CSS表达式影响性能的原因,规避掉影响性能的写法,CSS表达式还是能给我们带来一些惊喜的.CSS表达式影响性能的原因:CSS表达式会进行频繁的计算(CSS计算的频率要远远超出我们的想象,不仅在页面显示和缩放时,在页面滚动.移动鼠标都会重新计算一次),从而影响到页面的性能.如果浏览器只需要执行一次CSS表达式,那会多Happy啊. /* 解决IE6背景图片不缓存的问题 */ * html body…

CSS多IE下兼容HACK写法 所有 IE浏览器适用:.ie_all .foo { ... } IE6 专用:.ie6 .foo { ... } IE7 专用:.ie7 .foo { ... } IE8 专用:.ie8 .foo { ... } CSS书写规范 属性写在一行内,属性之间.属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400px; height: 300px; } 属性的书写顺序: 针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit…

获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() 获取jQuery对象的第N个元素 1.$(selector:eq(N-1)) 2.$(selector).eq(N-1) table常用css样式 border-spacing:10px; 表格里边框之间的距离.border-collapse  有三个参数可选:collapse,separate(默…

什么是Css Reset呢? 在 HTML标签在浏览器里有默认的样式,不同浏览器的默认样式之间也会有差别.在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率.所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式.“覆盖”浏览器的CSS默认属性.最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset.(参考百度百科:Css Reset) 常用Css Reset(一):Eric Meyer’s “Reset CSS” 2.0 ;;…

项目中用的grunt-contrib-less, 写了以下less代码 .mapfix{ position: fixed; top:10px; width: 430px; z-index: 100; background: #fff; -position:absolute; -top:expression(eval(document.documentElement.scrollTop)); } 注意底部两行是为了兼容IE6,即修复IE6的fixed.IE7+已经支持了. 执行less命令后,报错…

http://www.cnblogs.com/chenxizhang/archive/2013/05/01/3053439.html 这一篇我来和大家讨论个原则:Avoid CSS Expressions  (避免在CSS中使用表达式) 最早的CSS是不支持所谓的表达式的,微软的IE从5.0开始引入了这种概念,意思是希望我们拥有定义动态的CSS样式的能力,详细的文章请参考http://msdn.microsoft.com/en-us/library/ms537634(v=VS.85).aspx,…

常用CSS HACK IE6 3像素bug和双边距bug一样的经典 现象: IE6下浮动元素和不浮动元素之间会有3px间隙(3px bug,div.float-left + div.float-none) 解决 需设置 div.float-left{ margin-right:-3px;} 选择器hack * (只有IE6-能识别) * html IE6认为最外层的元素不是html ,而是* . html是*的子元素 .abc.aclassSelector{} (不存在样式成分忽略 IE6=)…

常用CSS技术收藏 必须要掌握的技术 盒子模型 定位模型 定位模型 css sprite(雪碧/css精灵)相关 css sprite 坐标定位为何为负以及定位方法 布局 圣杯布局小结 规范 BEM 常用前端规范…

上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. 我的理解是:浮动将元素‘上浮’一层,并保留元素在上层对下层的投影的位置. 请注意: 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动. 一个浮动元素会尽量向…

今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果. 那么其他的办法呢?容我一一道来: line-height 首先介绍文字的水平居中方法: <div class="wrap">刘放</div> 利用line-height设为height的一样即可: .wrap{  line-height: 200px;/…

不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素:  不只是div,还包括img + and so.....(其实 原理都一样啦,掌握了div的居中法,其它的也可以 扩展实现) 3.左右居中 4.上下居中 ok, 实际上呢 我们要解决的问题 就两点,1.左右居中  and  2.上下居中 ... 左右居中:  #method. -->. margin:0 auto…

html5--6-59 其他常用CSS属性 实例 学习要点 了解opacity属性:透明度设定 了解cursor属性:自定义鼠标样式 了解CSS新单位rem和em的区别 了解轮廓outline的设置 掌握display 属性常用属性值: opacity:透明度设定 IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度.opacity 属性能够设置的值从 0.0 到 1.0.值越小,越透明. E8 以及更早的版本使用滤镜 filter:a…

滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/*左右滚动*/overflow: hidden;/*截取*/overflow: auto;/*自动*/显示与隐藏可以用display/* display: none; *//* display: block; *//* display: inline-block; */visibility显示与隐藏v…

鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/cursor:default;/*箭头指示形状*/cursor:help;/*帮助形状*/ 列表(list-style-type):none/*把列表前面的选项去除*/disc/*实心*/circle/*空心*/square/*方块*/decimal/*序列*/lower-roman/*小写罗马*/uppe…

边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-style/*边框样式*/,3.border-color/*边框色彩*/三大属性构成构成; border边框方位分为border-top/*边框上方*/border-bottom/*边框底部*/border-left/*边框左边*/border-right/*边框右边*/; 边框属性样式整理:border-sty…

background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的background样式如下,1.background-color2.background-image3.background-repeat4.background-attachment5.background-position,废话不多扯,直接代码页面展示: <!DOCTYPE html> <html la…

常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/ 字体:1.f…

JQuery常用CSS操作 $(elem).css(obj):设置行内样式 $(elem).position():返回相对于父容器位置,只能获取不能设置 $(elem).offset(obj):返回相对于页面左上角位置,既能获取也能设置 $(elem).scrollTop(num):返回滚动条位置,设置滚动条位置 $(elem).width(num):设置宽度,获取宽度 $(elem).height("50px"):设置高度,获取高度 $(elem).addClass(classNam…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"…

1.flex方法: .center_fix { display:flex; align-items:center; justify-content: center; } 具体flex方法教程:可以参见软老师的——>Flex 布局教程:实例篇 2.position:absolute .center { position: absolute; top:50%; left:50%; width: 100px; height:100px; margin-top: -50px; margin-left:-…

要用到的基本术语和概念: 替换元素:用作为其他内容占位符的一个元素,或说替换元素内容的部分并非由文档内容直接表示.比如img元素它由文档本身之外的一个图像来替换,比如input元素要由一个单选按钮,复选框,文本输入框等替换.替换元素多为行级元素,行级替换元素可以像块级元素一样设置width/height/padding/margin. 非替换元素:元素的内容本身包含在文档中,或说其内容由User Agent在元素本身生成的框中显示.比如一个段落p元素里的文本本身就放在该元素内. 块级非替换元素:…

边框 css   基本设置:border:1px solid #d2d2d2;    风格有:solid=>实线 double=>双实线 dotted=>点状 dashed=>虚线 圆角 border-radius: 10px; 文字居中 vertical-align:middle  上/中/下    text-align:center  左/中/右 鼠标聚焦变成小手   cursor:point; td 内字符超出处理 td {       border: 1px solid #…