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 ...
随机推荐
- P2P平台很赚钱么？
最近几年,搞P2P网贷和财富投资相关的金融周边公司,多了很多,楼下门店和电梯里的贷款小广告,真是多啊. 大家都去搞一件事的时候,很可能是大家都觉得这件事有利可图.但事实是,赚钱的总是少数,看到别人搞的 ...
- 洛谷—— 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 ...
- FTP中的授权规则
在授权规则中,你可以管理自己的FTP站点以怎样的方式进行访问,比如每个进入站点的人都需要输入用户名密码.正则可以在授权规则中删除默认的配置“允许匿名用户读取”的规则. 也可以在此处,对不同的组或用户进 ...
- 折叠table中的tr
code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- Mac怎么设置wifi热点
苹果 Mac 系统中要把无线当作 Wifi 热点来用的话,需要电脑有其它网络接入才可以,也就是说它需要一个可以用于上网的网络,比如有线网络.尤其是对于使用 MacBook Pro 或 MacBook ...
- Oracle以系统管理员的方式登录失败
解决方法: 因为SYS是在数据库之外的超级管理员,所以我们在登录的时候输入sys后在输入命令:password as sysdba 就可以!例如:输入口令: m1234 as sysdba 参考文章 ...
- 25、写一个USB摄像头驱动程序（有ioctrl分析）
videobuf2-core.h中的vb2_buffer,记录了v4l2_buffer ,驱动可以对vb2_buffer的v4l2_buffer进行操控, vb2_buffer是v4l2框架层的代码, ...
- SDI与ASI 接口具体解释介绍
分量编码 在对彩色电视信号进行数字化处理和传输是.一种经常使用的方式是分别对其3个分量(Y,R-Y.B-Y)进行数字化编码.这就是分量分量编码.另外还有全信号编码,全信号编码是对彩色全电视信号直接进行 ...
- 运行一个Hadoop Job所需要指定的属性 分类： A1_HADOOP 2015-02-02 21:33 231人阅读 评论(0) 收藏
1.设置job的基础属性 Job job = new Job(); job.setJarByClass(***.class); job.setJobName("job name") ...
- [Node.js] Use nodejs-dashboard event loop delay with hrtime()
In this lesson, you will learn how to use the Formidable nodejs-dashboard event loop delay to identi ...