前端基础复习（一）

最新推荐文章于 2024-10-14 17:09:38 发布

Lux Lin

最新推荐文章于 2024-10-14 17:09:38 发布

阅读量88

点赞数 2

分类专栏：前端面试文章标签：面试 html5 css3 html css

本文链接：https://blog.csdn.net/weixin_46728068/article/details/119732183

版权

前端面试专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、HTML CSS

（1）块状元素 & 内联元素？

display:block/table; // div h1 h2 table ul ol p ...

display:inline/inline-block; // span img input button ...

（2）盒子模型的宽度？
在这里插入图片描述

offsetWidth = （内容宽度+内边距+边框） ， 无外边距

122px

把offsetWidth变成100px？
box-sizing: border-box

（3）margin纵向重叠问题
在这里插入图片描述

相邻的margin-top 和 margin-bottom 会发生重叠
空白内容的<p></p> 也会重叠
15px

（4）margin负值问题

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

（5）BFC理解与应用

Block format context 块级格式化上下文

一块独立渲染区域，内部元素的渲染不好影响边界以外的元素

形成BFC条件

 - float被设置
 - position设置为absolute或fixed
 - overflow不是visble(hiding)
 - display 是 flex inline-block 等
 
 常见应用： 清除浮动

（6）float布局

圣杯布局和双飞翼布局的目的

 - 三栏布局，中间一栏最先加载和渲染（内容最重要）
 - 两次内容固定，中间内容随着宽度自适应
 - 一般用于PC网页

（7） flex布局

justify-content　　项目在主轴上的对齐方式
align-items（align-self）　　项目在交叉轴上如何对齐

实现一个点数为3的骰子
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;

            display: flex;
            justify-content: space-between;
        }
        .item {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }
        .item:nth-child(2) {
            align-self: center;
        }
        .item:nth-child(3) {
            align-self: flex-end;
        }
   </style>
<body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>

（8）相对定位、绝对定位
absolute : 依据自身定位
relative : 依据最近一层的定位元素定位

定位元素： absolute relative fixed
body

(9)居中

水平居中：

inline元素： text-align ： center
block元素： margin ：auto
absolute 元素： left : 50% + margin-left 负值

垂直居中：

inline元素：line-height 的值等于height值
absolute元素： top：50% + margin-top 负值
absolute元素： transform(-50%, -50%)
absolute元素： top,left,bottom,right = 0+ margin:auto

（10） line-height继承
出现百分数，按照父级元素继承，非本级。

    <style type="text/css">
        body {
            font-size: 20px;
            line-height: 200%;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }
    </style>