【HTML+CSS】知识点HTML基础知识 HTML 语义化让人更容易读懂（增加代码的可读性）让搜索引擎更容易读懂（

HTML基础知识

HTML 语义化

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

行内元素 & 块级元素

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

CSS基础知识

盒模型宽度计算

标准盒模型

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

怪异盒模型

box-sizing：border-box;

在怪异盒模型情况下，width == offsetwidth ，内容区域会被压缩

margin纵向重叠问题

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

margin负值的问题

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

BFC的理解和应用

Block format context，块级格式化上下文

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

形成BFC的条件有：

float不是none
position是absolute和fixed（不包含static和relative）
overflow不是visible
display是flex inline-block等

常见应用有：

清除浮动

float布局

圣杯布局和双飞翼布局：

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

圣杯布局：

float+父padding+子margin+position

双飞翼布局：

float+父margin+子padding

总结：

使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding一个用margin

手写clearfix，类名添加在父元素，用于清除浮动（10秒内）

.clearfix:after{
     content:'';
     display:table;
     clear:both;
 }
 .clearfix{
     *zoom:1; /* 兼容IE */
 }

flex布局

常见语法：

flex-direction
justify-content
align-items
flex-wrap
align-self ：子元素在交叉轴的对齐方式

absolute和relative定位

relative依据自身位置定位
absolute依据最近一层的定位元素定位

absolue相对于父级的这些元素定位：

absolute relative fixed
body

居中对齐

水平居中

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

垂直居中

inline元素：line-height的值等于height值
absolute元素：top：50%+margin-top负值
absolute元素：transform：translate（-50%，-50%）
absolute元素：top，left，bottom，right = 0 + margin：auto

line-height如何继承

写具体的数值，如30px，则继承该值
写比例，如2/1.5，则继承该比例
写百分比，如200%，则继承计算出来的值（考点）

rem是什么

rem是一个长度单位

px，绝对长度单位，最常用
em，相对长度单位，相对于父元素，不常用
rem，相对长度单位，相对于根元素（html标签），常用于响应式布局

响应式布局的常见方案

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

vh，vw

rem的弊端

阶梯性质，无法在各个屏幕宽度中平滑过渡

网页视口尺寸：

window.screen.height // 屏幕高度
window.innerHeight // 网页视口高度
document.body.clientHeight // body高度

单位：

vh网页视口高度的1/100，== window.innerHeight
vw网页视口宽度的1/100，== window.innerWidth
vmax取两者最大值，vmin取两者最小值

【HTML+CSS】知识点