Div+CSS 规则整理

最新推荐文章于 2021-08-04 07:57:46 发布

CodeSnippet小笨蛋

最新推荐文章于 2021-08-04 07:57:46 发布

阅读量981

点赞数 2

分类专栏：一此东东文章标签： css div stylesheet float 浏览器 ie

本文链接：https://blog.csdn.net/homezzm/article/details/4841988

版权

一此东东专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、 善用css 缩写规则

/* 注意上、右、下、左的书写顺序*/

1. 关于边距（4 边）：

1px 2px 3px 4px ( 上、右、下、左)

1px 2px 3px （省略的左等于右）

1px 2px ( 省略的上等于下)

1px （四边都相同）

2. 简化所有：

*/ body{margin:0}------------ 表示网页内所有元素的margin 为0

#menu{ margin:0}------------ 表示menu 盒子下的所有元素的margin 为0

3. 缩写（border ）特定样式：

Border:1px solid #ffffff;

Border-width:0 1px 2px 3px;

4. 关于文字的缩写规则：

Font-style:italic; 斜体形式

Font-variant:small-caps/normal; 变体样式：小型大写字母/ 正常

Font-weight:bold;

Font-size:12px;

Line-height:1.2em(120%)/1.5em(150%);

Font-family:arrial,sans-serif,verdana;

缩写成：

Font:italic small-caps bold 12px/1.5em arrial,sans-serif;

注意：Font-size 和Line-height 用斜杠组合在一起不能分开写。

5. 关于背景图片的：

Background:#FFF url(log.gif) no-repeat fixed top left;

6. 关于列表：

List-style-type:square/none;

List-style-position:inside;

List-style-image:url(filename.gif);

缩写成：

List-style:none inside url(filename.gif);

二、 运用4 种方法来引入CSS 样式

1.link

rel 关系

type 数据类型, 有多种

href 路径

部分浏览器支持候选样式, 关键字:alternate:

2. 内部样式块

<style>

<!–

h1{color:red;}

–>

</style>

3.@import

@import url{a.css}

注意: 此指令必须放在<style> 容器中, 并且在所有样式之前

建议放在一个html 注释中,<! – –> 浏览器会不显示注释内的内容, 而import 等css 代码能正常工作

4. 内联样式

选择器是css 的一个基本概念，基本规则如下：

1. 规则结构：

h1 {color:red;}

选择器 { 属性: 值;}

这类是元素选择器，基本可以包括所有html 的元素

属性值可以包括多个元素，如：border ：1px solid red;

常用语法

1) 分组：

选择器和声明都可以分组:

h1,h2,h3{color:red;background:#fff;} , 选择器用“, ” 分割开, 属性用”; ”分割

2) 类选择器, 即通过class= ”stylename ”应用的声明

定义:

.stylename{color:red;}

注意:

在html 中可以使用多类选择: 如class= ”cn1 cn2 cn3 ″

3)ID 选择器, 即与id 属性对应的样式

定义:

#a{color:red;} -> 这个定义对用id= ”a ” 的元素

2. 这部分都是我们常见的css 语法，下面谈一下我们不常见的选择器语法

1) 父子结构, 跟文档结构图对应

如p span{border:1px solid red;} 对应的是<p> 下面的<li> 标签, 这个很用用途, 可以准确定位.

一些特殊应用(IE7 支持):

(1) p > span{}, 匹配所有p 下所有的span

(2) p + span{} , 匹配紧接着p 元素后出现的第一个span 标签,2 者要有相同的父标签

2) 属性选择器:( 注意: 属性选择器ie7 才开始支持, 以下版本并不支持, 其他的浏览器基本可以)

语法:img[alt]{border:1px solid;}

表示对应有alt 属性的img 标签, 当然可以支持多个属性对应, 如img[alt][title]{}; 表示这个2 个属性都有的img 标签, 也可以与具体值对应: 如:img[alt= ”摄影”]{};

属性选择器中的高级应用, 特殊匹配:

(1)img[class~= ”b ”], ~= : 与属性中的一个值对应的, 即与<img class= ”a b c ”> 对应

(2)[class^= ”a ”], 以a 开头的

(3)[class$= ”a ”], 以a 结束的

(4)[class*= ”a ”], 包含a 的

(5)[class|= ”a ”], 等于a 或以a 开头的

3) 伪类和伪元素

日常使用中主要是<a> 标签的几个伪类:link:hover:active:visited

以及:first-child:first:before:left:right:lang:focus:fist-line 等等

注意: 动态伪类可以应用到任何元素, 如,input:focus{background:red;} 当input 标签获得焦点时背景变红

以上语法组合使用, 就能实现定位准确、简单间接的样式了。

三、 选择器分类整合

优先级别遵循：行内样式 >ID > Class > 标记

基本选择器	标记选择器（eg:<p></p> ）
	类别选择器(eg:class)
	ID 选择器
复合选择器	“ 交集” 复合选择器(eg:p.menu{color:red}) 必须是标记+ 类别/ID 组合
	“ 并集” 复合选择器(eg:h1,h2,h3{color:red})
	“ 后代” 复合选择器(eg: #menu .menulist{ ... })
	“ 子” 复合选择器(eg: #menu .menulist .selectit { ... })

四、 使用子选择器减少id 和class 的定义

示例结构：

<div class="selectit">content</div>

</div>

示例CSS ：

#menu { ... }

#menu .menulist { ... }

#menu .menulist .selectit { ... }

五、 使用组选择器为不同元素应用相同的样式

如h1,h2,h3,div{font-size:16px;font-weight:bold}

则h1,h2,h3,div 元素的样式都为字体16 像素，字体粗体

六、 伪类和选择符的配合使用

将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

现在应用在不同的链接上：

<a class="red" href="..."> 这是第一组链接</a>

<a class="blue" href="..."> 这是第二组链接</a>

七、 CSS 的最近优先原则

/* 如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其他 行内样式 >ID > Class > 标记 */

以下是引用片段：

CSS:

p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

<p> 此处显示为红色</p>

<p class="blue"> 此处显示为蓝色</p>

<p class="blue" style="color:green"> 此处显示为绿色</p>

<p class="blue yellow"> 此处显示为黄色</p>

注意：

（1 ）注意样式的几个优先顺序( 优先级由上至下递减，下面的样式覆盖上面的样式 ) ：

-- 元素style 设定

--head 区<style></style> 中的设定

-- 外部引用css 文件

（2 ）优先级不是按访问顺序来设定的，而是又css 中的声明顺序来设的。

如上例中<p class="yellow blue"> 此处显示为黄色</p> 也显示为黄色，因为在css 定义中.yellow 在.blue 的后面。

八、书写正确的链接样式

当用css 定义链接的各种状态时，要注意书写的顺序即：:link :visited :hover :active 利用首字母：L V H A ，你可以通过记忆LoVe,Hate, 两个单词来记住其顺序。

:link -------- 链接的颜色

:visited ----- 鼠标点击后的颜色

:hover ------- 鼠标放上去未点的颜色（悬停）

:active------- 鼠标点击瞬间的颜色

九、 :hover 的灵活运用

IE6 不支持除a 标签以外的:hover 属性，我们了解:hover 属性是鼠标悬停效果。在IE7 和FF 中，对几乎任意元素都可以设置:hover 属性效果。这对我们做不同的访问效果很好。

如：

p {

width : 360px;

height : 80px;

padding : 20px;

margin : 50px auto 0 auto;

border : 1px solid #ccc;

line-height : 25px;

background : #fff;

}

p:hover {

border : 1px solid #000;

background : #ddd;

}

---------------- 此效果针对IE7 和FF

p a {

color : #00f;

text-decoration : none;

font-size : 13px;

}

p a:hover {

color : #036;

text-decoration : underline;

}

----------------- 此效果针对IE6

十、 定义A 标签要注意的小问题

当我们定义a{color:red;} 时，它代表了A 的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover 就可以了，其它三种状态就是A 中所定义的样式。

只定义了一个a:link 时，一定要记得把其它三种状态定义出来！

十一、 禁止内容换行与强制内容换行

在表格或层中我们可能希望内容不换行或强制换行，我们可以通过一些css 属性来达到这些要求。

禁止换行：white-space:nowrap

强制换行：word-break: break-all; white-space: normal;

十二、 区别relative 和absolute

Absolute---CSS 中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP 、RIGHT 、BOTTOM 、LEFT( 下面简称TRBL) 进行定位，在没有设定TRBL ，默认依据父级的做标原始点为原始点。如果设定TRBL 并且父级没有设定position 属性，那么当前的absolute 则以浏览器左上角为原始点进行定位，位置将由TRBL 决定。

Relative---CSS 中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY 的原始点为原始点，配合TRBL 进行定位，当父级内有padding 等CSS 属性时，当前级的原始点则参照父级内容区的原始点进行定位。

十三、 区别块级元素block 和内联元素inline

块级--- 可定义宽高，另起独占一行（如：div ul ）

内联--- 不可定义宽高，如文本元素（如a span ）

十四、 区别display 和visibility

display:none 和visibility:hidden 都可以隐藏一个元素, 但visibility:hidden 只是隐藏了元素的内容，但其使用的位置空间仍然被保留。而display:none 则相当把元素从页面中去除，其占用位置也将被删除。

十五、 背景background 的一些语法

background-image:url( 背景图案.jpg,gif,bmp);

background-color:#FFFFFF; （背景颜色）

background-color : transparent; <-- 设定背景为透明色 –>

background-repeat 改变背景图片的重复并排的设定

说明

repeat 背景图片并排

repeat-x 背景图片以X 方向并排

repeat-y 背景图片以Y 方向并排

no-repeat 背景图片不以并排的方式处理

background-attachment 是否固定图片位置

说明

scroll 拉动卷轴时，背景图片会跟着移动（缺省值）

fixed 拉动卷轴时，背景图片不会跟着移动

以长度定位background-position: x y

使用百分比定位 background-position: x% y%

说明

x% 往右移

y% 往下移

backgroud-position: 0% 0%; 左边上方

backgroud-position: 0% 50%; 左边中间

backgroud-position: 50% 0%; 中间上方

backgroud-position: 50% 50%; 正中间

backgroud-position:100% 0%; 右边上方

backgroud-position: 0% 100%; 左边下方

backgroud-position: 100% 50%; 右边中间

backgroud-position: 50% 100%; 中间下方

backgroud-position: 100% 100%; 右边下方

以关键字定位

关键字说明

top 上 ( y = 0 )

center 中 ( x = 50, y = 50 )

bottom 下 ( y = 100 )

left 左 ( x= 0 )

Exp:

background-position:center;

图片在指定背景中央X=50% Y=50% 位置

background-position: 200px 30px

十六、 注释的写法

在Html 中：

<-- footer -->
content
<-- end footer -->

在CSS 中：

/* ---------- header ----------------- */
style

十七、 CSS 的命名规范

1. id 的命名

(1) 页面结构

　　容器: container

　　页头：header

　　内容：content/container

　　页面主体：main

　　页尾：footer

　　导航：nav

　　侧栏：sidebar

　　栏目：column

　　页面外围控制整体布局宽度：wrapper

左右中：left right center

(2) 导航

　　导航：nav

　　主导航：mainnav

　　子导航：subnav

　　顶导航：topnav

　　边导航：sidebar

　　左导航：leftsidebar

　　右导航：rightsidebar

　　菜单：menu

　　子菜单：submenu

　　标题: title

　　摘要: summary

　　(3) 功能

　　标志：logo

　　广告：banner

　　登陆：login

　　登录条：loginbar

　　搜索：search

　　功能区：shop

　　标题：title

　　加入：joinus

　　状态：status

　　按钮：btn

　　滚动：scroll

　　标签页：tab

　　文章列表：list

　　提示信息：msg

　　当前的: current

　　小技巧：tips

　　图标: icon

　　注释：note

　　指南：guild

　　服务：service

　　热点：hot

　　新闻：news

　　下载：download

　　投票：vote

　　合作伙伴：partner

　　友情链接：link

　　版权：copyright

2. class 的命名

(1) 颜色: 使用颜色的名称或者16 进制代码, 如

　　.red { color: red; }

　　.f60 { color: #f60; }

　　.ff8600 { color: #ff8600; }

　　(2) 字体大小, 直接使用"font+ 字体大小" 作为名称, 如

　　.font12px { font-size: 12px; }

　　.font9pt {font-size: 9pt; }

　　(3) 对齐样式, 使用对齐目标的英文名称, 如

　　.left { float:left; }

　　.bottom { float:bottom; }

　　(4) 标题栏样式, 使用" 类别+ 功能" 的方式命名, 如

　　.barnews { }

　　.barproduct { }

　　注意事项::

u 一律小写;

u 尽量用英文;

u 不加中杠和下划线;

u 2 个组合的单词不用中杠和下划线可以将第二个单词的首字母大写（eg:mainContent ）；

u 尽量不缩写，除非一看就明白的单词.

3. 主要的站点css 文件

主要的 master.css

　　模块 module.css

　　基本共用 base.css （root.css ）

　　布局，版面 layout.css

　　主题 themes.css

　　专栏 columns.css

　　文字 font.css

　　表单 forms.css

　　补丁 mend.css

　　打印 print.css

十八、 Padding 影响宽度问题

如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin 属性吧，而不要去定义位于外面的标签的padding

十九、 完美的单象素外框线表格

table{border-collapse:collapse;}

td{border:1px solid #000;}

二十、 如果文字过长, 则将过长的部分变成省略号显示

二十一、 并不是所有样式都要简写

当样式表前定义了如p{padding:1px 2px 3px 4px} 时，在后续工程中又增加了一个样式上补白5px ，下补白6px 。我们并不一定要写成p.style1{padding:5px 6px 3px 4px} 。可以写成p.style1{padding-top:5px;padding-right:6px;}, 你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P 变了话，你定义的p.style1 的样式也要变。( 此种方法对后期修改样式很重要)

二十二、 几个常用到的CSS 细节处理上的样式

1 ）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;

2 ）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;( 不让其换行，不过只能处理文字在一行上的截断，不能处理多行。) （IE5 以上）FF 不能，它只隐藏。

*** 万能强制换行：white-space:normal;word-break:break-all;

禁止换行：white-space:nowrap

强制换行：word-wrap: break-word; word-break: normal;

.AutoNewline

{

/*word-break: break-all; 方法一必须*/

/*word-wrap:break-word;overflow:hidden; 方法二 */

/*word-wrap:break-word; word-break: normal; 方法三 */

word-wrap:break-word; word-break:break-all;

}

.NoNewline

{

/*word-break: keep-all; 方法一必须*/

white-space:nowrap;

}

3 ）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all; （IE5 以上）FF 不能。

4 ）<acronym title= ”输入要提示的文字” style= ”cursor:help; ”> 文字</acronym> 用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。

5 ）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)} 在IE6 及IE5 测试通过，FF 未通过，这是因为这个样式是IE 私有的东西；

6 ）FLASH 透明：选中swf, 打开原代码窗口，在</object> 前输入<param name= ”wmode ” value= ”transparent ”> 以上是针对IE 的代码。

针对FIREFOX 给<embed> 标签也增加类似参数wmode= ”transparent ”

7 ）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：

.pictures img {

filter: alpha(opacity=45); }

.pictures a:hover img {

filter: alpha(opacity=90); }

8 ）层在浏览器中居中对齐问题

body { text-align: center }

#content { text-align: left; width: 700px; margin: 0 auto }

9) 单行内容在层中垂直对齐问题

# content{height:19px; line-height:19px; } 缺点是要内容不要换行。

10 ）层在浏览器中垂直居中对齐问题

缺点是：水平、垂直方向上不能出现滚动条，只能是在一屏的情况下

其实解决的思路是这样的：首们需要position:absolute; 绝对定位。而层的定位，使用外补丁margin 负值的方法。负值的大小为层自身宽度高度除以2 。

如：一个层宽度是400 ，高度是300 。使用绝对定位距离上部与左部都设置成50% 。而margin-top 的值为－150 。margin-left 的值为－200 。这样我们就实现了层垂直居中于浏览器的样式编写。

请看实例代码：

div {

position:absolute;

top:50%;

left:50%;

margin:-150px 0 0 -200px;

width:400px;

height:300px;

border:1px solid red;

}

11 ）CSS 控制图片自适应大小

div img {

max-width:600px;

width:600px;

width:expression(document.body.clientWidth>600?"600px":"auto");

overflow:hidden;

}

二十三、 使用float 属性的元素要注意的问题

1. 利用border 属性确定出错元素的布局特性

　　使用float 属性布局一不小心就会出错。这时为元素添加border 属性确定元素边界，错误原因即水落石出。

2. float 元素的父元素不能指定clear 属性

　　MacIE 下如果对float 的元素的父元素使用clear 属性，周围的float 元素布局就会混乱。这是MacIE 的著名的bug ，倘若不知道就会走弯路。

3. float 元素务必指定width 属性

　　很多浏览器在显示未指定width 的float 元素时会有bug 。所以不管float 元素的内容如何，一定要为其指定width 属性。

　　另外指定元素时尽量使用em 而不是px 做单位。

4. float 元素不能指定margin 和padding 等属性

　　IE 在显示指定了margin 和padding 的float 元素时有bug 。因此不要对float 元素指定margin 和padding 属性( 可以在float 元素内部嵌套一个div 来设置margin 和padding) 。也可以使用hack 方法为IE 指定特别的值。

5. float 元素的宽度之和要小于100%

如果float 元素的宽度之和正好是100% ，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99% 。

二十四、 浏览器的兼容性问题（针对FF/IE6/IE7 ）

1.CSS hack: 区分IE6 ，IE7 ，firefox

区别FF ，IE7 ，IE6 ：

background:green !important; background:orange; *background:blue;

IE6 能识别* ，但不能识别 !important,

IE7 能识别* ，也能识别!important;

FF 不能识别* ，但能识别!important;

另外再补充一个，下划线”_ “,

IE6 支持下划线，IE7 和firefox 均不支持下划线。

于是大家还可以这样来区分firefox ，IE7 ，IE6

background:green!important; *background:orange; _background:blue;

注：不管是什么方法，书写的顺序都是firefox 的写在前面，IE7 的写在中间，IE6 的写在最后面。

2. 在firefox 和IE 中的BOX 模型解释不一致导致相差2px 解决方法

div{margin:30px!important;margin:28px;}

注意这两个margin 的顺序一定不能写反，!important 这个属性IE 不能识别，但别的浏览器可以识别。所以在IE 下其实解释成这样：div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

3. 条件性注释来选择不同的浏览器（比CSS hack 简洁）

<!–[if IE 6]>

<![endif]–>

4. 区分IE8

.color{

background-color: #CC00FF; /* 所有浏览器都会显示为紫色*/

background-color: #FF0000/9; /*IE6 、IE7 、IE8 会显示红色*/

*background-color: #0066FF; /*IE6 、IE7 会变为蓝色*/

_background-color: #009933; /*IE6 会变为绿色*/

二十五、 W3C 遵循的标准原则

1. 在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免 <colspan> <rowspan> 两个标记，经验表明，这两个标记会带来许多麻烦。

　　2. 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody> 标记，以便能够使这个大表格分块显示。

　　3. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记。

　　4. 原则上，我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸，而且建议 <img> 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 <img> 附上 width 和 height 属性。

　　5. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用<br> 来人工干预分段。

　　6. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。

　　7. 所有的字号都应该用样式表来实现，禁止在页面中出现 <font size=?> 标记。

　　8. 请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。

　　9. 中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。

　　10. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.

　　11. 网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：<a href=”aboutus/index.htm”> 而应该这样：<a href=”aboutus/”>

　　12. 嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。

　　13.“ 网页大小” 定义为网页的所有文件大小的总和，包括HTML 文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K 以下为合适。

　 14 . float 元素务必指定width 属性
　　很多浏览器在显示未指定width 的float 元素时会有bug 。所以不管float 元素的内容如何，一定要为其指定width 属性。
　　另外指定元素时尽量使用em 而不是px 做单位。

　　15 . float 元素不能指定margin 和padding 等属性
　　IE 在显示指定了margin 和padding 的float 元素时有bug 。因此不要对float 元素指定margin 和padding 属性（可以在float 元素内部嵌套一个div 来设置margin 和padding ）。也可以使用hack 方法为IE 指定特别的值。

　　16 . float 元素的宽度之和要小于100%
　　如果float 元素的宽度之和正好是100% ，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99% 。

二十六、 列表元素ul ol li dl dt dd 释义

　<ul>

</ul>

<dl>

</dl>

l dt 和dd 中可以再加入 ol ul li 和p

二十七、 清除浮动

clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

在Firefox 中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK 来对父级做一次定义，那么就可以解决这个问题。

.clearfix {

display:inline-block;

}

/* Hides from IE-mac /*/

* html .clearfix {

height:1%;

}

.clearfix {

display:block;

}

/* End hide from IE-mac */

** 这种用法在进行图文混排时比较多，但是不太好控制，用margin 配合clear{clear:both} 直接来控制。

二十八、 文字的处理

1. 一般的字体：

font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, " 宋体",sans-serif;

标题字体（h1/h2 ）：font-family: Cambria, Georgia, "Times New Roman", Times, serif;

2. 首字下沉：

P:first-letter{padding:10px,fontsize:32pt;float:left}

3. 拼音汉字：

二十九、 Min-height 多浏览器兼容问题

Div{

min-height:450px;

height:auto!important;

height:450px;

overflow:visible;????

}

三十、 CSS 布局口诀 - CSS BUG 顺口溜

· IE 边框若显若无，须注意，定是高度设置已忘记；

· 浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；

· 三像素文本慢移不必慌，高度设置帮你忙；

· 兼容各个浏览须注意，默认设置行高可能是杀手；

· 独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；

· 学布局须思路，路随布局原理自然直，轻松驾驭html ，流水布局少hack ，代码清爽，兼容好，友好引擎喜欢迎。

· 所有标签皆有源，只是默认各不同，span 是无极，无极生两仪—内联和块级，img 较特殊，但也遵法理，其他只是改造各不同，一个* 号全归原，层叠样式理须多练习，万物皆规律。

· 图片链接排版须小心，图片链接文字链接若对齐，padding 和vertical-align:middle 要设定，虽差微细倒无妨。

· IE 浮动双边距，请用display ：inline 拘。

· 列表横向排版，列表代码须紧靠，空隙自消须铭记。

三十一、 Web 中的字体应用

总结几套实用而简单的font-family

font-family: Tahoma, Helvetica, Arial, sans-serif;

Tahoma 系的中性字体。推荐使用在13px 以上的环境。

font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

Verdana 系的宽扁字体。推荐在11px 以下环境使用。

font-family: Geogia, Times New Roman, Times, serif;

衬线字体的不二之选。多用于大号的标题字体16px 以上。

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

一系列等宽字体。写代码很好用。另外，如果觉得Lucida Console 太宽的话，可以换成比较窄的Lucida Sans Typewriter 。话说老赵blog 上的代码块使用的就是Lucida Sans Typewriter 哟~

如果在 div 的 style 中把 visibility 设为 hidden 则 div 隐藏，但是它会占据空白空间，而如果设置成 display ： none 则不占据空白空间；
而 visible="false" 则 div 不返回在 html 中；

CodeSnippet小笨蛋

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Div+CSS 规则整理

一、善用css缩写规则 /*注意上、右、下、左的书写顺序*/1. 关于边距（4边）：1px 2px 3px 4px (上、右、下、左)1px 2px 3px （省略的左等于右）1px 2px (省略的上等于
复制链接

扫一扫