4.常见布局技巧、CSS初始化

ybi8bo007

已于 2023-08-22 12:47:02 修改

阅读量61

点赞数

分类专栏：前端——CSS 文章标签： css 前端 css3 html

于 2023-07-13 13:52:37 首次发布

本文链接：https://blog.csdn.net/m0_74891783/article/details/131700797

版权

前端——CSS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

巧妙利用一个技术更快更好的布局：
1.margin负值的运用
2.文字围绕浮动元素
3.行内块的巧妙运用

4.1 margin负值运用

1.让每个盒子的margin值往左侧移动 -1px 正好压住相邻盒子的边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有定位，则加相对定位(保留位置) ，如果有定位，则加 z-index)

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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; */
            /* 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>
</html>

4.2 文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性
【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .b {
            width: 300px;
            height: 70px;
            background-color: pink;
            margin: 100px auto;
            padding: 5px;
        }
        .p {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }
        .p img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="b">
        <div class="p">
            <img src="images/img.png" alt="">
        </div>
        <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>
</body>
</html>

在这里插入图片描述

4.3 行内块巧妙运用

如何使页码在页面中间显示:
1.把这些链接盒子转换为行内块元素，然后给父级指定 text-align: center;
2.利用行内块元素中间有缝隙，并且给父级添加text-align: center; 行内块元素会水平会居中

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            text-align: center;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
        .box .pr {
            width: 85px;
        }
        .box .sp {
            background-color: #fff;
            border: 0;
        }
        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }
        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="pr">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#" class="sp">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#" class="sp">...</a>
        <a href="#" class="pr">下一页&gt;&gt;</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>
</html>

在这里插入图片描述

4.4 CSS初始化

不同浏览器对有些标签的默认值是不同的, 为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容, 我们需要对CSS初始化

简单理解:
CSS初始化是指重设浏览器的样式。(也称为CSS reset )
每个网页都必须首先进行CSS初始化

Unicode编码字体：
把中文字体的名称用相应的Unicode编码来代替, 这样就可以有效避免浏览器解释CSS代码时出现的乱码问题
比如:
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

ybi8bo007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.常见布局技巧、CSS初始化

css常见布局技巧、CSS初始化
复制链接

扫一扫

专栏目录