这是我参与「第四届青训营 」笔记创作活动的的第1天。 接下来是我根据今天老师所讲积累总结的干货。
HTML
首先是HTML，记录一下影响较为深刻的点。
如何理解HTML语义化？
语义化即为用正确的标签做正确的事情。
- 不要全用
<div> - 增加代码可读性
- 让搜索引擎更容易看懂，SEO（搜索引擎优化）
块状元素&内联元素
- Display: block/table;有div h1 h2 table ul ol p等
- Display: inline/inline-block; 有span img input buttom等
CSS布局
盒子模型宽度计算（offsetWidth）
- offsetWidth = (内容宽度+内边距+边框)，无外边距（margin）
- 让offsetWidth设置宽度
box-sizing = border-box;(为整体宽度)
margin的纵向重叠
- 相邻元素的margin-top和margin-bottom会发生重叠
- 空白内容的
<p></p>会发生重叠
发现的有趣的一点，对margin的top left right bottom 设置负值时，会发生下面的变化：
- margin-top和margin-left设为负值，元素向上 向左移动
- margin-right负值，右侧元素左移，自身不受影响
- margin-bottom负值，下侧元素上移，自身不受印象
BFC
-
block format context，就是块级格式化上下文 -
BFC是一块独立的渲染区域，内部元素 渲染不会影响边界以外的元素
形成BFC的条件
- float不是none
- position是absloute/fixed
- overflow不是visible
- display是flex inline-block
在清除浮动 overflow: hidden; 时，会触发该元素bfc。
CSS定位
position中absolute和relative的区别：
- relative是依据自身定位
- absolute则依据最近一层的定位父元素定位
定位元素
- 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(-50%,-50%)
- absolute元素：top，left，bottom，right = 0+margin：auto
响应式布局
响应式布局在我的理解就是根据不同的设备的屏幕长宽和比例，实现不同的适配，因此在学习初期用的px来设置尺寸，在应用到不同屏幕就会出现较大偏差，以下是我找到的解决方案：
rem
- 长度单位【px：绝对长度单位】
- em，相对长度单位，相对于父元素，不常用
- rem，相对长度单位，相对于根元素，常用于响应式布局
响应式的常见方案
- media-query，根据不同的屏幕宽度设置根元素font-size
- rem，基于根元素的相对单位
总结
本次是我上青训营的第一天，老师上午介绍了前端以及讲解了HTML和较为基础的CSS，讲的十分细致，在下午更为细致的讲解了CSS，在我之前的学习过程中了解到了更加全面的知识。
