圣杯布局和双飞翼布局
圣杯布局&双飞翼布局
我们能够发现，其实圣杯布局和双飞翼布局非常相像。因为圣杯布局是阿里巴巴的玉伯（Sea.js的创始人）根据圣杯布局来改造的。用于两边的子面板固定，中间区域自适应的布局。
圣杯布局存在一个缺点：就是当我们的 .middle 设置的宽度比两边小的时候，布局就会乱掉。双飞翼在中间的区域添加了一个子节点，给父节点添加margin属性来左右面板留出空间。用margin来撑开空间。
2024年11月26日
圣杯布局和双飞翼布局
圣杯布局&双飞翼布局
我们能够发现，其实圣杯布局和双飞翼布局非常相像。因为圣杯布局是阿里巴巴的玉伯（Sea.js的创始人）根据圣杯布局来改造的。用于两边的子面板固定，中间区域自适应的布局。
圣杯布局存在一个缺点：就是当我们的 .middle 设置的宽度比两边小的时候，布局就会乱掉。双飞翼在中间的区域添加了一个子节点，给父节点添加margin属性来左右面板留出空间。用margin来撑开空间。
2024年11月26日
浮动会造成父标签塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin:0}
#d1{
border:3px solid black
}
#d2{width:50px;height:50px;background:red;}
#d3{width:50px;height:50px;background:blue;}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>2024年11月26日
CSS定位机制
CSS 有三种基本的定位机制：相对定位、浮动和绝对定位。
相对定位
相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
如果将box2的框 top 设置为 50px，那么框将在原位置顶部下面 50 像素的地方。如果 left 设置为 20 像素，那么会在元素左边创建 20 像素的空间，也就是将元素向右移动。
2024年11月26日
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>49-图标特效</title>
<style type="text/css">
2024年11月26日
全新一代福克斯RS搭载了一台2.3T EcoBoost四缸涡轮增压发动机，并首次配备了拥有多片离合器的四驱系统。
日前，福特官方正式发布了新一代的福克斯RS车型。正如之前坊间所传闻的那样，新一代车型除了动力的增强外，最大的看点就是首次引入了一套具有多片离合器的四驱系统，行走性能更为稳健。
2.3T发动机和四驱系统
2024年11月26日
检验前端的一个基本功就是考查他的布局。很久之前圣杯布局风靡一时，这里就由圣杯布局开始，到最流行的Bootstrap栅格布局。
先来看看圣杯布局，这是一种三列布局，两边定宽，中间自适应的布局，案例如下
2024年11月26日
BFC：块级格式化上下文，类似于形成一个独立的布局空间，使其内部与外部的元素互不影响。
通常被用来解决：1、解决浮动元素令父元素高度坍塌的问题-清除浮动，2、外间距重叠引起的高度塌陷（实用）；
如何形成：1、根元素，2、float：left/right，3、position：left/right，4、display：inline-block/flex/grid,5、overflow：auto/hidden/scroll(常用)；
2024年11月26日
后台私信回复【前端】，获取全套教材资料
解决初学者的小问题；
我们平时在写网页的时候经常看到两个超链接中间会存在一个小竖线，如下图：
问：如何实现
可以给你讲三种方法；
css样式：