@规则
-
import
@import "路径";
导入另一个css文件。
-
charset
@charset "utf-8";
告诉浏览器，该css文件使用的字符编码集，这个指令必须写在第一行。
web字体和图标
web字体
解决用户电脑上没有安装相应字体的问题。强制让用户下载该字体
需要准备好一个字体文件放到服务器上，然后再代码里面配置下载：
<!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>
/* 制作一个新字体，名称叫做翩翩体 */
@font-face {
font-family: "翩翩体-简";
src: url(./font/翩翩体-简.ttf);
}
p {
font-family: "翩翩体-简", "微软雅黑", "sans-serif";
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque, voluptatibus consectetur at ducimus odit fugit
deleniti repellat libero molestias nesciunt.</p>
</body>
</html>
字体图标
使用步骤：
- 在iconfont网站将图标添加至购物车，然后添加至项目。
- 然后在项目里面就有多种使用方式，我这边使用在线链接去引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入css文件 -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4061569_ff1uhv8iiv6.css">
</head>
<body>
<p>
<i class="iconfont icon-sousuo"></i>
</p>
</body>
</html>
- 也可以下载项目到本地，然后引入css文件去用。
块级格式化上下文
块级格式化上下文（BFC）：它是一块独立渲染的区域，他规定了在该区域中，常规流块盒的布局。
常规流块盒布局特点：
- 水平方向撑满。
- 垂直方向依次排列。
- 相邻外边距合并。
- 自动高度和摆放位置，无视浮动。
BFC渲染区域：
以下元素会在内部创造BFC区域：
- 根元素（html）
- 浮动和绝对定位的元素。
- overflow不等于visible的块盒。
不同的BFC之间渲染互不干扰。
创建BFC的元素，他的自动高度需要计算浮动元素。
创建BFC的元素，他的边框盒不会与浮动元素重叠。
创建BFC的元素，他的子盒子的外边距不会跟父盒子的外边距进行合并。
布局
多栏布局
- 两栏布局
左边定宽左浮动，右边设置overflow：hidden; BFC盒子会避开浮动盒子
- 三栏布局
左右盒子定宽左浮动，中间设置overflow：hidden; 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>
.clearbox::after {
content: "";
display: block;
clear: both;
}
.container {
background-color: lightblue;
width: 90%;
margin: 0 auto;
}
.aside {
float: left;
background-color: #008c8c;
color: white;
width: 300px;
margin-right: 10px;
}
.main {
/* BFC会避开浮动盒子 */
overflow: hidden;
background-color: gray;
}
</style>
</head>
<body>
<div class="container clearbox">
<div class="aside">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, reprehenderit dolorem? Accusantium, dicta
magnam deleniti amet debitis ut? Facere provident libero commodi nostrum accusamus nam ipsum deleniti?
Asperiores modi dolores vero autem error debitis voluptate, culpa, officiis soluta eum iusto aspernatur
numquam consequatur dolor commodi dicta quia doloremque impedit minima ipsum fuga, non sapiente quas
eveniet! Nulla nesciunt eum, quisquam culpa voluptatum repudiandae dolorem, vel voluptate molestias harum
quo ipsam sint quaerat aliquid vero corporis totam unde illo obcaecati ut possimus sit id. Ea sunt iure
libero earum voluptatum cupiditate odio tempora corrupti temporibus recusandae? Quam tempora incidunt
corporis id ratione neque nobis fugiat eaque cum natus! At dolorem voluptas odio cum sint facilis alias
harum! Eaque molestias, molestiae et libero numquam suscipit earum necessitatibus aspernatur alias nisi
fugiat tempora ex blanditiis! Odit est totam, rerum recusandae quidem voluptas vel nemo veritatis magni,
culpa numquam quo corporis perferendis debitis tempora sequi. Similique quasi in corporis nulla harum vitae
voluptatem aut odio animi dolor culpa consequatur quas sapiente voluptates ea voluptatum sit sed quaerat,
ratione labore error recusandae beatae obcaecati commodi. Ipsum necessitatibus quos placeat deleniti
corrupti voluptatum rerum expedita nihil qui, laboriosam natus, quia nulla quasi perspiciatis! Sunt at quod
corrupti eveniet vero alias voluptatum provident corporis tenetur vitae cum amet, beatae explicabo dicta
expedita, fuga ratione rem inventore delectus. Mollitia eum laborum magnam quae! Nobis sequi temporibus
illum, ullam culpa ut, facilis incidunt eveniet corporis corrupti perspiciatis ducimus sunt quam eum, veniam
nostrum! Nemo fuga tempora possimus eos? Adipisci architecto perspiciatis neque perferendis quod praesentium
ea voluptatum, dignissimos eum natus molestiae vero ullam reprehenderit laborum eaque dolorum tenetur
delectus voluptas dolorem sapiente! Enim eius a accusamus, amet quis dicta ut reiciendis esse architecto eos
expedita! Esse, nulla. At quisquam quidem natus corporis sit quis maxime voluptas doloribus? Animi
doloremque ipsa inventore quis, illo nisi possimus ex ipsam eos? Vitae sit quidem consectetur sapiente cum
rem modi possimus quas rerum magni quae at, animi illum odit. Labore perferendis cupiditate non rem dolorem
quos officiis adipisci, rerum provident illum iusto dicta asperiores laboriosam dolor molestias quibusdam
minima atque totam ipsum? Reiciendis dolores quo illum optio rem magnam quasi asperiores neque, delectus
porro, placeat veritatis sunt aperiam aut, explicabo aliquam. Nesciunt provident vero quis dolor, pariatur
laudantium at doloribus alias assumenda? Odit voluptates amet harum, placeat eius sed fuga ipsum aliquid,
vel qui corrupti at aperiam exercitationem voluptatum et dolorum sequi ab asperiores. Laboriosam enim cumque
harum ratione, officiis ducimus, reprehenderit optio repudiandae praesentium nisi totam hic corporis,
corrupti vero ipsam quam consectetur eos! Ab velit numquam deserunt beatae necessitatibus dolore harum
suscipit aliquam, sequi earum fugit optio est perferendis? Odit quam voluptatem natus aliquid, dicta ipsum,
necessitatibus reiciendis totam officiis, pariatur dolores consectetur temporibus? Repudiandae maxime animi
natus quisquam et reiciendis accusantium. Consequatur vel cum ab debitis odit, corrupti autem temporibus
mollitia alias tenetur asperiores recusandae vero ea nemo aspernatur illum nulla repudiandae labore, harum
officia sunt nam accusamus. Ipsa eveniet minima eius omnis sequi repellendus, ea mollitia quae doloremque id
dolore magnam nihil libero esse voluptatibus, perferendis reiciendis. Dolor magni commodi blanditiis
assumenda soluta odio totam quisquam aspernatur nulla quo sed saepe ea error culpa, omnis possimus, a
impedit ad fuga pariatur? Saepe, dicta officiis voluptates mollitia rerum alias quis illum vel dignissimos,
quibusdam ut vitae nostrum. Delectus modi debitis at libero ullam, ab ipsum fuga amet quis minima ad magni.
Distinctio officiis ut similique consectetur, repudiandae temporibus fugit laboriosam aliquam consequatur.
Voluptatum explicabo voluptates ea delectus atque exercitationem repellendus doloremque tempore provident
quisquam minus voluptate, molestiae praesentium, vero repellat magnam, culpa aliquam odit libero sapiente.
Suscipit quas modi a necessitatibus eaque rem quasi iure excepturi amet veritatis est voluptatem rerum error
nihil molestias explicabo vero, impedit ipsam, deleniti maxime in, exercitationem ex ipsa? Quas ab
voluptatem laborum praesentium dolor minima provident commodi, cupiditate vitae iste sit iure repellat illum
delectus veniam consequuntur optio harum architecto obcaecati! Dolores vitae, iure reprehenderit rem fugit
beatae, ducimus aliquid sint est quisquam, debitis nesciunt quos deleniti nulla ullam nostrum aspernatur
odio voluptates quae. Sunt exercitationem, quia ipsa fugiat maxime ipsum? Tempora non fugiat temporibus
perferendis suscipit optio, voluptatum, corporis maiores, voluptates excepturi sint necessitatibus esse
perspiciatis rem reprehenderit debitis numquam aperiam recusandae vero? Earum obcaecati iusto ab esse
eligendi, odio nisi iure. Vel ea aliquam dolor perferendis asperiores? Accusantium inventore placeat aut
beatae voluptatum. Nesciunt, reiciendis, dolorem culpa delectus quo modi quidem harum eius tempora a
expedita id! In, porro magni? Officiis, laudantium? Eum autem repellendus voluptatum, ipsum, assumenda illum
quae facere atque, iste nihil veritatis est adipisci? Reiciendis, odio ut eaque odit in dolorum voluptatem
facilis incidunt, iure magnam esse earum molestiae enim doloribus fuga veniam laborum debitis maxime.
Distinctio accusamus delectus tempore. Assumenda iusto, quisquam excepturi culpa cumque doloremque neque.
Neque molestias tenetur laborum doloremque eius reprehenderit quia. Doloribus sapiente est accusamus
exercitationem officiis suscipit corrupti aspernatur necessitatibus natus officia itaque reprehenderit
commodi quaerat architecto non illo veniam culpa, voluptatibus ipsa. Ut id perferendis quisquam cupiditate
impedit quasi necessitatibus possimus exercitationem voluptatum. Officiis ullam reprehenderit ex, facilis a
laudantium eveniet est fugit neque fuga voluptatum, numquam doloribus dolore veniam repellendus consequuntur
sit dolores? Dolorum temporibus nulla ab autem. Aperiam necessitatibus sed delectus ipsa maiores explicabo,
perspiciatis corrupti impedit. Illum rerum incidunt placeat non, nobis eaque repellat eligendi sequi
inventore doloremque ab consequatur in sint minus voluptatum obcaecati nulla maiores reiciendis labore
tenetur quaerat reprehenderit porro vel unde? Veritatis aliquam id doloremque eligendi cupiditate aspernatur
obcaecati, libero officia, quos eius ab asperiores hic voluptatum et recusandae corporis beatae deserunt
dicta? Molestiae, numquam aperiam. Sit perferendis quisquam earum iste nisi aut dolores dicta deleniti totam
quas, exercitationem perspiciatis neque est itaque minima magni dolore optio error similique suscipit, at
corrupti. Quasi repellendus provident excepturi distinctio totam saepe odio consequatur aliquid, porro quo
ipsam ducimus blanditiis magni consequuntur nemo illum quos ab, non mollitia fuga accusantium! Illum
asperiores architecto nisi explicabo deleniti voluptates, blanditiis aliquid atque harum reiciendis quis
autem adipisci sint, fugiat animi quaerat numquam fugit, non tempora ipsa! Quasi, amet facilis. Harum?
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti vel voluptates at veritatis, minima
quibusdam quis similique perferendis officia inventore fugit nulla, nihil minus sed voluptate ducimus
recusandae! Atque odio quidem doloribus, illum aperiam hic repudiandae reiciendis, iure praesentium impedit
veniam quae odit eveniet numquam. Facilis vero ipsa quam consectetur, harum, quia corrupti rem excepturi
blanditiis officiis aperiam maxime tempora nesciunt esse deserunt at odit unde! Suscipit veritatis ut,
necessitatibus libero soluta quidem tenetur vitae iure temporibus saepe, modi aperiam molestiae asperiores
eligendi itaque magni inventore. Nobis officia maiores distinctio consequatur porro odio fugit tempora
quibusdam libero temporibus veniam dolorem rerum doloribus, exercitationem harum quis vero architecto,
eveniet veritatis eaque aspernatur dolorum alias. Deserunt molestias reiciendis enim suscipit quibusdam
tenetur ab, a similique perferendis, at esse maxime dicta eaque porro recusandae voluptatum officiis vel
commodi repellat debitis, modi nostrum dolorem odit error? Vitae porro voluptas labore pariatur deleniti
soluta, voluptate quas. In quaerat porro nam, adipisci perspiciatis earum quo numquam consequuntur culpa
dolores blanditiis dolor tempora praesentium quidem repellat eaque, cumque rerum dolore corrupti, commodi
natus voluptas itaque. Fugiat possimus nulla illo. Molestiae exercitationem autem corporis maxime voluptates
iusto explicabo obcaecati eligendi facilis! Eos facere fuga accusantium, quas sunt rerum ipsam iusto cum
soluta. Minus, dolore, deleniti odio inventore facilis, fugit quos voluptate laborum ullam eligendi
aspernatur distinctio. Porro blanditiis dolore distinctio ipsum laudantium sunt velit voluptatibus magni
reprehenderit possimus quo, amet nisi aut earum obcaecati aperiam illo quidem aliquam ex perferendis! Totam
aliquam veritatis, corrupti quasi distinctio, et sed impedit odio dolorem alias consequuntur similique ex
nesciunt exercitationem ipsam voluptas numquam tenetur magni vitae? Totam velit, minus impedit neque facere
provident voluptas dicta, laborum fugit illum assumenda? Rem totam officia, incidunt enim aspernatur facilis
magnam eius quis earum repudiandae optio aperiam est quia aut dolorem officiis itaque voluptatem!
Laboriosam, voluptatum temporibus velit eaque placeat cum odit nobis repellat vero iste ratione ipsam
blanditiis aperiam impedit dolor repellendus quidem eius mollitia, labore doloremque dolores aut. Quae ab,
optio nobis alias natus saepe laudantium, consectetur ullam at possimus qui consequuntur eaque illo
reprehenderit ratione? Inventore corrupti possimus cupiditate nam aperiam laboriosam tempora? Sunt obcaecati
asperiores debitis, expedita sapiente doloribus, assumenda magnam mollitia fuga voluptatum similique neque
facilis deserunt natus cumque porro perspiciatis, est numquam vero. Corrupti ratione temporibus illo quaerat
debitis odit aliquam aut, eveniet iusto et sit, dolores suscipit. Deleniti ab perspiciatis corporis soluta
beatae. Dignissimos, expedita voluptatem dolore, asperiores voluptates incidunt ratione necessitatibus
impedit molestias voluptatum nemo officiis provident culpa unde, harum repellat cum commodi vel nobis
nesciunt delectus repudiandae? Blanditiis, harum aliquid itaque, quaerat officiis voluptate ut debitis eaque
iste dolorum vero obcaecati quia velit reiciendis quas dolores eius quo consectetur magni! Perspiciatis
culpa dolorum officiis esse tempora eaque, praesentium, delectus quia sit quaerat at quibusdam repellendus
temporibus est inventore consequuntur eius, minus reiciendis ex. Itaque facilis maxime, ipsum totam nulla
pariatur beatae voluptatem repellendus assumenda asperiores enim fugiat, quia porro? Dolorem, sed qui quis
nulla maxime vitae maiores ex assumenda, quia, magni mollitia minima odit dignissimos! Iure error aut,
accusantium assumenda animi vero? Voluptas, ut recusandae magnam dolor sunt molestiae obcaecati quas, dolore
porro eum totam ipsum itaque nihil a nam, incidunt voluptatibus doloremque facilis? Illum, maxime optio unde
cumque dolorum, magni repudiandae dolorem quo veniam cupiditate in? Quos ad quas fugiat quo, voluptas
consequuntur enim modi totam provident libero sequi eaque voluptate dolore et quidem perferendis nesciunt
quaerat? Voluptate deserunt repellat voluptatem, accusamus nam voluptates ipsam alias inventore enim saepe
dignissimos necessitatibus aut? Commodi illo asperiores, sit temporibus ab iure quaerat tempora laudantium
aliquid, dolore quam sequi aperiam veritatis reprehenderit eius quos alias id autem facere blanditiis
incidunt, facilis vitae consequuntur! Error quidem minus, necessitatibus nesciunt animi modi autem quis
possimus vel perspiciatis reprehenderit. Tempora cumque architecto est dolores! Ad, reprehenderit maxime.
Autem, eaque pariatur? Minus quis harum maxime, vel dignissimos ducimus rem quas odit? Suscipit accusantium
consequuntur veniam similique nemo magni dolores facilis provident, quaerat soluta autem beatae repudiandae
facere quia rem aperiam ea sed odio modi, maiores in. Placeat eaque, magni autem officia illo quae libero
dicta quis maiores tempore explicabo nesciunt impedit veritatis rem numquam ex labore ipsa porro nam
quisquam voluptatibus nobis maxime? Repellendus culpa, soluta recusandae eligendi ratione similique
laboriosam natus itaque, ad animi iure quidem enim architecto totam cupiditate deserunt dolore esse dicta
quae, qui quis facere earum maiores deleniti. Ex architecto quibusdam recusandae tenetur enim tempora
repudiandae necessitatibus odio. Iure provident labore sunt eos, accusantium vero nesciunt quia praesentium
ab dolorum suscipit necessitatibus magnam laboriosam accusamus consequuntur modi mollitia omnis quam
perspiciatis rem maxime natus voluptate dignissimos cumque! Nulla corrupti quam illo nobis eum eligendi
quas! Minus tempora illum suscipit blanditiis esse. Fugiat, numquam doloribus ea quos labore quam aperiam
nemo. Odit aspernatur vero nihil est minus ipsum natus eveniet! Quasi beatae fugiat quis tenetur. Unde quis
beatae, ut ipsa eos ab, provident accusantium est facere ex atque dignissimos omnis dolore magni molestiae?
Corrupti unde quia sequi vitae consequuntur molestias facilis est. Nobis alias harum neque modi molestiae
similique! Corporis nihil sint autem aut consequuntur non eius dolor quaerat! Voluptate minima fuga quas
dolorum sed esse repellendus facere a praesentium, voluptas dignissimos recusandae obcaecati odio nihil hic.
Vitae veritatis inventore praesentium ut nam, deleniti facilis a in possimus modi rerum, debitis perferendis
aliquam dolorum. Nesciunt enim fuga commodi vero ad quo totam amet facilis iste voluptatibus ratione
veritatis sint perferendis fugiat quia, accusantium corporis? Repudiandae, cupiditate accusantium. Corrupti,
ducimus non. Cumque quaerat iure aperiam, velit corrupti id aliquid mollitia at labore officia earum et
magnam culpa ad sint dolore perferendis. Beatae, quia nostrum? Voluptatibus labore modi commodi accusamus
soluta debitis veritatis eius eligendi incidunt laudantium impedit nobis doloremque veniam, odit fugit
possimus sed ipsam. Consequuntur sequi reiciendis nam explicabo, est aliquid maxime molestiae porro
consectetur vel accusantium sint harum iste ducimus ex illo distinctio minima ab saepe ullam deleniti
veritatis! Molestiae, odit consequatur nisi sunt incidunt vitae natus cum at? Eveniet minima, alias
voluptatum excepturi repellat exercitationem quod fugit deserunt, assumenda consectetur distinctio magni sit
at possimus quo adipisci.
</div>
</div>
</body>
</html>
行高单位的区别
- 数字：是先继承后计算，就会根据当前元素的字体大小去计算。
- em：是先计算再继承就会不管元素字体大小是多少，都是一样的行高，这样就会出问题。
body背景
画布 canvas
一块区域
特点：
- 最小宽度为视口宽度。
- 最小高度为视口高度。
HTML元素的背景
覆盖画布
BODY元素的背景
如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）
如果HTML元素没有背景，BODY元素的背景覆盖画布。
关于画布背景图
- 背景图的百分比，相对视口。
- 背景图的高度百分比，相对于html高度
行盒的垂直对齐
多个行盒垂直方向上的对齐
设置一个css属性 vertical-align属性。（设置在行盒上）
他的值可以是预设值，也可以是像素跟百分比。
图片的底部白边
图片的父元素是一个块盒，块盒高度自动，图片底部往往会出现空白。
解决方法：
- 设置父元素的字体大小为0。
- 将图片设置为块盒。
堆叠上下文
堆叠上下文（stack context），他是一块区域，由某个元素创建，他规定了，该区域中的内容，在z轴上的先后顺序。
创建堆叠上下文的元素
- html元素（根元素）
- 设置了z-index（非auto）的定位元素。
同一个堆叠上下文中元素在z轴上的排列
从后到前的排列顺序：
- 堆叠上下文的元素的背景和边框
- 堆叠级别为负值的堆叠上下文
- 常规流非定位的块盒
- 非定位的浮动盒子
- 常规流非定位行盒
- 任何z-index为auto的定位的子元素，以及z-index是0的堆叠上下文。
- 堆叠级别为正数的堆叠上下文。
每一个堆叠上下文，独立于其他堆叠上下文，不能互相穿插。
参考线-深入理解字体
文字
文字是通过一些文字制作软件制作的，比如 fontforge
制作文字时，会有几根参考线，不同文字类型，参考线不同。同一种文字类型，参考线一致。
font-size
字体大小，设置的是文字的相对大小。
文字的相对大小：1000，2048，1024
文字顶线到底线的距离是文字的实际大小，（content-area，内容区），行盒的背景是覆盖内容区。
行高
顶线向上延申的空间，底线向下延申的空间，该空间叫做gap（空隙）默认情况下，由字体设计者决定。
行高就是向上延伸到向下延伸的距离。
line-height:normal，默认值，使用字体的默认gap
vertical-align
决定参考线：font-size，font-family，line-height
一个元素如果子元素出现了行盒，该元素内部也会出现参考线。
vertical-align属性默认值是baseline，默认该元素参考线和父元素基线对齐。
值是 super：表示该元素的基线与父元素的上基线对齐。
值是 sub：表示该元素的基线与父元素的下基线对齐。
值是 text-top：表示该元素的top线对齐父元素的顶线。
值是 text-bottom：表示该元素的bottom线对齐父元素的底线。
行盒组合起来可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行盒内所有行和的最高顶边，底边是该行盒的最低底边。
行框：line-box
实际，一个元素实际占用高度（高度自动），高度的计算是通过line-box计算。
值设置为数值，是相对于基线的偏移量。
值设置为百分比也是相对于基线的偏移量，相对于自身的行高。
line-box是承载文字内容的必要条件，以下情况不生成行框：
- 元素内部没有行盒
- 元素字体大小为0
可替换元素和行块盒的基线
图片：基线位置位于图片的下外边距
表单元素：基线位置在内容的底边
行块盒：
- 行块盒有文字请况最后一行有line-box，用最后一行的基线作为整个盒子的基线。
- 没有文字的情况，用下外边距作为整个盒子基线。
SVG
svg：ccalable vector graphics，可缩放的矢量图。
特点：
- 该图片使用代码书写而成。
- 缩放不会失真。
- 内容轻量。
怎么使用
- 直接复制svg代码
- img元素
- 背景图
- object
- embed
- iframe
书写svg代码
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="600" style="background-color:#999"> 设置宽度高度以及背景
<rect width="100" height="100" x="100" y="100" fill="red" stroke="black" stroke-width="5" />
<circle cx="200" cy="300" r="50" fill="transparent" stroke="black" stroke-width="5" />
<ellipse rx="100" ry="50" cx="300" cy="400" fill="blue" stroke="aliceblue" stroke-width="5" />
<line x1="30" y1="30" x2="50" y2="100" fill="transparent" stroke="black" stroke-width="5" />
<polyline points="200,50,300,50,300,100" fill="transparent" stroke="black" stroke-width="5" />
<polygon points="350,50,450,50,450,150,400,150" fill="none" stroke="black" stroke-width="5" />
</svg>
矩形：rect
<rect width="100" height="100" x="100" y="100" fill="red" stroke="black" stroke-width="5"/>
属性：
- width：宽度
- height：高度
- x：x轴坐标
- y：y轴坐标
- fill：填充
- stroke：描边
- stroke-width：描边宽度
圆形：circle
<circle cx="200" cy="300" r="50" fill="transparent" stroke="black" stroke-width="5" />
属性：
- cx：x轴坐标
- xy：y轴坐标
- r：半径
- fill：填充
- stroke：描边
- stroke-width：描边宽度
椭圆：ellipse
<ellipse rx="100" ry="50" cx="300" cy="400" fill="blue" stroke="aliceblue" stroke-width="5" />
属性：
- rx：椭圆宽度
- ry：椭圆高度
- cx：x轴坐标
- cy：y轴坐标
- fill：填充
- stroke：描边
- stroke-width：描边宽度
线条：line
线条是由点构成的。
<line x1="30" y1="30" x2="50" y2="100" fill="transparent" stroke="black" stroke-width="5" />
属性：
- x1：第一个点x坐标
- y1：第一个点y坐标
- x2：第二个点x坐标
- y2：第二个点y坐标
- fill：填充
- stroke：描边
- stroke-width：描边宽度
折线：polyline
<polyline points="200,50,300,50,300,100" fill="transparent" stroke="black" stroke-width="5" />
属性：
- points：点的坐标
- fill：填充，可以设置为none或者透明，不然svg会默认将第一个点和最后一个点连接并填充颜色。
- stroke：描边
- stroke-width：描边宽度
多边形：polygon
<polygon points="350,50,450,50,450,150,400,150" fill="none" stroke="black" stroke-width="5" />
属性：
- points：点的坐标
- fill：填充。
- stroke：描边
- stroke-width：描边宽度
路径：path
画一个圆弧
<path d="M0 400 A 200 200 0 0 1 200 200" fill="transparent" stroke="black" stroke-width="5" />
属性：
- d：路径的路径数据。由一系列路径命令组成：
- M（移动到）
- L（直线到）
- H（水平线到）
- V（垂直线到）
- C（三次贝塞尔曲线）
- S（光滑曲线）
- Q（二次贝塞尔曲线）
- T（光滑二次贝塞尔曲线）
- A（圆弧）
- Z（闭合路径）
- fill：填充，会自动闭合，可以设置为none。
- stroke：路径颜色
- stroke-width：路径宽度
例子，画一个太极图
<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" width="500" height="500">
<circle cx="250" cy="250" r="200" fill="none" stroke="black" />
<path d="M 250 50 A 100 100 0 0 1 250 250 A 100 100 0 0 0 250 450 A200 200 0 0 1 250 50" fill="black" />
<circle cx="250" cy="150" r="30" fill="white" />
<circle cx="250" cy="350" r="30" fill="black" />
</svg>
数据链接（data url）
如何书写
数据链接：表示将目标文件的数据直接书写在路径的位置。
语法：data:MIME,数据
意义
优点：
- 减少了浏览器的请求
- 有利于动态生成数据
缺点：
- 增加了页面体积，导致传输消耗资源
- 不利于浏览器缓存
- 会增加资源体积到原来的3/4
浏览器通常会缓存图片，css，js文件。
**应用场景： **
- 单个图片体积小，并且因为各种原因，不适合制作雪碧图。
- 图片由其他代码动态生成，并且图片较小。
样式补充
display:list-item
设置该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子，元素本身叫主盒子，附带的盒子叫次盒子，水平方式排列。
可以通过 list-style-type 属性设置次盒子的类型。(这个属性是可以继承的)
list-style-position 设置次盒子相对于主盒子的位置。
图片失效时的宽高问题
如果img元素的图片地址失效，就会跟普通行盒一样，无法设置宽高。
行盒中包含行块盒或者可替换元素（img，input，audio，vedio）
行盒的高度与他内部的行块盒盒可替换元素无关。（与自身的字体大小有关）
text-align：justify
表示除最后一行外，分散对齐。
writing-mode
设置文字的书写方向，一般在写古文的时候有用。
utf-8
每一个文字都对应一个数字； &#x数字; (x表示后面是一个十六进制的数字)
在网页上直接书写使用：&#x数字;。 要是在伪元素的内部：数字。
居中总结
盒子在其包含块中居中。
行盒（行块盒）水平居中
直接设置父元素 text-align：center;
常规流块盒水平居中
宽度固定，设置左右margin为auto
绝对定位元素水平居中
顶宽，设置left和right为0，将margin设为auto
单行文本垂直居中
设置文本所在元素的行高，为元素高度。
定位垂直居中
定高，上下坐标为0，margin设置为auto
