常用css总结】的更多相关文章

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 ;;…
常用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属性 (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;…
常用CSS技术收藏 必须要掌握的技术 盒子模型 定位模型 定位模型 css sprite(雪碧/css精灵)相关 css sprite 坐标定位为何为负以及定位方法 布局 圣杯布局小结 规范 BEM 常用前端规范…
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. 我的理解是:浮动将元素‘上浮’一层,并保留元素在上层对下层的投影的位置. 请注意: 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动. 一个浮动元素会尽量向…
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…
一. 浮动的特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"字围"效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中:margin: 0 auto;如果盒子浮动了,margin: 0 auto;就不起任何作用 需求:让浮动的盒子居中 给浮动盒子,加一个父盒子,设置宽度跟浮动盒子一样大小,并且overflow:hidden; 设置该盒子margin: 0 auto; .box{ width: 400px; height: 30…
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/*左右滚动*/overflow: hidden;/*截取*/overflow: auto;/*自动*/显示与隐藏可以用display/* display: none; *//* display: block; *//* display: inline-block; */visibility显示与隐藏v…
table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4缺一带你了解相对还是绝对抑或是固定定位,实现div绝对居中法/*父定位子绝对,子的坐标系是父的左上角:*/绝对定位和相对定位的相同点:脱离文档流,都在文档流的上方;不同点(1)绝对的坐标系在浏览器的左上角,相对的坐标系在自己的左上角(2)绝对不占位,相对占位;最后/*z-index定位层级高度,只能…
鼠标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"…
在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下CSS相关的优化知识,写篇博客梳理一下,还望大家多多指教 关于CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都能实现某些效果,但并不是所有的方式效果都相同,我们看过不少关于JavaScript方面的语法优化知识,其实C…
常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:f…
CSS常用属性整理: 1 字体属性 font-family 设置使用的字体 font-style 设置字体的样式,是否斜体 font-variant 设置字体的大小写 font-weight 设置字体的粗细 *font-size 设置字体的大小 2 颜色和背景属性 *color 设置元素前景色 *background-color 设置元素背景色 background-imge 设置元素背景图案 background-repeat 设置背景图案的重复方式 background-attachmen…
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的margin和padding设置为0. *选择符也可以在子选择器中使用. #container * { border: 1px…
要用到的基本术语和概念: 替换元素:用作为其他内容占位符的一个元素,或说替换元素内容的部分并非由文档内容直接表示.比如img元素它由文档本身之外的一个图像来替换,比如input元素要由一个单选按钮,复选框,文本输入框等替换.替换元素多为行级元素,行级替换元素可以像块级元素一样设置width/height/padding/margin. 非替换元素:元素的内容本身包含在文档中,或说其内容由User Agent在元素本身生成的框中显示.比如一个段落p元素里的文本本身就放在该元素内. 块级非替换元素:…
在我们写前端代码页面的时候,很多常用的CSS类都是固定的!但没有一个标准或者大家都按自己的方式去随意的写,这样就每次都重复写一些固定的类! 为此HTML5 Doctor(HTML5医生)为我们总结了一个常用的并符合HTML5标准的Css Reset样式!现在分享给大家! reset.css源码如下: /* * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) * Ri…
原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下CSS相关的优化知识,写篇博客梳理一下,还望大家多多指教 关于CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都能实…
转自:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的m…
一直对一些自己常用的css声明掌握得不是很全,只知道常用的一些属性和值,但是对于其他的用法确实一知半解,这篇文章旨在扫盲,先不说有多深的理解,至少做到能够看到这些声明的属性和值的时候做到不陌生. 这里后续还会增加更多自己在工作和学习中的一些css声明,供自己查阅,也提供给大家看看. github background-image 用于指定一个容器的背景图片,主要的值有三个: none 无背景图片(默认) url(/* image path */) 指定的图片地址 inherit 继承自父容器 当…
边框 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 #…
http://www.cnblogs.com/qq21270/p/4854643.html 伪类 http://www.cnblogs.com/qq21270/p/4891167.html CSS3动画(自用) http://www.cnblogs.com/qq21270/p/5083105.html  手机页面,常用字号和布局(工作中用) 2015-12-28 常用的CSS命名规则 http://www.cnblogs.com/qq21270/p/5191219.html 2016-2-16…
常用css--------下三角 常用css--------闪动效果 css #shandongFlash { width:100px; height:100px; background:#f8b551; position:relative; animation:mymove 1.5s infinite; -webkit-animation:mymove 1.5s infinite; /* Safari and Chrome */ } @keyframes mymove { 0% { backg…
兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项目时再引入) content布局 当h5内嵌在app里面的时候,在iso手机下,底部(头部)固定按钮会跟着一起滚动,需要使用content布局,然后使用padding-bottom或者padding-top,把相应的位置空出来!!! 当需要在content里面滚动的时候,需要将body和html设置…