CSS拾遗（一）
重新看《精通CSS（第二版）》做一些记录，方便今后巩固。
1.外边距叠加
只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框、或绝对定位框之间的外边距不会叠加。
2.相对定位
使用相对定位时，无论是否移动，元素仍然占据原来的空间，其他元素也是对它原来空间的元素进行定位。
下面是未相对定位
<style>
.rela1 {
height: 50px;
width: 50px;
background-color: red;
margin: 50px;
}
.rela2 {
/*position: relative;
top: 50px;
left: 200px;*/
height: 50px;
width: 50px;
background-color: blue;
margin: 50px;
}
.rela3 {
height: 50px;
width: 50px;
background-color: green;
margin: 50px;
}
</style>
</head>
<body>
<div class="rela1"></div>
<div class="rela2"></div>
<div class="rela3"></div>
</body>
下面对蓝色块进行相对定位
<style>
.rela1 {
height: 50px;
width: 50px;
background-color: red;
margin: 50px;
}
.rela2 {
position: relative;
top: 50px;
left: 200px;
height: 50px;
width: 50px;
background-color: blue;
margin: 50px;
}
.rela3 {
height: 50px;
width: 50px;
background-color: green;
margin: 50px;
}
</style>
</head>
<body>
<div class="rela1"></div>
<div class="rela2"></div>
<div class="rela3"></div>
</body>
可以发现蓝色块相对定位，对下面的绿色块的定位没有任何影响。绝对定位则不同，绝对定位使元素的位置与文档流无关，不占据空间，
普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。绝对定位元素是相对于距离它最近的那个已定位的祖先元素来定位的。
3.层叠样式如何考虑特殊性、顺序与重要性
先考虑特殊性，就是1,1,1,1算数那个。若特殊性还不足以判断在相互冲突的规则中应该优先应用哪一个，在这种情况下，规则的顺序就可以起到决定作用：晚出现的优先级高。
如果这还不够，可以声明一条特殊的规则覆盖整个系统中的规则，这条规则的重要程度要比其他所有规则高。也可以在某条声明的末尾加上 !important。
4.浮动元素及清理
浮动元素让元素脱离文档流，不再影响不浮动的元素，实际上并非完全如此。如果浮动的元素后面有一个文档流中的元素，
那么这个元素的框会表现得像浮动元素根本不存在一样。但是，该元素的文本内容会受到浮动元素的影响，会移动以留出空间。
下面是红色框未浮动时的布局
<style>
.rela1 {
/*float: left;*/
height: 30px;
width: 30px;
background-color: red; }
.rela2 {
height: 100px;
width: 100px;
background-color: blue;
} </style>
</head>
<body>
<div class="rela1"></div>
<div class="rela2">
123
</div> </body>
下面是红色框浮动时布局
<style>
.rela1 {
float: left;
height: 30px;
width: 30px;
background-color: red; }
.rela2 {
height: 100px;
width: 100px;
background-color: blue;
} </style>
</head>
<body>
<div class="rela1"></div>
<div class="rela2">
123
</div> </body>
要想阻止蓝色框文本围绕在浮动框的外边，可以对其使用clear属性进行清理。
<style>
.rela1 {
float: left;
height: 30px;
width: 30px;
background-color: red; }
.rela2 {
clear: both;
height: 100px;
width: 100px;
background-color: blue;
} </style>
</head>
<body>
<div class="rela1"></div>
<div class="rela2">
123
</div> </body>
下面讲清浮动。
<style>
.outer {
background-color: #888;
width: 400px;
}
.rela1 {
float: left;
height: 30px;
width: 30px;
background-color: red; }
.rela2 {
float: left;
height: 100px;
width: 100px;
background-color: blue;
} </style>
</head>
<body>
<div class="outer">
<div class="rela1"></div>
<div class="rela2">
123
</div>
</div>
</body>
发现.outer消失了，因为浮动元素脱离了文档流，所以包围2个颜色框的div不占据空间。如何让包围元素在视觉上包围浮动元素呢？
需要在这个元素中的某个地方应用clear，可惜现在没有元素可以用clear，所以需要在最后一个元素下加一个空元素并且清理它。
<style>
.outer {
background-color: #888;
width: 400px;
}
.rela1 {
float: left;
height: 30px;
width: 30px;
background-color: red; }
.rela2 {
float: left;
height: 100px;
width: 100px;
background-color: blue;
}
.none {
clear: both;
} </style>
</head>
<body>
<div class="outer">
<div class="rela1"></div>
<div class="rela2">
123
</div>
<div class="none"></div>
</div>
</body>
然而增加不必要的元素并不优雅，另外的方式是对.outer进行浮动,不过下一个元素也会受到这个浮动元素的影响。有没有最好的办法，目前最佳实践是使用伪元素:after。
<style>
.clear { zoom:1; } /*==for IE6/7 Maxthon2==*/
.clear:after {
content:'';
display:block;
clear:both;
visibility:hidden;
}
.outer {
background-color: #888;
width: 400px;
}
.rela1 {
float: left;
height: 30px;
width: 30px;
background-color: red; }
.rela2 {
float: left;
height: 100px;
width: 100px;
background-color: blue;
} </style>
</head>
<body>
<div class="outer clear">
<div class="rela1"></div>
<div class="rela2">
123
</div>
</div>
</body>
通过在.clear类里增加一个空白内容，再进行清浮动即可。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，实践中发现可以不用。
对于IE6/7,使用zoom:1,也可以到达清浮动效果。
CSS拾遗（一）的更多相关文章
- CSS拾遗（二）
接CSS拾遗(一). 4. 不透明度 opacity: 0.8; filter: alpha(opacity=80); opacity: 0.8是标准的写法:filter: alpha(opacity ...
- python day 22 CSS拾遗之箭头，目录，图标
目录 day 4 learn html 1. CSS拾遗之图标 2. html文件的目录结构 3. CSS拾遗之a包含标签 4. CSS拾遗之箭头画法 day 4 learn html 2019/11 ...
- CSS拾遗+技巧集合
1.实现尖角符号. 这是内联inline-block标签独有的特性. <!DOCTYPE html> <html lang="en"> <head&g ...
- CSS拾遗
1:CSS样式的声明 选择符{ 属性:值; 属性:值; ... } 其中,选择符有: 标签选择器:标签名{样式} 类选择器: .类名{样式} ID选择器: #ID名{样式} 另外:样式属性的书写格式 ...
- css 拾遗
1, 实现尖角 <style> .up{ border-top: 30px solid red; border-right:30px solid gold; border-bottom:3 ...
- css拾遗（一）（inline-block,absolute）
一:inline-block中不要嵌套其他block标签,不然会破坏布局 <style> .left{ float:left; } .hide{ display:none; } a{ di ...
- python之路之css拾遗
做一个鼠标碰到就会自动加边框的效果 下边的代码,主要是使自动加边框的时候,加边框的部分不会跳动 实现一张图片的点击之后出现信息
- 3.CSS使用基础(2)
目录 一.CSS 链接 二.CSS 列表样式(ul) 三.CSS Table(表格) 四.盒子模型 五.CSS Border(边框) 六.CSS 轮廓(outline)属性 七.CSS Margin( ...
- 老男孩Python高级全栈开发工程师【真正的全套完整无加密】
点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师[真正的全套完整无加密] 课程大纲 老男孩python全栈,Python 全栈,Python教程,Django ...
随机推荐
- win7管理工具不可用
看看这个路径的文件夹是否还在C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Administrative Tools如果有缺失的文件夹就自己新 ...
- cmake的使用笔记
一. cmake使用网上还蛮多的.可是当你自己去用的时候,才觉得,都不是你想要的. 自己做个记录,用法全是基本用法. 二. 我在里面直接写注释说明了,直接贴了. 1. #cmake #1. # cma ...
- promis:异步编程
promise对象用于延迟计算和异步计算:一个promise对象代表着一个还未完成,但预期将来完成的操作 Image.png Image.png 打印结果如下: <!DOCTYPE html&g ...
- 洛谷—— P1765 手机_NOI导刊2010普及（10）
https://www.luogu.org/problem/show?pid=1765#sub 题目描述 一般的手机的键盘是这样的: 1 2 abc 3 def 4 ghi 5 jkl 6 mno 7 ...
- IIS服务器设置http自动跳转https方法
很多站长在部署SSL证书后,网站实现https加密访问,但考虑到用户习惯了http访问,很多外链也是http访问形式,所以需要在IIS服务器配置http自动跳转https,避免用户通过http访问不到 ...
- 一些mysql innodb的建议
http://blog.csdn.net/yunhua_lee/article/details/8239145 原文:http://dev.mysql.com/doc/refman/5.5/en/in ...
- 解题报告 之 HDU5305 Friends
解题报告 之 HDU5305 Friends Description There are people and pairs of friends. For every pair of friend ...
- diff_mysql_table_exec.py
#!/usr/bin/env python #-*- encoding: utf8 -*- import mysql.connector import sys import re import dat ...
- 移动web处理input输入框输入银行卡号四位一空格
由于项目上有需求要求输入银行卡号四位一空格的需求,改过好几版发现都有bug,最后优化了一版看起来效果还行,发帖留存. 难点是从中间插入和删除处理光标问题. 首先需要用到获取光标和设置光标的方法. // ...
- VCS编译仿真警告Warning
VCS编译仿真警告Warning 问题描述 在较大的SOC集成中,通常使用Perl脚本例化子模块到Top层,然而,有时会出现例化出来的输入端口名没有在Top层定义,而且端口的位宽为1bit,那么,ve ...