html&&css知识汇总

最新推荐文章于 2024-05-28 14:55:45 发布

前端爆米花

最新推荐文章于 2024-05-28 14:55:45 发布

阅读量340

点赞数

分类专栏：前端 css html 文章标签： css html

本文链接：https://blog.csdn.net/weixin_43745003/article/details/108772775

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

本文汇总了HTML和CSS的基础与进阶知识点，包括HTML的语义化、面试题，CSS的定位方式、水平垂直居中、rem响应式布局及面试问题。深入探讨了如position属性、margin重叠、BFC概念以及使用flex实现布局的方法。

摘要由CSDN通过智能技术生成

html

规范

尽量使用双引号
<img src="1.jpg" />
<div style="color:red;"><div/>


HTML5标准模版
<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <!--使用最高版本IE浏览器-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="网站说明，不要超过 120  个汉字" />
  <meta name="Keywords" content="关键词，限制在6～8个关键词左右" />
  <title>HTML5标准模版</title>
  </head>
  <body>
  </body>
</html>

面试题

1. html语义化的好处是什么？

答案解析

让人更容易读懂，增加代码可读性
让搜索引擎更容易读懂，有利于SEO

css

规范

/*选择器 与 { 之间必须包含空格。*/
.selector {
}

/*属性名与 : 之间不允许包含空格， : 与 属性值之间必须包含空格。*/
font-size: 12px;

定位

position: static 无定位（默认值）
position: relative 相对定位（相对于自身，在标准流的位置继续占有）
position: absolute 绝对定位（相对于relative、absolute、fixed的父级或浏览器，不占位置）
position: fixed 固定定位（相对于浏览器，不占位置，不随滚动条滚动）

水平垂直居中

    /*方案1*/
    .container-1{
        /*文字水平居中*/
        text-align: center;
        /*line-height实现垂直居中，要和高度一致*/
        line-height: 200px;
        height: 200px;
    }
    /*方案2*/    
    .container-2 {
        position: relative;
    }
    .container-2 .item {
        width: 300px;
        height: 100px;
        position: absolute;
        left: 50%;
        margin-left: -150px;
        top: 50%;
        margin-top: -50px;
    }
    /*方案3*/    
    .container-3 {
        position: relative;
    }
    .container-3 .item {
        width: 200px;
        height: 80px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }
    /*方案4*/    
    .container-4 {
        position: relative;
    }
    .container-4 .item {
        width: 100px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

github地址

rem响应式布局

针对不同范围的屏幕宽度设置指定的rem

    @media only screen and (max-width: 374px) {
        /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
        html {
            font-size: 86px;
        }
    }
    @media only screen and (min-width: 375px) and (max-width: 413px) {
        /* iphone6/7/8 和 iphone x */
        html {
            font-size: 100px;
        }
    }
    @media only screen and (min-width: 414px) {
        /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
        html {
            font-size: 110px;
        }
    }

针对屏幕宽度设置rem，相当于百分比布局

    document.addEventListener('DOMContentLoaded', () => {
      const html = document.querySelector('html')
      let fontSize = window.innerWidth / 10
      // fontSize = fontSize > 50 ? 50 : fontSize
      html.style.fontSize = fontSize + 'px'
    })

面试题

2. 块状元素、内联元素分别有哪些？

答案解析

块状元素display:block ：独占一行，有div、h1、h2、p、table、ul、ol等
内联元素display:inline ：不可设宽高，margin上下无效，有span、img、input、button等
行内块元素display:inline ：可设宽高，不自动换行

3. 如下代码，请问div1的offsetWidth（可见宽度）是多大？

答案解析

答案：offsetWidth在content-box为122px，在border-box为100px
box-sizing: content-box; ：默认，offsetWidth=122px=padding + div内容（width） + border
box-sizing: border-box; ： offsetWidth=100px=width-padding + div内容 + border

github地址

4. AAA和BBB之间的距离是多少？

答案解析

答案：15px
margin纵向重叠：相邻元素的`margin-top``和margin-bottom`会发生重叠
margin纵向重叠：相邻元素的`margin-top``和margin-bottom`会发生重叠

github地址

5. margin为负时会发生什么？

答案解析

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

github地址
知识拓展：圣杯布局（包含clearfix）
知识拓展：双飞翼布局

6. 什么是BFC？

答案解析

BFC是页面上一个隔离的独立容器，容器内的元素不影响外面元素。
常见形成条件
- float不是none
- overflow不是visible
- position是absoult或fixed

github地址

7. 请用flex实现一个三点的骰子
github地址

前端爆米花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html&&css知识汇总

html规范尽量使用双引号<img src="1.jpg" /><div style="color:red;"><div/>HTML5标准模版<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatib
复制链接

扫一扫

专栏目录