紧邻盒子边框叠加变粗问题 && 文字环绕图片 && CSS初始化
紧邻盒子边框叠加变粗问题
在实际开发中,碰到紧挨的盒子,如果此时都有边框的话,就会出现,边框变粗的情况,类似,表格边框 border-spacing: 0; 边框变粗
而不同的是,表格采用的是:border-collapse: collapse;,普通盒子不能使用这个属性
此时可以根据相应的排列方向,使用 合适的 margin 负值实现边框覆盖,而非叠加。
移动的元素会覆盖其他元素,因此,要显示出被覆盖那条边框时,需要给被覆盖盒子加上相对定位,因为定位的盒子会盖住其他盒子
div{
float: left;
width: 100px;
height: 100px;
border: 1px solid transparent;
margin-left: -1px;
}
div:hover{
border: 1px solid #25d366;
position: relative;
/*如果盒子本身就有定位,则需要设置较大的 z-index 来覆盖后面盒子的边框*/
z-index:1;
}
文字环绕图片
float (浮动)效果原本就是为了实现文字环绕图片而创建的规范;只是正好可以用来布局。
直接将图片和文字写在一个盒子里面,然后对图片进行相应方向的浮动即可实现文字环绕图片效果
记住:图片写在前面,如果图片在文字后面,那么是没有效果的,因为浮动只影响后面的元素,不影响前面的元素
CSS初始化
不同浏览器 对标签的默认值可能不一致,因此,在实际开发中,需要对默认样式进行统一设置。保证不同浏览器的表现一致
每个页面都要设置
以下参考
* {
margin: 0;
padding: 0
}
em, i {
font-style: normal
}
li {
list-style: none
}
img {
border: 0;
vertical-align: middle
}
button {
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button, input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
/*\5B8B\4F53 = 宋体, Unicode 编码,防止浏览器解析乱码 */
body {
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide, .none {
display: none
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}