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 ...
随机推荐
- .NetCore微服务Surging新手傻瓜式 入门教程 学习日志---先让程序跑起来（一）
原文:.NetCore微服务Surging新手傻瓜式 入门教程 学习日志---先让程序跑起来(一) 写下此文章只为了记录Surging微服务学习过程,并且分享给广大想学习surging的基友,方便广大 ...
- 【CS Round #48 (Div. 2 only)】Dominant Free Sets
[链接]h在这里写链接 [题意] 让你在n个点组成的集合里面选取不为空的集合s. 使得这里面的点没有出现某个点a和b,ax>=bx且ay>=by; 问你s的个数. [题解] 我们把这些点按 ...
- 学习redis--简介（一）
1.什么是redis? Redis是使用c语言开发的一个高性能键值数据库.Redis通过键值类型来存储数据.它通过提供多种键值数据类型来适应不同场景的存储需求. 2.redis支持哪些数据类型 Key ...
- (转)Nginx在RedHat中系统服务配置脚本
转自:http://binyan17.iteye.com/blog/1688308 以下代码是在前人的基础上,结合自己服务器实际情况修改的,本人服务器环境是:CentOS 6.31.创建启动脚本, ...
- jQuery异步提交form表单
使用jquery.form.js官网现在地址表单插件来实现异步form表单提交. 先看看官方的介绍: /* Usage Note: ----------- Do not use both ajaxSu ...
- centos中的配置文件 分类： B3_LINUX 2015-04-03 22:21 184人阅读 评论(0) 收藏
/etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置. /etc/bashrc:为每一个 ...
- OpenCV从入门到放弃(五):像素！
一.概念 1.图像本质上面是由数值组成的矩阵.矩阵中的一个元素相应一个像素. 2.对于灰度图像(黑白图像),像素是8位无符号数(CV_8U).0表示黑色,255表示白色.对于彩色图像,是用三原色数据合 ...
- [AngularFire2] Update multi collections at the same time with FirebaseRef
At some point, you might need to udpate multi collections and those collections should all updated s ...
- keil快捷键
- SpringMVC上传图片总结（1）---常规方法进行图片上传，使用了MultipartFile、MultipartHttpServletRequest
原文地址:https://blog.csdn.net/chenchunlin526/article/details/70945877 SpringMVC上传图片总结(1)---常规方法进行图片上传,使 ...