# 块级格式化上下文
简称BFC
它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
- 常规流块盒在水平方向上，必须撑满包含块
- 常规流块盒在包含块的垂直方向上依次摆放
- 常规流块盒若外边距无缝相邻，则进行外边距合并
- 常规流块盒的自动高度和摆放位置，无视浮动元素
BFC渲染区域：（不同的BFC区域，它们进行渲染时互不干扰）
这个由某个HTML元素创建，以下元素会在其内部创建BFC区域：
- 根元素（意味着，<HTML>元素创建的BFC区域，覆盖了网页中所有元素
- 浮动和绝对定位元素
- overflow不等于visible的块盒
创建的BFC的元素，它的自动高度需要计算浮动元素（隔绝它内部与外部的联系，内部的渲染不会影响到外部），就可以解决高度坍塌，给浮动元素的父元素绝对定位或者浮动就可以解决，但一般不建议，其会改变盒子类型，所以一般更改overflow样式，改为hidden是最小的副作用。，但最好的方式还是clearfix清除浮动
创建的BFC的元素，他的边框盒不会与浮动元素重叠，调整边框盒和浮动盒的距离需要调整浮动盒的外边距
创建BFC的元素，不会和它的子元素进行外边距合并
# 布局
## 多栏布局
两栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
background-color: lightblue;
width: 1000px;
margin: 0 auto;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.aside{
float: left;
background-color: #008c8c;
color: white;
width: 300px;
margin-right: 30px;
}
.main{
overflow: hidden;
background-color: gray;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="aside">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam eius provident fugit vitae nam amet illum obcaecati totam nulla ad praesentium repudiandae, alias dicta ipsum veniam voluptatem sapiente, saepe commodi suscipit excepturi consequatur esse sit. Commodi accusamus obcaecati, sint temporibus magnam recusandae laudantium nostrum! Nobis corrupti architecto omnis atque quasi obcaecati nisi vero. Incidunt natus repellat eos tenetur officiis exercitationem iure laborum sint animi quisquam sunt rem voluptatem, dicta ea nemo repudiandae eaque officia? Eius ad, distinctio ut alias deleniti debitis illo mollitia sint nemo placeat quam minima, ab, ex perferendis earum soluta exercitationem. Enim at consequatur praesentium laborum eaque.
</aside>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur minima impedit fugiat debitis sequi natus at explicabo eum ea libero vitae vel nisi quidem, iure velit tempore labore temporibus minus alias? Soluta vel officia commodi et alias asperiores repellat nam. Nesciunt quia nemo mollitia provident recusandae, commodi praesentium quaerat ipsa quis laborum. Praesentium laboriosam quos repudiandae, fugit itaque exercitationem voluptatem fugiat ducimus. Itaque facere aliquid ullam minima harum cupiditate molestiae sit! Aperiam aliquid consequuntur harum est fugit rerum mollitia sint, similique ducimus impedit, quaerat nisi dolore esse ad et maxime? Molestias laboriosam sed consequatur earum distinctio aspernatur officia eveniet non!
</div>
</div>
</body>
</html>三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.container{
background-color: lightblue;
padding: 30px;
border: 3px solid #999;
/* overflow: hidden; */
}
.left{
float: left;
width: 200px;
background-color: aqua;
color: black;
margin-right: 30px;
}
.right{
float: right;
width: 200px;
background-color: red;
color: black;
margin-left: 30px;
}
.main{
background-color: chocolate;
color: black;
border: 2px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda incidunt aperiam cupiditate, enim voluptatibus animi deleniti iste tenetur doloribus culpa. Voluptate facilis delectus maxime adipisci ea quis similique fuga aliquid nisi? Assumenda odio optio at quos aut hic debitis quis! Asperiores, ipsum quibusdam ab recusandae, beatae aspernatur totam sunt tempora debitis libero veniam voluptas ex officiis possimus, fugit consequuntur excepturi. Perferendis itaque voluptatum eaque similique recusandae at magnam, alias quibusdam culpa numquam est! Harum pariatur ducimus ab quia. Debitis reiciendis laudantium nemo dolore quibusdam soluta suscipit, cupiditate modi porro, nam dolorem numquam adipisci accusantium enim qui. Odio, blanditiis labore inventore ipsum illo ipsam eligendi eius repudiandae debitis et! Vero soluta laborum iste sed ex, aspernatur magnam placeat nemo necessitatibus facere voluptates tempora reprehenderit harum ea error excepturi asperiores modi quia, quod consequuntur itaque obcaecati. Debitis praesentium possimus atque qui. Nulla, neque! Numquam, minima, iusto possimus saepe nisi, repudiandae est quisquam dolore amet pariatur tenetur necessitatibus consequatur fugit. Possimus sequi aperiam ab fugit voluptate vitae sit. Perferendis totam expedita officiis temporibus dolore ipsam doloremque ullam cupiditate, earum nam magni dignissimos corrupti! Deserunt minima perspiciatis animi iure sit. Expedita non commodi quasi consequatur, nemo fugit voluptatem error repellendus. Deserunt dolorum quisquam corporis!
</aside>
<aside class="right">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. In ea voluptates quis fuga quia nobis consequatur reprehenderit labore. Repudiandae animi expedita sint neque eaque eum debitis ducimus modi quos vel accusamus asperiores nobis perspiciatis explicabo, consequatur harum qui officia cupiditate dignissimos saepe nesciunt placeat soluta laborum aut. Mollitia, incidunt voluptatum rerum optio ex itaque, saepe illo praesentium labore necessitatibus magni accusamus ratione commodi quia repellat laudantium facere nam ullam inventore tempora. Quo, temporibus sunt dolor animi nisi suscipit rem, eligendi quod nulla dolore sed necessitatibus. Cum ducimus sit natus voluptatem cumque dicta! Sit error velit nihil suscipit rerum accusantium facilis nesciunt eum alias vero. A quos nesciunt asperiores eius aliquam molestiae, laboriosam libero dicta esse velit minima impedit deleniti beatae ipsa quidem eos reprehenderit assumenda provident dolores. Vero ad minus ipsam laudantium repellat impedit magni quasi delectus non, doloribus soluta doloremque numquam est ipsa a corrupti placeat saepe. Perferendis, illo soluta placeat, inventore animi dolore beatae, neque commodi alias sapiente consequatur quo esse ab quos omnis quidem eveniet nisi eius ducimus reiciendis voluptate. Blanditiis, facere commodi. Vero voluptate ipsum labore architecto consectetur? Praesentium voluptatem consequatur fugit iure enim molestiae amet! Cumque labore porro esse in aut, officiis qui. Blanditiis, possimus!
</aside>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsum, qui est id ullam cupiditate exercitationem, voluptas soluta non neque odio cum amet repellat? Sit, dolorem? Consequatur minima ea deserunt, beatae dolore numquam, quibusdam omnis, sunt autem fugiat eum adipisci qui quos hic iusto? Impedit saepe sunt nemo obcaecati totam maiores explicabo eveniet illo animi officia laudantium aliquid natus, pariatur deleniti possimus quaerat assumenda magni recusandae libero corrupti, perspiciatis illum. Maiores nisi facilis, numquam eveniet similique, corporis sint aliquam impedit sapiente et libero laboriosam optio quisquam perferendis provident quas laborum. Ratione, optio. Vitae reiciendis commodi repudiandae. Temporibus ut nesciunt suscipit unde cum illum consequatur! Id doloribus quibusdam mollitia voluptas, delectus placeat earum dolor vitae. Sequi eum dolorem cumque omnis magnam iure perspiciatis iste? Officia, consequuntur ipsa! Ex dolor quas illum corrupti, sapiente soluta, culpa fugit, nostrum eligendi excepturi accusamus enim tenetur natus? Quos voluptas cumque quam minima magni exercitationem ducimus natus voluptatem molestiae consequuntur maxime tempore neque provident ex, delectus assumenda accusamus harum odit a temporibus libero porro aliquid consectetur perspiciatis. Atque, nisi modi accusantium veritatis quod quo pariatur repellendus sunt nobis ullam deleniti reiciendis magni reprehenderit nam ipsam asperiores! Ad nulla, amet enim itaque quas ut deleniti laborum sint velit molestiae laboriosam, magni in. Possimus at harum saepe dicta doloremque explicabo incidunt neque officia nobis mollitia tenetur quas quisquam facere voluptatem, vero beatae ab quae repellendus? Ab maiores perspiciatis soluta quidem perferendis inventore amet dicta vel rem repudiandae vitae consequatur facilis quasi magnam tenetur voluptas alias, iusto impedit maxime sint nobis! Voluptatibus esse incidunt maxime tempora debitis cupiditate. Tempore maxime blanditiis delectus dolores distinctio dolore aspernatur non qui! Excepturi, blanditiis fuga. Perspiciatis praesentium officia ipsum nemo doloremque eius quisquam culpa at! Veniam sit fuga optio aperiam dolores corrupti repellat, minima, saepe dolorem ex odio architecto reiciendis sint at dolor recusandae ea ad repellendus eum minus natus quaerat! Quis illo doloribus nesciunt vero expedita veniam nulla, temporibus quas dolorum, consectetur officia aut delectus, consequatur molestias pariatur. Ipsa ducimus, sapiente veritatis doloribus dolore debitis molestiae voluptatibus corporis possimus rem voluptates facilis fugit? Voluptate odit, ut cum harum est accusamus vero voluptatum blanditiis laboriosam, quia illo. Deleniti delectus quo ad vitae hic praesentium dolorem asperiores a consequatur omnis culpa expedita, nobis molestias nihil doloribus numquam tempore, pariatur accusantium laboriosam ipsum. Minus exercitationem laudantium quasi perferendis, sed, sapiente porro accusantium dignissimos ipsa sint est doloribus dolorum quae dicta praesentium debitis. Incidunt temporibus optio debitis excepturi pariatur explicabo nulla amet corrupti cumque aut ex nisi iusto dolores ut quo eveniet facilis, reiciendis est. Facere aut sed nobis, minima ex ipsum alias, quae nam ipsam eius inventore at. Amet doloribus dolore reiciendis. Maiores ipsum unde earum sed praesentium dicta voluptatem sapiente et obcaecati reiciendis tempora iure dolore vero at, ab qui animi ipsa recusandae saepe veritatis. Officiis aliquam incidunt odio enim quaerat vero sit, vel dicta blanditiis. Reprehenderit, possimus minus optio aspernatur velit ab unde in error ratione eveniet numquam maxime tenetur officiis rerum nulla facere adipisci ullam odit officia accusamus sunt earum minima? Quidem.
</div>
</div>
</body>
</html>## 等高
1. css3的弹性盒
2. JS控制
3. 伪等高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 90%;
margin: 0 auto;
/* overflow: hidden; */
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.aside{
float: left;
background-color: #008c8c;
color: white;
width: 300px;
margin-right: 30px;
height: 10000px;
margin-bottom: -9990px;
}
.main{
overflow: hidden;
background-color: gray;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="aside">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, laudantium nemo autem quo, sapiente, deserunt eveniet deleniti porro illum eligendi amet nisi aliquid doloremque molestias illo debitis aspernatur? Repellendus, molestias.
</aside>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque quisquam commodi debitis laboriosam voluptatibus dolore esse eveniet expedita cupiditate! Vero labore ex voluptatibus dolorum quas non pariatur excepturi explicabo! Non quod tempore porro dolorum. Eveniet, tempora explicabo! Culpa maiores nesciunt eligendi perferendis placeat, magnam, aperiam temporibus odio exercitationem nisi atque deleniti, rem voluptates reiciendis esse ab odit! Enim et amet necessitatibus sint laborum quod repellat commodi laboriosam id ab, provident reprehenderit nihil tempora, saepe nisi? Maxime, aperiam dolorum iure cumque officiis quae necessitatibus voluptatem voluptas perspiciatis magni sed laudantium. Fugiat ex corrupti mollitia iste excepturi culpa veniam fugit, ad officiis minima unde? Iure velit voluptas ipsum consequatur facilis, ullam assumenda amet modi officiis! Illum temporibus officia in nulla quaerat molestiae obcaecati consectetur ratione hic ipsa alias fugiat, repudiandae ab, optio sed omnis qui atque dolor aliquid dolorem error saepe, est ut rerum! Culpa eos possimus cupiditate perferendis iure mollitia ab laborum facere praesentium. Magnam quo obcaecati eius distinctio modi. Voluptate delectus laudantium doloremque cupiditate illum modi sunt corrupti magni iste labore excepturi enim dolorum placeat assumenda voluptas perferendis sapiente ullam ipsum officiis optio numquam, odit odio quidem? Fugit, odio necessitatibus, quasi nemo qui animi nam reprehenderit voluptates molestiae ipsa molestias.Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur minima impedit fugiat debitis sequi natus at explicabo eum ea libero vitae vel nisi quidem, iure velit tempore labore temporibus minus alias? Soluta vel officia commodi et alias asperiores repellat nam. Nesciunt quia nemo mollitia provident recusandae, commodi praesentium quaerat ipsa quis laborum. Praesentium laboriosam quos repudiandae, fugit itaque exercitationem voluptatem fugiat ducimus. Itaque facere aliquid ullam minima harum cupiditate molestiae sit! Aperiam aliquid consequuntur harum est fugit rerum mollitia sint, similique ducimus impedit, quaerat nisi dolore esse ad et maxime? Molestias laboriosam sed consequatur earum distinctio aspernatur officia eveniet non!
</div>
</div>
</body>
</html>## 元素书写顺序
先写浮动再写常规流，防止换行，如果先写常规流再写浮动，浮动盒会自动分离常规流盒子
## 后台页面的布局
# 浮动的细节guize
浮动盒子的顶边不得高于上一个盒子的顶边
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
# 行高的取值
1. px，像素值 line-height
2. 直接书写数字（无单位）（先继承再计算）
3. em单位（先计算再继承）
4. 百分比（与em效果相同）
除了px都是相对于字体大小看的，所以行高尽量不要加单位，这样可是保证行高一直是字体的二倍
# 行盒的垂直对齐
## 多个行盒垂直方向上的对齐
给没有对齐元素设置vertical-align
预设值
数字
## 图片的底部白边
图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。
清除空白的方法：
1. 设置父元素的字体为0
2. 将图片设置为块盒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type="checkbox"]{
width: 30px;
height: 30px;
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<input type="checkbox">
<span>我同意xxxx</span>
</p>
</body>
</html># 堆叠上下文
堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在z轴上排列的先后顺序。
## 创建堆叠上下文的元素
1. html元素（根元素）
2. 设置了z-index数值的定位元素（非auto）
## 同一个堆叠上下文中元素在z轴上的排列
从后到前的排列顺序：
1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别（z-index，stack level）为负值的堆叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何 z-index 是 auto的定位子元素，以及 z-index 是 0 的堆叠上下文
7. 堆叠级别为正值的堆叠上下文
# svg
svg，可缩放的矢量图，用xml代码书写而成
1. 该图片由代码书写而成
2. 缩放不会失真，就是不会因为像素问题变模糊
3. 内容轻量，内存占比小
## svg的使用
svg可以嵌入浏览器也可以单独成为一个文件
xml语言，svg使用该语言定义
## 书写svg代码
### 矩形：rect
### 圆形：circle
### 椭圆；ellipse
### 线条：line
### 折线：polyline
### 多边形：polygon
### 路径：path
M = moveto，表示坐标移动到某个位置
L = lineto，表示画一条线
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc，画出一种弧线
- A半径1 半径2 顺时针旋转角度 小弧（0）或大弧（1）顺时针画（1）还是逆时针画（0）终点坐标
Z = closepath，表示闭合路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg t="1701258907866" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3618" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M407.42912 122.88h190.98624c176.51712 0 319.61088 143.09376 319.61088 319.61088 0 2.54976-0.03072 5.09952-0.09216 7.64928-0.94208 39.26016-1.19808 63.42656-0.77824 72.51968 0.37888 8.3456 4.77184 26.96192 13.1584 55.83872 36.11648 124.3136-35.3792 254.35136-159.68256 290.4576a234.3936 234.3936 0 0 1-51.12832 8.86784L505.344 890.88l-210.13504-12.45184c-129.2288-7.64928-227.76832-118.59968-220.11904-247.81824 1.09568-18.50368 4.37248-36.8128 9.78944-54.53824 4.78208-15.6672 7.168-26.46016 7.168-32.36864 0-9.59488-1.23904-37.60128-3.74784-84.00896-9.49248-176.26112 125.68576-326.85056 301.94688-336.35328 5.7344-0.3072 11.4688-0.4608 17.19296-0.4608z" fill="#F3F3F4" p-id="3619"></path>
<path d="M604.672 122.88a318.13632 318.13632 0 0 1 160.0512 42.9056c67.10272-29.9008 139.69408-39.09632 217.77408-27.5968-3.34848 2.84672 52.5824 164.15744-61.6448 257.28a324.29056 324.29056 0 0 1 3.29728 55.47008c-1.18784 45.12768-1.792 72.54016-1.792 82.23744 0 0.1024-0.83968 0.19456-2.47808 0.21504h-1.3824c-22.92736-0.1536-145.43872-10.68032-303.36-115.93728-30.208-20.14208-65.60768-76.36992-106.1888-168.68352-34.07872 86.12864-69.46816 142.35648-106.1888 168.68352C261.25312 518.92224 97.24928 561.0496 97.24928 543.70304c0-9.59488-1.24928-37.60128-3.74784-84.00896a321.2288 321.2288 0 0 1 2.59072-61.70624c-118.4256-92.69248-61.45024-256.9216-64.8192-259.7888 78.83776-11.6224 152.08448-2.11968 219.7504 28.48768a318.2592 318.2592 0 0 1 144.42496-43.34592c5.72416-0.3072 11.45856-0.4608 17.18272-0.4608H604.672z" fill="#D3D2D4" p-id="3620"></path>
<path d="M753.18272 240.08704c24.10496-52.51072 99.71712-84.56192 226.85696-96.16384-3.28704 2.79552 59.86304 157.17376-66.6624 252.53888-5.632 4.23936-59.0336-47.88224-160.19456-156.37504z m-492.9536 0c-24.10496-52.51072-99.72736-84.56192-226.85696-96.16384 3.28704 2.79552-59.86304 157.17376 66.6624 252.53888 5.632 4.23936 59.0336-47.88224 160.18432-156.37504z" fill="#77767A" fill-opacity=".5" p-id="3621"></path><path d="M517.09952 691.24096a15.79008 15.79008 0 0 1 12.84096 18.3296 167.5264 167.5264 0 0 1-4.18816 17.63328c9.20576 23.98208 25.43616 41.7792 48.9984 54.00576a15.70816 15.70816 0 0 1 6.71744 21.2992 16.00512 16.00512 0 0 1-21.504 6.656c-21.6064-11.20256-38.64576-26.35776-51.00544-45.24032-12.36992 18.88256-29.40928 34.03776-51.01568 45.25056a16.00512 16.00512 0 0 1-21.504-6.656 15.70816 15.70816 0 0 1 6.72768-21.30944c23.552-12.22656 39.7824-30.02368 49.00864-53.99552a163.3792 163.3792 0 0 1-4.1984-17.63328 15.79008 15.79008 0 0 1 12.84096-18.3296c2.82624-0.512 5.61152-0.24576 8.1408 0.64512 2.52928-0.89088 5.31456-1.15712 8.1408-0.65536z" fill="#BF9BAA" p-id="3622"></path>
<path d="M508.94848 704.03072c35.19488 0 63.71328-30.0544 63.71328-50.39104 0-20.33664-127.42656-20.33664-127.42656 0s28.52864 50.39104 63.71328 50.39104z" fill="#724956" p-id="3623"></path><path d="M701.184 465.17248l47.99488 3.6352a31.95904 31.95904 0 0 1 28.8768 38.4512l-6.56384 31.1808a84.21376 84.21376 0 0 1-82.41152 66.88768H633.82528A31.95904 31.95904 0 0 1 602.65472 566.34368l7.6288-33.92512A86.48704 86.48704 0 0 1 701.184 465.18272z" fill="#656581" p-id="3624"></path><path d="M625.74592 536.94464a69.02784 68.38272 0 1 0 138.05568 0 69.02784 68.38272 0 1 0-138.05568 0Z" fill="#2C2C52" p-id="3625"></path><path d="M324.56704 465.17248L276.57216 468.81792A31.95904 31.95904 0 0 0 247.7056 507.25888l6.5536 31.1808a84.21376 84.21376 0 0 0 82.42176 66.88768h55.23456a31.95904 31.95904 0 0 0 31.1808-38.97344l-7.6288-33.92512A86.48704 86.48704 0 0 0 324.56704 465.18272z" fill="#656581" p-id="3626"></path>
<path d="M259.54304 536.94464a69.02784 68.38272 0 1 0 138.05568 0 69.02784 68.38272 0 1 0-138.05568 0Z" fill="#2C2C52" p-id="3627"></path><path d="M758.49728 690.9952c55.7056 0 100.88448-18.8416 100.88448-42.0864 0-23.2448-45.16864-42.0864-100.88448-42.0864-55.7056 0-100.88448 18.8416-100.88448 42.0864 0 23.2448 45.16864 42.0864 100.88448 42.0864z m-499.0976 0c55.72608 0 100.88448-18.8416 100.88448-42.0864 0-23.2448-45.1584-42.0864-100.87424-42.0864-55.71584 0-100.88448 18.8416-100.88448 42.0864 0 23.2448 45.1584 42.0864 100.88448 42.0864z" fill="#D36F3E" fill-opacity=".3" p-id="3628"></path></svg>
</body>
</html># 数据链接
data url
## 如何书写
数据链接：将目标文件的数据直接书写到路径位置
语法：data：MIME，数据
## 意义
优点：
1. 减少了浏览器中的请求
请求
响应
减少了请求中浪费的时间
2. 有利于动态生成数据
缺点：
1. 增加了页面资源的体积
导致传输内容的增加，从而增加了单个资源的传输时间
2. 不利于浏览器的缓存
浏览器通常会缓存图片文件、css文件、js文件。这种方式不会缓存
应用场景：
1. 请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。
2. 图片由其他代码
## base64
一种编码方式
通常用于将一些二进制数据用一个可书写的字符串表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="data:text/css,h1{clolor:blue;}">
<!-- <link rel="stylesheet" href="test.css"> -->
</head>
<body>
<h1>
标题
</h1>
</body>
</html># 浏览器的兼容性
## 问题产生的原因
- 市场竞争
- 标准版本的变化
## 厂商前缀
比如box-sizing，谷歌旧版本在浏览器中使用：-webkit-box-sizing：border-box
- 市场竞争，标准没有发布
- 标准仍在讨论中（草案），浏览器厂商希望先支持
IE:-ms-
Chrome,safari:-webkit-
opera:-o-
firefox:-moz-
浏览器在处理样式或者元素时，使用如下的方式：
当遇到无法识别的代码是会直接略过。
1. 谷歌浏览器的滚动样式
实际上往往在开发中使用的自定义滚动条是由js完成的 ，div+css+js实现
2. 多个背景图选一个作为背景
## css hack
1. 样式
IE中，css的特殊前缀
- *属性，兼容IE5、6、7
- _属性，兼容IE5~6
- 属性值\9，兼容IE5~11
- 属性值\0，兼容IE8~11
- 属性值\9\0,兼容IE9~10
IE5、6、7的外边距，浮动元素的左外边距翻倍
2. 条件判断
## 渐近增强和优雅降级
两种解决兼容性问题的思路，会影响书写代码风格
- 渐近增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式
书写代码时，先尽量避免书写具有兼容性的代码，完成后再逐步加入新标准的代码
- 优雅降级：先制作完整的功能然后针对低版本的浏览器进行特殊处理
书写代码时，先不用特别在意兼容性，完成整个功能后，再针对低版本浏览器处理样式
# caniuse
查找css兼容性
[caniuse.com](https://caniuse.com)
# 居中总结
居中：盒子在其包含块中居中
## 行盒（行块盒）水平居中
直接设置父元素：text-align：center
## 常规流块盒水平居中
定宽，设置左右margin为auto（margin：0 auto）
## 绝对定位元素的水平居中
定宽，设置左右的坐标为（left：0，right：0），将左右margin设置为auto
实际上，固定定位是绝对定位的特殊情况
## 单行文本的垂直居中
设置文本所在元素的行高，为整个区域的高度
## 行块盒或块盒多行文本的垂直居中
没有完美方案
设置盒子上下内边距相同，达到相同的类似效果
## 绝对定位的垂直居中
定高，设置上下的坐标为0（top：0，right：0），将左右的margin设置为auto
# 样式补充
## display：list-item
设置该属性的盒子，本质上仍是一个块盒，但同时该盒子会附带一个盒子
元素本身生成的盒子叫做主盒子，附带的盒子叫做次盒子，主盒子和次盒子水平排列
涉及的css：
1. list-style-type：
设置次盒子里的内容类型
2. list-stype-position：
设置次盒子相对于主盒子的位置
3. 速写属性，二者一起写。list-style
**清空次盒子**
list-style：none
## 图片失效的宽高问题
如果img元素的图片链接无效，img的特性和行盒一样，无法设置宽高，解决方式就是display：inline-block
## 行盒中包含行块盒和可替换元素
可替换元素：图片，音频，视频，按钮input等
行盒的高度和他内部的行块盒和可替换元素的高度无关，只跟字体大小有关，产生白边可以字体大小设置为0，
## text-align：justify
- left 左对齐
- right 右对齐
- center 居中
- justify 分散对齐，除最后一行
## 制作一个三角形
设置内容宽高为0，边框设置大小，然后把边框颜色设置一下即可
## direction和writing-mode
开始 start->结束 end，这个是相对的
左 left-> 右 right，绝对的
direction是设置开始和结束方向的
writing-mode：是调节文字书写方向的，例如：writing-mode：vertical-rl，垂直从右往左书写
## utf-8字符
以上是所有的前端基础学习内容，接下来需要不断练习项目来实现巩固与运用
378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
