!!!常用CSS代码

.box{overflow:auto;zoom:1;}

.box-in{display:inline-block;vertical-align:top;}

.border-box{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}/*ie8+*/

body,div,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}

(待补充)


清除浮动


<style type="text/css">
div{background:#ddd;border:1px solid #000;width:400px;}
.box{overflow:auto;zoom:1;}/*zoom:IE 6,7*/
img{float:right;} </style>
<h1>清除浮动</h1>
<div class="box"><img src="http://zh.learnlayout.com/images/ilta.png"></div>
<br><br>
<div><img src="http://zh.learnlayout.com/images/ilta.png"></div>

box-sizing:IE8及IE8+


<style type="text/css">
div{background:#999;width: 500px;height:100px;margin: 20px;}
.simple {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fancy {
padding: 50px;
border: solid #000 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ccc{
border: solid #000 20px;
}
</style>
<h1>box-sizing : IE8及IE8+</h1>
<div class="simple">aaaaaaaa</div>
<div class="fancy">aaaaaaaaa</div>
<div class="ccc">aaaaaaaaa</div>

媒体查询  http://zh.learnlayout.com/media-queries.html  下次阅读

Flexbox  http://zh.learnlayout.com/flexbox.html  (扩展阅读)

css框架  http://zh.learnlayout.com/frameworks.html (扩展阅读)

!!!常用CSS代码

时间: 2024-10-20 06:44:01

!!!常用CSS代码的相关文章

!!!常用CSS代码块

图片排满一行.左右两端无间隙. <style type="text/css"> .img_abc{float:left;width:30%;margin-left:5%;} .img_abc:first-child{margin-left:0} .body92{margin-left:4%;margin-right:4%;} </style> <div class="body92"> <img src="14085

常用CSS代码片段

1.标准html页面模板 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid

discuz内置常用CSS代码分析

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

CSS大全_最全的常用css代码

字体属性:(font)大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高 {line-height: normal;}(正常) 单位:PX.PD.EM粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)变体 {font-variant: small-

常用CSS代码段

1.自定义文本选中样式(不支持IE8及以下) ::selection { color:#9400D3; background:#A9A9A9; } ::-moz-selection { color:#9400D3; background:#A9A9A9; } 2. 间隔与间距 p.wordspacing{word-spacing:20px;} /* 设置空格的长度*/ p.letterspacing{letter-spacing:20px;} /* 设置字间距*/ p.lineheight{li

css代码添加背景图片常用代码

css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; height: 0px; margin: 20px 0px;"> 2 背景图片 {background-image: url(url)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {

sublime text3---Emmet:HTML/CSS代码快速编写神器

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示:  Zen coding下的编码演示 一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签.比如输入"!"或"html:5",

如何写出优雅的CSS代码 ?(转)

对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如何写出优雅的css代

60个有用的css代码片段

1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } (ps:[译]如何实现CSS居中?–CSS居中常用方法) 使用这