CSS与HTML页面布局技巧详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43815680/article/details/108895492

本文介绍了CSS布局的一些实用技巧，包括浮动布局、首行缩进设置、快速生成标签、处理内边距导致的容器尺寸问题、输入框默认文本、背景色辅助定位、高度设定、页面底部固定、小图标方向符号、内容超出处理以及自定义列表和版权显示的方法。同时，文章还回顾了浅拷贝和深拷贝的概念与实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1
子容器使用了浮动 需要给父容器加清除浮动
子容器 float : left ;
父容器 cle:after{ content : "";display : block; clear : both}

2
调整 icons 小图标有几个很好的方法

// 引入图片
background: url('../icons/1.jpg');
// 不重复显示 
background-repeat: no-repeat;
// 左右位置
background-position: 6px 6px;
// 上下左右拉长/缩小
background-size: 22px 27px;

3
/* 首行缩进 */
text-indent: 12px;

生成多个 li和a 标签直接写
li * 8 > a 就快速生成这样的
在这里插入图片描述

4
使用 padding的时候要注意 比如说加了padding-left / padding-right 需要width 宽度减掉 *2 如果加的是padding-top / padding-bottom 需要把 height 减掉 *2
不然会将容器撑得很大

5
input 里面的默认的内容使用 <input type="text" placeholder="搜索公司/职位/地点">

常规情况下 文字在一个框内居中 怎么实现？

 	height: 45px;
 	//这个实现水平方向居中
    text-align: center;
    //行高等于容器的高度 可以实现垂直方向居中
    line-height: 45px;

7
常规情况下写页面从最外层写
而且可以写的时候加一个背景色后面删掉方便定位
一般使用 red pink gold 这种不带特殊数字的这样一看就是自己加的多余的部分

8
很多时候 给了一个 div 宽度 width 和背景色 background 但是却没有效果？
需要给个高度一般给父级的高度 height

9
做页面的时候 没办法看到底部的东西通常有两个方法处理？
1、给body 加 body style="height:10000px"
2、在body 底部加 br

10
小图标向左和向右可以用 gt > lt <

<span> &gt; </span>    还有&lt;

11
数组去重两种常用方法

    // 数组去重 
    // 方法一： es6  set()
     let arr = [3, 5, 2, 2, 5, 5];
    let unique = [...Array.from(new Set(arr))];
     console.log(unique);

    // 方法二： indexOf()
    let arr = [3, 5, 2, 2, 5, 5];
    getFileArray(arr);
    function getFileArray() {
        var newArr = [];
        arr.forEach(e => {
            if (newArr.indexOf(e) !== -1) {
                return;
            } else {
                newArr.push(e);
            }
        })
        return newArr;
    }

12
浅拷贝和深拷贝 复习

浅拷贝

    // 来 浅拷贝走一波 
    function simpleCopy(obj1) {
        var obj2 = Array.isArray(obj1) ? [] : {};
        for (let i in obj1) {
            obj2[i] = obj1[i]
        }
        return obj2;
    }
    // 下面是测试的方法
    var obj1 = {
        a: 1,
        b: 2,
        c: {
            d: 3,
        }
    };
    var obj2 = simpleCopy(obj1);
    console.log(obj2);
    obj2.c.d = 5;
    console.log(obj1);
    console.log(obj2);

深拷贝实现

       // 深拷贝 走一手 
    function deepClone(obj) {
        // 判断是数组还是对象  是数组返回true  则等于第一个 []
        let objClone = Array.isArray(obj) ? [] : {};
        // typeof Array, Object, new function() 都会返回'object',
        // 所以使用typeof不能准确的判断变量是否为object
        if (obj && typeof obj === 'object') {
            // 进行循环 判断对象是否包含某个key 属性
            for (key in obj) {
                if (obj.hasOwnProperty(key)) {
                    // 判断obj子元素是否为对象 如果是 递归复制
                    if (obj[key] && typeof obj[key] === 'object') {
                        objClone[key] = deepClone(obj[key]);
                    } else {
                        // 如果不是对象 就简单复制 
                        objClone[key] = obj[key];
                    }
                }
            }
        }
        return objClone;
    }
    // 测试一手 
    let a = {
        a: 1,
        b: 2,
        c: {
            d: 3,
        }
    }
    let b = deepClone(a);
    console.log(b);
    b.c.d = 77;
    console.log(a);
    console.log(b);

写页面一块的内容

1、先写最外层的一块  这个地方 通常只加个背景色就可以  
2、 再写个class 放里面的内容 这个时候 需要 加宽高
3、单独设置每一部分的属性， 需要注意的是 加padding的时候啊 ， 需要减去宽高，不然会将整个容器撑的大于设定的初始值

14
我现在有很多的内容，超出了我的容器，我现在想实现超出的部分变成省略号的样子 我怎么操作？
异常的舒服超出之后就变成了这个样子

 /* 强制不换行   */
    white-space: nowrap;
    /* 超出容器的部分 隐藏 */
    overflow: hidden;
    /* 超出的部分变成省略号 */
    text-overflow: ellipsis;

实现的效果是这样的
在这里插入图片描述
当然还有一种方式文本就写这么多
后面加上点点点也是很舒服的

15
有个经验常规情况下一个容器里面有一条虚线
我们直接用它上面元素的border-bottom : 1px dashed #颜色
一般还会加一个 padding-bottom : 16px 往下面放

16
像这种东西可以使用自定义列表的方式写
dl dt dd
在这里插入图片描述
写出来是这样的结构


                <dl class="fl q_1">
                    <dt>企业服务</dt>
                    <dd>企业抢人宝典</dd>
                    <dd>公司搜索</dd>
                    <dd>拉钩APP</dd>
                </dl>
                <dl class="fl y_1">
                    <dt>企业服务</dt>
                    <dd>企业抢人宝典</dd>
                    <dd>公司搜索</dd>
                    <dd>拉钩APP</dd>
                </dl>
                <dl class="fl l_1">
                    <dt>企业服务</dt>
                    <dd>企业抢人宝典</dd>
                    <dd>公司搜索</dd>
                    <dd>拉钩APP</dd>
                </dl>