暑期实习好难找，前端面试学习之CSS

最新推荐文章于 2024-11-11 09:45:18 发布

qq_43157006

最新推荐文章于 2024-11-11 09:45:18 发布

阅读量710

点赞数 21

文章标签：前端学习 css

本文链接：https://blog.csdn.net/qq_43157006/article/details/138659735

版权

暑期实习好难找，前端面试学习之CSS

一、CSS布局

1.盒子模型的宽度

offsetWidth = (内容宽度width+内边距padding+边框borders) 与外边距无关
例：

div{  //求这个盒子的offsetWidth
            width: 100px;
            height: 300px;
            padding: 10px;
            border: 1px solid pink;
            margin: 10px;
        }

答：offsetWidth = 100 + 210 + 21 =122px
PS: 要想让offsetWidth=100px,在样式中添加 box-sizing：border-box;

2.margin纵向重叠

规则：相邻元素的margin-top和margin-bottom会重叠
空白内容 p标签也会重叠
例：求AAA与BBB的距离 15px

p {    
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
  }
<body>
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>
</body>

margin负值问题

margin-top/margin-left为负值，代表元素向上/向左移动
margin-right为负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响

3. CSS选择器优先级

id > class / 属性 / 伪类 > 标签/伪元素

请写出下列三个div的颜色

 #container p {
            color: blue;
        }

        div #p1,
        div #p2 {
            color: red;
        }

        #container p.yellow-text {
            color: yellow;
            font-weight: blod;
        }

        #container p.green-text {
            color: green;
            font-weight: blod;
        }

        div p {
            color: gray;
        }
<div id="container">
        <p id="p1" class="yellow-text">100</p>
        <p id="p2" class="green-text">200</p>
        <p id="p3">300</p>
    </div>

4.BFC理解和应用

Block Format context，块级格式化上下文，是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。
形成条件：
float不是none
position是absolute/fixed
overflow不是visible
display是flex/inline-block

5. float布局

float布局如何实现圣杯布局和双飞翼布局

目的：三栏布局，中间一栏最先加载和渲染（内容最重要）；两侧内容固定，中间内容随宽度自适应；一般用于PC网页
使用float布局；两侧使用margin负值，以便和中间内容横向重叠；防止中间内容被两侧覆盖，圣杯用padding, 双飞翼用margin (代码手写)

6. flex布局

flex实现一个三点的色子布局

flex-direction：主轴的方向横轴/纵轴
justify-content：主轴的对齐方式
align-items：交叉轴对齐方式
flex-wrap：是否换行
align-self：子元素在交叉轴的对齐方式

二、CSS定位

1.absolute和relative定位

   Relative依据自身定位；absolute依据最近一层的定位元素定位

2.居中对齐的实现方式

水平居中
对于inline元素：text-align:center
对于block元素：margin:auto
对于absolute元素：left:50% + margin-left负值
垂直居中
对于inline元素：line-height的值等于height
对于absolute元素：top:50% + margin-top负值
对于absolute元素：transform:translate(-50%,-50%)
对于absolute元素：top,left,bottom,right = 0 + margin: auto

三、CSS响应式

1.rem是什么

rem是一个长度单位，具有“阶梯”性

有哪些常见的长度单位？

px,绝对长度单位，最常用
em,相对长度单位，相对于父元素，不常用
rem,相对长度单位，相对于根元素，常用于响应式布局

2.响应式布局的常见方案

media-query(媒体查询),根据不同屏幕宽度设置根元素font-size
再利用rem，基于根元素的相对单位及逆行响应式布局

3.网页视口尺寸

//屏幕高度 window.screen.height
//网页视口高度 window.innerHeight
//body高度 document.body.clientHeight
vh/vw 解决rem阶梯性的弊端 vamx = max(vh,vm)
vh = 网页视口高度 / 100 vw = 网页视口宽度 / 100