CSS常见布局技巧

发布于 2023-07-11  253 次阅读


1. 常见布局技巧

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

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

1.1. margin负值运用

1571522666082

1571522683897

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

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

1.2. 文字围绕浮动元素

效果

1571522777745

布局示意图

1571522761996

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

1.3. 行内块巧妙运用

1571522898744

页码在页面中间显示:

  1. 把这些链接盒子转换为行内块, 之后给父级指定 text-align:center;
  2. 利用行内块元素中间有缝隙,并且给父级添加 text-align:center; 行内块元素会水平会居中

1571522910580

1.4. CSS 三角强化 案例

1.4.1 原理

1571550959181

1571551000391

1571548058053

<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>

1.4.2 案例效果

1571548099631

1.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>

2. CSS 初始化

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

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

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

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

Unicode编码字体:

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

比如:

黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

3. CSS 用户界面样式

什么是界面样式

所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。

  • 更改用户的鼠标样式
  • 表单轮廓
  • 防止表单域拖拽

3.1 鼠标样式 cursor

 li {
    cursor: pointer; 
 }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

1571521805183

3.2 轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框。

 input {
    outline: none; 
 }

3.3 防止拖拽文本域 resize

实际开发中,我们文本域右下角是不可以拖拽的。

 textarea{ 
    resize: none;
 }
如人饮水,冷暖自知。
最后更新于 2023-08-20