后端人员常用的前端知识

最新推荐文章于 2022-08-13 09:55:43 发布

放下poc让我来

最新推荐文章于 2022-08-13 09:55:43 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/qq_35986866/article/details/90711217

版权

进入新公司接近两个月，让我这个后端人员做了两个月的前端开发。布局中总会踩坑，总结一些技巧分享一下。

1. 两个盒子模型

布局之前先初始化一下样式，因为不同的浏览器会设置默认的一些样式，例如 body 的 margin、ul li 或者 ol li 的默认样式。

chrome浏览器默认样式

确定一下用哪个盒子模型，才能让自己设置的 margin、padding、border 跟自己想布局的那样展示出来。盒子模型如下图，中心的 content 是布局的地方，依次往外分别是 padding border margin。

第一种，为 W3C的标准盒子模型，特点： css 中设置的 width 就是content 的长度，例子如下，设置的 width 为 100px 浏览器渲染之后， div 会占 120px；

 <style>
        div{
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
        }
        #div1{
            width: 100px;
            height: 100px;
            padding: 5px;
            border: 5px solid yellow;
            background-color: red;
        }
</style>

<body>
    <div id="div1"></div>
</body>

第二种，为 ie盒子模型（我一般用这个），特点： css 中设置的 width 就是 content + padding + border 的长度，例子如下，设置的 width 为 100px 浏览器渲染之后， div 会占 100px；

2. position 定位

经常在面试的时候遇到。第一种，普通的 position 不设置的话默认为 static ，不会脱离文档流。第二种 relative 不会脱离文档流，本身位置会被保留，但是本身的元素会相对于原来文档流中的位置进行定位。如果没有设置 top left right bottom 的话，元素就会在原位置，例子如下

<style>
        div{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #container{
            width: 800px;
            height: 500px;
            margin: 0 auto;
            border: 1px  solid red;
        }
        #div1{
            width: 100px;
            height: 100px;
            border: 1px  solid red;
        }
        #div2{
            width: 100px;
            height: 100px;
            border: 1px  solid red;
            position: relative;
            left: 10px;
        }
        #div3{
            width: 100px;
            height: 100px;
            border: 1px  solid red;
        }
</style>

<body>
    <div id="container">
        <div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
    </div>
</body>

第三种 absolute 会脱离文档流，本身位置不会被保留，本身的元素会相对于离它最近的 position 不是 static 的父元素进行定位。如果没有设置 top left right bottom 的话，元素就会在原位置。一般常用的用法：外层元素相对定位，内层元素绝对定位，这样交替定位。水平垂直居中(top: 0; left: 0; right: 0; bottom: 0;margin: auto;)

第四种， fixed 会相对于界面固定，一般用于广告，导航栏，功能栏上。