html&css

最新推荐文章于 2024-07-24 20:42:50 发布

前端爆米花

最新推荐文章于 2024-07-24 20:42:50 发布

阅读量143

点赞数

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

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

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

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;
    }

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 ：可设宽高，不自动换行

前端爆米花

关注

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-Compa
复制链接

扫一扫

专栏目录