本文深入探讨了CSS布局中的BFC（块级格式化上下文）概念，包括它的触发条件和应用场景，如解决浮动塌陷和创建自适应两栏布局。同时，介绍了屏幕名称和像素密度（PPI、DPI和DPR）在响应式设计中的重要性。此外，还涵盖了XHTML与HTML的区别，网页优化策略，如使用H1标签、合理设置链接和图片优化，以及CSS3的多列布局技术。
新增知识补充
一、position属性
1、position: sticky; 粘性定位
2、粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
二、屏幕名称
1、什么是像素：
像素，又称画素，是图像显示的基本单位。
像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。
2、ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ftrUmnYv-1626138934612)(C:\Users\Mac\Desktop\lesson\一阶段\day11表格表单和统筹\day11表格表单和统筹\知识补充\img\ppi.png)]
3、像素分类：
a、设备像素(device independent pixels): 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的
分辨率：是指宽度上和高度上最多能显示的物理像素点个数
点距：像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小
b、CSS像素(CSS pixels): 又称为逻辑像素，是为web开发者创造的，比如我们css中使用的像素
在桌面端，css的1个像素往往都是对应着电脑屏幕的1个物理像素。而在手机端，由于屏幕尺寸的限制，缩放是经常性的操作。因而当用户进行缩小操作时，一个设备像素覆盖了多个CSS像素。当用户进行放大操作时，一个CSS像素覆盖了多个设备像素。不论我们进行缩小或放大操作，元素设置的CSS像素(如width:300px)是始终不变的，而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的
1px边框问题
4、其他概念:
屏幕尺寸：指的是屏幕对角线的长度
PPI:屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸还是对角线长度
DPI:每英寸像素点，印刷行业术语。对于电脑屏幕而言和PPI是一个意思
设备像素(又称为物理像素): 指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关，单位 pt。
设备独立像素(也叫密度无关像素或逻辑像素)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，这个点是没有固定下小的，越小越清晰，然后由相关系统转换为物理像素。
DPR(设备像素比)：设备像素比 = 设备像素 / 设备独立像素。(在Retina屏的iphone上，DPR为2，1个css像素相当于2个物理像素) --- 1px边框问题
5、dpr：
在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。从iphone4开始，苹果公司推出了所谓的retina视网膜屏幕，才有了这个概念。
6.视口
视觉视口：可见区域
布局视口：整个网页区域
理想视口：网页大小会随着视觉视口的改变而动态改变
【视觉视口和布局视口是1:1的关系】
解决方案：设置viewport
三、XHTML和HTML的区别？
1.XHTML 元素必须被正确地嵌套。 XHTML是HTML的严格模式
2.XHTML 元素必须被关闭。
3.标签名必须用小写字母。
4.XHTML 文档必须拥有根元素。
四、属性补充
a、text-transform属性
1.none 默认。定义带有小写字母和大写字母的标准的文本。
2.capitalize 文本中的每个单词以大写字母开头。
3.uppercase 定义仅有大写字母。
4.lowercase 定义无大写字母，仅有小写字母。
5.inherit 规定应该从父元素继承 text-transform 属性的值。
b、font-variant把文本设置为小型大写字母字体
1、normal 默认值。浏览器会显示一个标准的字体。
2、small-caps 浏览器会显示小型大写字母的字体。
五、Doctype作用是什么？
定义文档类型，让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE html>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
六、网页优化
1.网站结构（重构）优化，网页的中结构、表现、行为三者分离
2.H1标签的使用，一个页面设置一个H1标签，有助于搜索引擎明白网站架构，因为H1标签的搜索权重比其他标签高，一般用于logo区域。
3.页面头部优化（meta）
<meta name="keywords" content="" />向搜索引擎说明你的网页的关键词
<meta name="description" content=""/>告诉搜索引擎你的站点的主要内容
“描述”部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对你网站的特色内容加以重复以求突出；
“关键字”部分应该列出你认为合适的，能突出网站内容的关键字就可以了，关键字不要设置太多，可设置10---8个，搜索引擎只会浏览靠前的几个关键字。
4、超链接优化
搜索引擎为何可以能够索引全世界的网站，是因为各个搜索引擎程序中都有一个会自动“爬行”于互联网上的智能机器人程序，这个机器人就是顺着网站之间的链接游览世界的，那么我们就应该为它创造一个良好的爬行通道——合理的设置链接。
a.采用纯文本链接，少用，最好是别用Flash动画设置链接，因为搜索引擎无法识别Flash上的文字
b.按规范书写超链接，这个title属性，它既可以起到提示访客的作用，也可以让搜索引擎知道它要去哪里
c.最好别使用图片热点链接，理由和第一点差不多。
5、图片优化(alt属性，title属性)
图片优化并不是修改图片的大小、颜色，而是你应该为每个标签加上alt属性，alt属性的作用是当图片无法显示时以文字作为替代显示出来，而对于SEO来说，它可以令搜索引擎有机会索引你网站上的图片，对于一些确实没什么意义的图片，最好也不要省略alt，而应该留空，即 alt=""。
5、避免大“体积”的页面 css sprite 图片整合技术也是网页优化 base64图片优化方式 --- 有些小图可以转换
6、命名规则化，使用公共代码
重置样式:
以新浪为例：
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img { border:none; }
img{vertical-align:top;}
address, caption, code, th{ font-style:normal; font-weight:normal; }
ul, ol { list-style:none; }
a { color:#666; text-decoration:none; }
七、BFC
1、概念：BFC 是 Block formatting context 的缩写，直译为“块级格式化上下文”，它是一个独立的渲染区域，规定了内部的元素如何布局，并且与这个区域外部毫不相干。
在具体解释 BFC 前，我们了解一下常见的定位方案，通常有三种：普通流、浮动流、定位流。
-
普通流（文档流、标准流）：元素按照其在 HTML 中的先后位置至上而下布局，行内元素水平排列，当行被占满然后换行，块级元素则会被渲染为完整的一行。
-
浮动流：元素首先按照普通流的位置出现，然后根据浮动的方向向左边或右边偏移，其效果与印刷排版中的文本环绕类似
-
定位流：元素会整体脱离普通流，定位元素不会对其兄弟元素造成影响，而元素具体的位置由定位的坐标决定
FC，Formatting context 首字母的缩写，表示格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用，普通流其实就是指 FC。
注意点：BFC 是 FC 中的一种，具有 BFC 特性的元素可以看作是隔离了的独立容器（相当于就是一个大箱子），容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
BFC布局规则（特性）
1.内部的 box 会在垂直方向一个接一个的排列
2.box 垂直方向的距离由 margin 决定，同一个 BFC 中相邻的两个 box 的 margin 会发生重叠
3.每个元素的 margin-left 与包含块的 border-left 相接触
4.BFC 区域不会与 float box 重叠
5.计算 BFC 高度时，浮动元素会参与计算
6.容器内元素布局不影响外部元素，反之亦然
如何触发 BFC
1.根元素，即 html 元素
2.float 的值不为 none
3.overflow 的值不为 visible
4.display 的值为 inline-block、table-cell、table-caption
5.position 的值为 absolute 或 fixed
BFC的应用
1.解决浮动塌陷问题
2.自适应两栏布局（我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow：hidden。）
3.解决设置margin值重叠问题。
总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。它规定了元素与其他元素的关系和相互作用。
#####八、多列布局
介绍：css3多列布局可以自动将内容按指定的列数排列，这种特性实现的效果和报纸、杂志类排版非常相似。
核心属性：
columns：column-width 列宽 column-count 列数
column-width：定义每列列宽； 类似于最小宽度min-width； auto 自适应；
column-count：定义分列列数；最多列数，auto自适应（由列宽、容器宽和列间距决定），也可固定
column-gap：定义列间距； 不能为负数；
column-rule：定义列边框；与定义边框一样：2px dashed #ccc;
column-span：定义多列布局中子元素的跨列效果；通常用于标题；
none：不跨列；
all：跨所有列
扫一扫
306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
