常见布局技巧
巧妙利用一个技术更快更好的布局:
margin负值巧妙利用
-
让每个盒子margin 往左侧移动 -1px正好压住相邻盒字边框
-
鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置)如果有定位,则加z-index)
<style>
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}/* ul li:hover {
1. 如果盒子没有定位,则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;} */
ul li:hover {
/* 2.如果li都有定位,则利用 z-index提高层级 */
z-index: 1;
border: 1px solid blue;
}
</style>
</head><body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
文字环绕浮动元素
浮动的本质就是为了给文字环绕,被文字围绕的,所以用浮动更方便快捷
效果如下
案例代码如下
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
}
.pic img {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="images/img.png" alt="">
</div>
<p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
</div>
行内块巧妙运用
-
把这些链接盒子转换为行内块, 之后给父级指定 text-align: center;
-
利用行内块元素中间有缝隙,并且给父级添加 text-align: center;行内块元素会水平会居中
CSS初始化可参考京东购物页面
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化 ctrl+f查找body
简单理解:CSS初始化是指重设浏览器的样式 (也称为CSS reset)
每个网页都必须首先进行CSS初始化
以京东CSS初始化网页为例
Unicode编码字体
把中文字体的名称用相应的Unicode编码来代替,就可以有效的避免浏览器解释CSS代码时候出现乱码的问题
比如:
黑体 \9ED1\4F53
宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1