常见布局方式和CSS初始化学习

Root_src

已于 2022-04-02 14:17:04 修改

阅读量137

点赞数 1

分类专栏： CSS 文章标签： css html 学习前端

于 2022-04-01 23:08:21 首次发布

本文链接：https://blog.csdn.net/weixin_53317758/article/details/123910214

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

常见布局技巧

巧妙利用一个技术更快更好的布局：

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

Root_src

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见布局方式和CSS初始化学习

常见布局技巧巧妙利用一个技术更快更好的布局：margin负值巧妙利用让每个盒子margin 往左侧移动 -1px正好压住相邻盒字边框鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置）如果有定位，则加z-index） <style> ul li { position: relative; float: left; list-style...
复制链接

扫一扫