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 ...
随机推荐
- Android 快速下载 Android framework 源码
官网 Android framework源码git地址 github: https://github.com/android/platform_frameworks_base google 官方: h ...
- Altium Designer中敷铜和板子一样大
- 2015，我的投资理财策略（股权众筹+P2P网贷+活期理财）
纸币流行,尤其是当今中国的市场经济,纸币几乎是一直是贬值的,每个人的财富都在被不断地稀释,可能是被政府.如果你不注意保值增值,你就越来越穷. 当年的万元户,在今天看来就是一个笑话,其实不怎么好 ...
- 全选或者单选checkbox的值动态添加到div
图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- Windows服务安装命令：
sc create YY.SmsPlatform.RemoteDataCenter binPath= "E:\YY.SmsPlatform\YY.SmsPlatform.RemoteData ...
- 全双工 串口 stm32
- Altium Designer设置走线间距
- 【BZOJ 2754】[SCOI2012]喵星球上的点名
[链接]h在这里写链接 [题意] n个人; 由姓和名组成.s1[i]和s2[i]; 有m个询问串. 问你第j个询问串,是否为某个人的姓或者名的子串. 如果是的话 ...
- swift项目第八天：自定义转场动画以及设置titleView的状态
如图效果: 一:Home控制器 /* 总结:1:设置登陆状态下的导航栏的左右按钮:1:在viewDidLoad里用三目运算根据从父类继承的islogin的登陆标识来判断用户是否登陆来显示不同的界面.未 ...
- 在scala中调用java代码
详细代码请见https://github.com/lujinhong/scalademo 在scala中调用java代替非常非常简单,直接调用即可 (一)一个简单示例 1.创建一个java类 pa ...