黑马程序员前端-CSS常见布局技巧+案例

黑马程序员官方

已于 2022-04-08 18:20:25 修改

阅读量907

点赞数

分类专栏： 2023年前端—入门到精通文章标签：前端自学前端前端自学 css CSS

于 2022-04-07 17:16:58 首次发布

本文链接：https://blog.csdn.net/itcast_cn/article/details/124021033

版权

2023年前端—入门到精通专栏收录该内容

323 篇文章 235 订阅

订阅专栏

按照HTML+CSS的学习顺序笔记已经更新了29篇内容了，因为篇幅问题，请看文末。

今天来学常见布局技巧。

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

margin负值的运用
文字围绕浮动元素
行内块的巧妙运用
CSS三角强化

一、margin负值运用

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

二、文字围绕浮动元素

效果：

布局示意图：

巧妙运用浮动元素不会压住文字的特性。

三、行内块巧妙运用

四、CSS三角强化案例

4.1 原理

<style>
    .box1 {
        width: 0;
        height: 0;
        
        /* 把上边框宽度调大 */
        /* border-top: 100px solid transparent;
        border-right: 50px solid skyblue; */
        /* 左边和下边的边框宽度设置为0 */
        /* border-bottom: 0 solid blue;
        border-left: 0 solid green; */
        
        /* 1.只保留右边的边框有颜色 */
        border-color: transparent red transparent transparent;
        /* 2. 样式都是solid */
        border-style: solid;
        /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
        border-width: 100px 50px 0 0 ;
    }

</style>
</head>
<body>
    <div class="box1"></div>
</body>

4.2 案例效果

4.3 参考代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS三角强化的巧妙运用</title>
        <style>
            .price {
                width: 160px;
                height: 24px;
                line-height: 24px;
                border: 1px solid red;
                margin: 0 auto;
            }
            .miaosha {
                position: relative;
                float: left;
                width: 90px;
                height: 100%;
                background-color:red;
                text-align: center;
                color: #fff;
                font-weight: 700;
                margin-right: 8px;

            }
            .miaosha i {
                position: absolute;
                right: 0;
                top: 0;
                width: 0;
                height: 0;
                border-color: transparent #fff transparent transparent;
                border-style: solid;
                border-width: 24px 10px 0 0;
            }
            .origin {
                font-size: 12px;
                color: gray;
                text-decoration: line-through;
            }
        </style>
    </head>
    <body>
        <div class="price">
            <span class="miaosha">
                ¥1650
                <i></i>
            </span>
            <span class="origin">¥5650</span>
        </div>
    </body>
</html>

五、CSS初始化

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

简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）

每个网页都必须首先进行 CSS初始化。

这里我们以京东CSS初始化代码为例。

5.1 Unicode编码字体

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如：

黑体 \9ED1\4F53

宋体 \5B8B\4F53

微软雅黑 \5FAE\8F6F\96C5\9ED1

六、往期合集

2022年前端学习路线图：课程、源码、笔记，技术栈
欢迎小伙伴们留言哦，期待看到大家的进步。另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。

黑马程序员官方

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
黑马程序员前端-CSS常见布局技巧+案例

按照HTML+CSS的学习顺序笔记已经更新了29篇内容了，因为篇幅问题，请看文末。今天来学常见布局技巧。巧妙利用一个技术更快更好的布局：margin负值的运用文字围绕浮动元素行内块的巧妙运用 CSS三角强化一、margin负值运用1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）二、文字围绕浮动元素效果：布局示意
复制链接

扫一扫