HTML&CSS

HTML面试题

如何理解语义化

• 让人更容易读懂（增加代码可读性）
• 让搜索引擎更容易读懂（SEO）

默认情况下，哪些HTML标签是块级元素，哪些是内联元素

• display:block/table；有div h1 h2 table ul ol p 等
• display:inline/inline-block；有span img input button 等

CSS

布局

盒子模型的宽度如何计算

• offsetWidth = （内容宽度+内边距+边框），无外边距
• box-sizing:border-box;

margin纵向重叠的问题

• 相邻元素的margin-top和margin-bottom会发生重叠
• 空白内容的
  也会重叠

margin负值的问题

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

BFC的理解和应用

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

float布局的问题，以及clearfix

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

• 技术
  • 三栏布局，中间一栏最先加载和渲染（内容最重要）
  • 两侧内容固定，中间内容随着宽度自适应 -一般用于PC网页
• 总结
  • 使用float布局
  • 两侧使用margin负值，以便和中间内容横向重叠
• 防止中间内容被两侧覆盖，一个用padding，一个用margin

手写clearfix

.clearfix:after {
	content: '';
 	display: table;
 	clear: both;
 }

flex布局的问题（画色子）

flex实现一个三点的色子

• 常用语法回顾
  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • align-self

.box {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 20px;

            display: flex;
            justify-content: space-between;
        }

        .item {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            background-color: black;
        }

        .item:nth-child(2) {
            align-self: center;
        }

        .item:nth-child(3) {
            align-self: flex-end;
        }

定位

absolute和relative分别根据什么定位

• relative依据自身定位
• absolute依据最近一层的定位元素定位
• 定位元素： absolute，relative，fixed，body

居中对齐有哪些实现方式

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

图文样式

line-height如何继承

• 写具体数值，如30px，则继承该值
• 写比例，如2、1.5，则继承该比例
• 写百分比，如200%，则继承计算出来的值

响应式

rem是什么

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

响应式布局的常见方案

• media-query，根据不同的屏幕宽度设置根元素font-size
• rem，基于根元素的相对单位

vw/vh

• rem的弊端
  • “阶梯”性
• 网页视口尺寸
  • window.screen.height 屏幕高度
  • window.innerHeight 网页视口高度
  • document.body.clientHeight body高度
• vw/vh
  • vh网页视口高度的1/100
  • vw网页视口宽度的1/100
  • vmax取两者最大值；vmin取两者最小值