本文介绍了HTML语义化的重要性，如何通过正确使用标签如h1~h6、p、ol和ul来增强代码可读性，并讲解了CSS盒模型、BFC、浮动布局、Flex布局及定位技巧。涵盖了盒模型计算、margin负值、BFC应用、圣杯布局与Flex布局在响应式设计中的实践。
一、HTML
如何理解HTML语义化？
所有的布局标签都使用 div, 并且标题列表都是用div
所有的布局都通过语义化标签来决定
-
标题就是标题 h1~h6
-
段落就是段落 p
-
列表就是使用 ol ul li
-
内联文本就是使用 span
语义化的特点
- 让人更容易读懂代码(增加代码的可读性)
- 让搜索引擎更容易读懂(SEO)
内联元素 & 块级元素
- display : block / table 块级 有 div p h1~h6 ul ol li 等
- display:inline / inline-block 内联 有 span img input button 等
-
二、CSS
盒模型宽度计算
以下 div 的 offsetWidth 有多大?
<style>
#div1{
width:100px;
padding:10px;
margin:10px;
border:1px solid #000000;
}
</style>
<body>
<div id="div1">
</div>
</body>
offsetWidth = (内边距 + 宽度 + 边框) , 没有外边距
那么问题来了 ？ 如何 把这个 div 盒子的 offsetWidth 设置为 100
我们可以通过 box-sizing:border-box 这个css属性 来设置 盒模型
box-sizing:border-box;
margin 纵向重叠问题
如果 说我们在页面中 创建了一堆的 块级元素,然后我们赋予了他们每个元素都有上下外边距,但是当一些块级元素他的内容为空,并且没有高度来撑起来的时候,那么他们之间的外边距将不会发生作用，会被重叠起来。
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等
BFC 的常见应用
- 清除浮动9
- 解决外边距合并问题
圣杯布局和双飞翼布局
两侧宽度固定，中间宽度自适应的三栏布局
Float 布局 (浮动)
圣杯布局和双飞翼布局的目的
三栏布局，中间一栏最先加载和渲染(内容最重要)
俩侧内容固定，中间内容随宽度自适应
一般用于PC网页
圣杯布局和双飞翼布局的技术总结
- 使用 float 布局
- 俩侧使用 margin 负值，以便和中间内容横向重叠
- 防止中间内容被俩侧覆盖，一个用 padding 一个用 margin
Flex 布局 (弹性盒子)
常用语法回顾
- flex-direction 控制横纵轴
- justify-content 主轴对齐方式
- aiign-items 交叉轴对齐方式
- flex-wrap 换行
- align-self 子元素交叉轴对齐方式
CSS - 定位
- absolute 和 relative 分别依据什么来定位?
- 居中对齐有哪些实现方式?
absolute 和 relative 定位
- relative 依据自身定位
- absolute 依据最近一层的定位元素进行定位
定位元素
- absolute relative fixed
- body
居中对齐的实现方式
- 水平居中
- 垂直居中
水平居中
- inline 元素：text-align: center
- block 元素：margin auto
- absolute 元素：left:50% + margin-left 负值 （宽度/ 2）
垂直居中
- inline 元素：line-height 的值等于 height 值
- absolute 元素：top:50% + margin-top 负值 （宽度/ 2）
- absolute 元素：transform(-50%,-50%)
- absolute 元素：top,left,bottom,right = 0 + margin: auto
CSS 图文样式
line-height 如何继承
- 如果写具体值 比如 30px; 则继承该值
- 如果写 2 / 1.5 ,则继承该比例
- 如果写百分比，如200%，则继承计算出来的值（考点）
- 如下代码 p 标签的行高是 40px
CSS 响应式
- rem 是什么？
- 响应式的常见方案是什么？
rem 是什么？
rem是一个长度单位
- px，绝对长度单位，最常用
- em，相对长度单位，相对于父元素，不常用
- rem，响度长度单位，相对于根元素，常用于响应式布局
响应式布局的常用方式
- media-query，根据不同的屏幕宽度设置根元素 font-size
- rem，基于根元素的相对单位
响应式 - vw/vh
- rem 的弊端
- 网页视口尺寸
- vw/vh
rem 的弊端 ：“阶梯”性
网页视口尺寸
- window.screen.height 屏幕高度
- window.innerHeight 网页视口高度
- document.body.clientHeight body 高度
vw/vh
- vh 网页视口高度的 1/100
- vw 网页视口宽度的 1/100
- vmax 取两者最大值
- vmin 取两者最小值
651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
