前端八股---HTML+css---更新中...

说一说HTML语义化？

        html语义化是指使用具有明确含义的标签来描述页面结构和内容，代替使用div等无语义的通用标签。

         好处：使代码更易读，更易维护，提升搜索引擎优化（SEO）使其搜索排名更靠前，易于无障碍阅读。当网络卡顿时有良好的页面结构，增加用户体验。

        常用的语义化标签：<header>、<main>、<acticle>、<nav>、<section>、<aside>、<footer>

说一说盒模型？

根据盒子大小计算方式不同分为：

        标准盒模型：`box-sizing:content-box` ，给盒子设定width和height不包括padding和margin

        怪异盒模型：`box-sizing:border-box`，给盒子设定width和height包括padding和margin

说一下浮动？

浮动元素的特点：

会脱离文档流（脱标，不占位置），变成行内块元素，盒子塌陷（如果父盒子没有设置高度，需要子盒子撑开），影响其他元素布局

设置浮动的图片，文字会环绕图片。

清除浮动

1. 伪元素清除浮动:给浮动元素父级增加 .clearfix::after { content: ''; display: table; clear: both; }
2. overflow：hidden：给浮动元素父级增加`overflow：hidden`属性 
3. 额外标签法：给浮动元素父级增加标签

说一说样式优先级的规则是什么？

!important > 内联样式 > ID 选择器（#id{}） > 类选择器（.class{}） = 属性选择器（a[href="segmentfault.com"]{}） = 伪类选择器（ :hover{}） > 标签选择器（span{}） = 伪元素选择器（ ::before{}）= 后代选择器（.father .child{}）> 子选择器（.father > .child{}） = 相邻选择器（ .bro1 + .bro2{}） > 通配符选择器（*{}
 

说一说CSS尺寸设置的单位

px、rem、em、vw、vh

px：像素，大小相对于屏幕分辨率

em：大小相对于当前元素的font-size，会继承（自己没有设置大小则逐级向上查找）

rem：相对于根元素（html）的font-size

vw：视口宽度，1vw等于视口宽度的1%

vh：视口高度，1vh等于视口高度的1%

说一说BFC

块级格式化上下文，是一块独立的布局环境，里面的元素不受外界影响，也不会影响到外界

如何产生BFC：

float属性不为none

display为inline-block、table-cell、table-caption、flex、inline-flex

overfloat不为visible

position属性为absolute或fixed

主要用途：

隔离内外布局，防止外边距重叠。

包含内部浮动，解决高度塌陷。

 阻止标准流元素被浮动元素覆盖，实现自适应两栏布局。