你好！ 这是我自己编辑的一些知识点。如果你想学习CSS与HTML的有关知识, 可以仔细阅读这篇文章，了解一下关于CSS与HTML的基本语法知识。
文本
结构化元素
什么是结构化元素
指HTML元素中具有明确含义和作用的元素
H4部分结构化元素：
标签元素（<h1>~<h6>）
段落元素（<p>）
粗体元素（<b>）
斜体元素（<i>）
上标元素（<sup>）与下标元素（<sub>）
换行符（<br>）
水平线元素（<hr>）
H5新增结构化元素：
<article>元素
<section>元素
<nav>元素
<aside>元素
<header>元素
<main>元素
<footer>元素
caniuse网站：测试标签兼容性
HTML4.01版本的结构化元素
*标题元素
- 搜索引擎抓取HTML页面：
<head>元素中的<title>元素
<head>元素中的<meta name="keywords">
<body>元素中的<h1>元素
- 实际开发时，一般只使用<h1>~<h3>
- 默认显示的样式，只是浏览器对元素的解析：
浏览器对HTML页面提供一个默认样式
通过CSS样式进行覆盖
具体语法如下：
<h1>标题一</h1><!--标题最大，h1元素建议：一个HTML页面中只存在一个<h1>元素-->
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
*段落标签
HTML中<p>元素表示一个段落
<!--段落元素-->
<p>哈哈哈哈哈哈哈哈哈</p>
<p>啦啦啦啦啦啦啦啦啦</p>
注意：
注意：如果想要改变段落之间的间隔空间，建议使用CSS margin属性实现，而不是插入空段落元素或者<br>元素
粗体标签
具体语法如下：
<p>哈哈哈<b>哈哈</b>哈哈哈哈</p>
斜体元素
具体语法如下：
<p>哈哈哈<i>哈哈</i>哈哈哈哈</p>
上标和下标元素
<sup>元素表示上标元素，定义的文本内容与主体内容相比，显示更高更小
<sub>元素表示下标元素，定义的文本内容与主体内容相比，显示更低更小
<p>哈哈哈<sup>哈哈</sup>哈哈哈哈</p>
<p>哈哈哈<sub>哈</sub>哈哈哈哈</p>
换行符
<p>哈哈哈哈哈<br>哈哈哈哈</p>
水平线元
<p>哈哈哈哈哈哈哈哈哈</p>
<hr>
<p>哈哈哈哈哈哈哈哈哈</p>
HTML5版本的结构化元素
article元素
定义HTML页面中的可独立分配或可复用结构
具体语法如下：
<article>
<h1>哈哈哈哈哈哈哈哈哈</h1>
<p>略略略</p>
<p><small>呵呵呵呵</small></p>
</article>
section元素
定义HTML页面中的独立部分，该独立部分没有更具体的语义元素来描述该元素
具体语法如下：
<section>
<article>
<p>哈哈哈</p>
</article>
<article>
<p>啦啦啦啦啦啦啦啦啦</p>
</article>
</section>
注意：
- 一般通过是否包含一个标题元素（<h1>~<h6>）作为子级元素来识别每一个<section>元素
- 如果元素内容可以分为几个部分的话，应该使用<article>,而不是<section>元素
- 不要将<section>元素作为一个普通容器使用，这应该是<div>元素的用法
nav元素
定义HTML页面中的导航链接，比较常见的是菜单、目录和索引
具体语法如下：
<nav>
<ul>
<li><a href="#">标题</a></li>
<li><a href="#">目录</a></li>
<li><a href="#">导航</a></li>
</ul>
</nav>
HTML5提供的新的结构化元素都是容器元素
注意：
- 并不是所有的链接都必须使用<nav>元素，该元素只用于将一些热门的链接放入导航栏
- 一个HTML页面可能存在多个<nav>元素
aside元素
定义一个和HTML页面中其余内容几乎无关的内容，被认为是独立于该内容的一部分并且被单独的拆分出来而不会使整体受影响，通常比较常见的是侧边栏或者标注框
具体语法如下：
<style>
aside {
width:40%;
padding-left:.5rem;
margin-left:.5rem;
float:right;
box-shadow:inset Spx 0 5px -5px #29627e;
font-style:italic;
color:#29627e;
}
</style>
header元素
定义HTML页面中的具有引导和导航作用的内容，比如常见的是logo、搜索框、作者名称
具体语法如下：
<header>
<h1>name</h1>
</header>
<article>
<heade>
<h2>前端开发</h2>
<p>近十年相似欧宁我的农场被了哦就你那</p>
</heade>
<p>bhjbiunmn</p>
<p><a href="#">and so on...</a></p>
</article>
main元素
定义HTML页面中的主要内容
具体语法如下：
<main>
<h2>纪念卡</h2>
<p>那把剑空闲空间</p>
</main>
注意：
一个HTML页面中只能出现一个<main>元素
<main><元素不能出现在 <article>元素、<asid>元素、<nav>元素、<header>元素和 <footer>元素的内容
footer元素
定义HTML元素中的一个章节内容或根元素的页脚，一个页脚通常包含该章节作者、版权数据或文档相关链接等信息
具体语法如下：
<footer>
<ul>
<li>版权信息</li>
<li>站点地图</li>
<li>联系方式</li>
</ul>
</footer>
HTML5结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5版本的结构化元素</title>
</head>
<body><!--HTML5的结构化元素-->
<!--页面的顶部-->
<header>
<!--菜单、导航-->
<nav></nav>
</header>
<!--页面的主体-->
<main>
<section>
<article></article>
<article></article>
</section>
<!--作为与页面其他内容独立的-->
<aside></aside>
</main>
<!--页面的底部-->
<footer></footer>
</body>
</html>
语义化元素
什么是语义化元素
语义化元素与结构化元素类似，都是具有具体含义的元素，区别在于语义化元素更多定义一个单词、一行内容的语义或样式
例：
- 加粗元素（<strong>）
- 强调元素（<em>）
- 引用元素（<blockquote>和<g>）
- 引文元素（<cite>）
- 定义元素（<dfn>）
- 地址元素（<address>）
- 内容修改元素（<del>和<ins>）
加粗元素
定义十分重要的文本内容
具体语法如下：
<p><strong>说明：</strong>吧啦吧啦吧啦吧啦</p>
注意：
<!--加粗元素:
*<b>元素表示比较重要的信息
*<strong>元素就表示单纯地加粗
-->
强调元素
定义HTML页面中需要着重阅读的文本内容
具体语法如下：
<p>在HTML中，有些内容是需要<em>着重</em>阅读</p>
引用元素
定义：
<blockquote>元素定义HTML页面中的标记较长的引用内容，一般浏览器解析后会对其进行缩进
<q>元素定义HTML页面中的较短的引用内容，浏览器解析后会在其两侧使用引号包裹
具体语法如下：
<blockquote>
<p>
哈哈哈哈哈哈哈哈哈
</p>
</blockquote>
<p>说明：<q>吧啦吧啦吧啦吧啦</q></p>
引文元素
定义HTML页面中的对一个作品的引用，浏览器解析后会呈现斜体效果
该元素必须包含引用作品的符合简写格式的标题或者URL，可能是一个根据添加引用元数据的约定的简写形式
具体语法如下：
<p>更多信息可以阅读<cite>[ISO-0000]</cite></p>
定义元素
定义HTML页面中的术语,解析后也是斜体
具体语法如下：
<p>
<dfn id="def-internet">补码困难</dfn>
</p>
地址元素
定义HTML页面中提供个人或某个组织的联系信息，解析后为斜体
具体语法如下：
<address>
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+13115552368">(311)5-2368</a>
</address>
内容修改元素
定义：
内容修改元素可以标示出某个文本被更改过的部分
<del>元素用来定义HTML页面中删除的文字内容
<ins>元素来定义页面中插入的文字内容
具体语法如下：
<p>前端好<del>难</del><ins>容易</ins>学习啊</p>
字体样式
字体样式涉及什么
字体样式<font>
CSS中有关字体样式的属性主要是指font属性，该属性可以拆分为：
-font-family属性
-font-size属性
-font-weight属性
-font-style属性
字体系列
font-family
CSS font-family属性通过一个字体名或字体族名组成的列表来设置HTML页面中的字体
- 字体族的名字
- 通用字体族名称（serif<带衬线字体>,sans-serif<无衬线字体>,monospace<等宽字体>,cursive<草书字体>,fantasy<具有特殊艺术效果字体>）
具体语法如下：
p {
font-family:宋体；
}
可以设置多个族名
具体语法如下：
p {
font-family:宋体，黑体，楷体；
}
font-size
CSS font-size属性设置HTML页面中的字体大小
具体语法如下：
p {
font-size:24px;
}
- 绝对大小值：xx-small,x-small,small,medium,large,x-large,xx-large
- 相对大小值：large,smaller
- 长度值：px,em,rem,ex
- 百分之值
注意：
- 建议最好使用用户默认字体大小的相对大小，避免使用除了em和ex的绝对大小单位
- 如果一定要使用绝对大小的话，px是众多单位中最好的选择
font-weight
具体语法如下：
p{
font-weight:bolder;
}
设置：
- 绝对值：normal(400),bold(700)
- 相对值：lighter,bolder
- 数值：100~900
font-style
CSS font-style属性设置font-family的字体样式
具体语法如下：
.italic{
font-style:italic; ##高度少一点的斜体
}
.oblique{
font-style:oblique; ##正常斜体
}
font属性
CSS font属性是用来作为 font-family,font-size,font-style,font-weight,font-variant和line-height属性的简写形式
注意：
- font-style,font-variant和font-weight属性必须定义在font-size属性之前
- line-height属性必须定义在font-size属性后面，由/分隔，例如：16px/3
- font-family属性必须最后定义
顺序为：font-style ,font-variant ,font-weight ,font-size ,line-height ,font-family
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS的字体样式</title>
<style>
/*
font-family属性：
*浏览器的默认情况
*Chrome浏览器->黑体
*Safari浏览器->宋体
*注意：使用的字体取决于用户电脑的操作系统中是否存在对应的字体文件
*没有对应的字体文件：使用默认字体（通用）
*/
p{
font-family: 宋体,sans-serif;
/*font-size属性的浏览器默认值为16px或14px*/
font-size: 62px;
/*
font-weight属性
*bolder->900
*bold->600
*normal->400(默认值)
*lighter->100
*/
font-weight: bolder;
font-style: italic;
}
p {
/*
font属性设置字体样式的顺序
1.font-style和font-weight
2.font-size
3.font-family
*/
font: italic 100 16px;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
嵌入Web字体
@font-face是CSS的@规则中的一种，用来为HTML页面引入在线字体，通过@font-face 我们可以自己来准备字体文件，，从而消除对用户电脑字体的依赖
@font-face具体语法如下：
@font-face {
[ font-family:<family-name>;] || ##用来为引入的Web字体设置族名
[ src: <src>] || ##src中local指用户本地的，url指可在线下载
[ unicode-range:<unicode-range>;] ||
[ font-variant:<font-variant>;] ||
[ font-feature-settings:<font-feature-settings>;] ||
[ font-variation-settings:<font-variation-settings>;] ||
[ font-stretch:<font-stretch>;] ||
[ font-weight:<font-weight>;] ||
[ font-style:<font-style>;] ||
}
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引入Web字体</title>
<style>
/*设置引入Web字体*/
/*src: url('');*/
@font-face {
font-family: '仿宋_GB2312ttf';
src: url("CSS和HTML\04 文本\仿宋_GB2312.ttf");
font-weight: 400;
font-style: normal;
}
/*某元素设置字体样式*/
p{
font-family: 仿宋_GB2312ttf;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
文本样式
文本样式涉及什么
CSS中的文本样式是用来定义HTML页面中文本的布局
- 文本装饰(text-deccoration)
- 行间距(line-height)
- 字母间距(letter-spacing)和单词间距(word-spacing)
- 水平对齐方式(text-align)
- 垂直对齐方式(vertical-align)
- 文本缩进(text-indent)
- 文本阴影(text-shadow)
- 文本换行(word-wrap和word-break)
- 处理空白(white-space)
文本装饰
CSS text-decoration属性用来设置HTML页面中文本排版（下划线、顶划线、删除线或闪烁），text-decoration为简写属性，可以使用普通属性三个中任意一个
text-decoration=text-decoration-line
普通属性：
- text-decoration-line属性:用来设置元素中的文本的修饰类型
- text-decoration-color属性:用来设置文本修饰线的颜色
- text-decoration-style属性:用来设置由text-decoration-line设定的线的样式
具体语法如下：
p {
text-decoration-color:lightcoral;
text-decoration-line:underline;
text-decoration-style:solid;
}
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本装饰属性</title>
<style>
p{
/*
text-decoration属性：文本装饰（默认颜色为黑色）
*值
*underline:下划线
*overline:顶划线
*line-though:删除线
*/
/*text-decoration: line-through;*/
/*text-decration和text-decoration-line作用一致*/
text-decoration-line: underline;
/*设置装饰线颜色*/
text-decoration-color: aqua;
/*设置装饰线样式*/
text-decoration-style: solid;/*solid为默认值，意为单线*/
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
行间距
CSS line-height属性用来设置HTML页面中多行元素之间的空间量
- 行间距：两行文本中基线的距离
- 行距：上一行的底线到下一行顶线的距离
- 字体大小值：顶线到底线的距离
line-height属性的值
- normal关键字：默认值为1.2
- 数字值
- 长度值
- 百分比值
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行间距</title>
<style>
.p1{
line-height: 1.2;
}
.p2{
line-height: 2;
}
.p3{
line-height: 5;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈</p>
<p class="p1">哈哈哈哈哈哈哈哈哈</p>
<p class="p2">哈哈哈哈哈哈哈哈哈</p>
<p class="p3">哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
字母间距
CSS letter-spacing属性用来设置文本字符之间的间距
letter-spacing属性值：
- normal
- 长度值
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字母间距和单词间距</title>
<style>
/*设置字母之间的距离*/
.p1{
letter-spacing: 10px;
}
/*设置单词之间的距离*/
.p2{
word-spacing: 10px;
}
/*中文中的单个汉字=英文字母*/
.p3{
letter-spacing: 10px;
}
</style>
</head>
<body>
<p>nxjksneoil dm dmlh</p>
<p class="p1">nxjksneoil dm dmlh</p>
<p class="p2">nxjksneoil dm dmlh</p>
<p class="p3">哈哈哈</p>
</body>
</html>
水平对齐方式
CSS text-align属性设置文本内容相对于其所在元素在水平方式的对齐方式
具体语法如下：
.example{
text-align:right;
}
text-align属性值：
- start
- end
- left
- right
- center
- justify（两侧对齐）
- justity-all
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平方向对齐方式</title>
<style>
.p1{
text-align: left;
}
.p2{
text-align: right;
}
.p3{
text-align: center;
}
/*两端对齐：
*优点：文本结构看起来比较规整
*缺点：可能会导致单词/文字之间的间距不一致
*/
.p4{
text-align: justify;
}
</style>
</head>
<body>
<p class="p1">Up to now I have read a lot of books,for example,magazines,novels and storybooks and so on.But one of the books that I like best is My Life Story.It was created(创作)by an American writer-Helen Keller(海伦·凯勒)in 1902.She was a blind(盲的),deaf(聋的)and dumb(哑的)person.In the book,she wrote that she had not been able to see,hear or speak since the age of one year and seven months.This unusual thing made her very sad.When she was seven years old,she knew Miss Sullivan(沙利文),her good teacher.Helen was getting happier every day.Then,Miss Sullivan helped her learn how to write English words.At first,Miss Sullivan wrote some words on Helen's hands with her own fingers again and again.Helen was a very diligent girl.Because of this,she tried as much as possible to remember words.After that,she wrote and published(出版)many famous works.My Life Story is one of them.
My Life Story described her hard struggle to become an outstanding(著名的)writer and educationist(教育家)of the world.
It shows us a universal(普遍的bai)truth："Nothing is difficult if you put your heart into it!"This is why I like it best.What about you?
Mid Autumn Day is an autumn festive in China.It comes in September or October.On that day,families eat a big dinner, they also eat mooncakes somesmall round cakes with nuts meat or eggs in them.
The moon looks briter and rounder on that day .Chinese people often talk about their families and
tell the story of Chang e.It is like the Thanksgiving day in American.</p>
<p class="p2">Up to now I have read a lot of books,for example,magazines,novels and storybooks and so on.But one of the books that I like best is My Life Story.It was created(创作)by an American writer-Helen Keller(海伦·凯勒)in 1902.She was a blind(盲的),deaf(聋的)and dumb(哑的)person.In the book,she wrote that she had not been able to see,hear or speak since the age of one year and seven months.This unusual thing made her very sad.When she was seven years old,she knew Miss Sullivan(沙利文),her good teacher.Helen was getting happier every day.Then,Miss Sullivan helped her learn how to write English words.At first,Miss Sullivan wrote some words on Helen's hands with her own fingers again and again.Helen was a very diligent girl.Because of this,she tried as much as possible to remember words.After that,she wrote and published(出版)many famous works.My Life Story is one of them.
My Life Story described her hard struggle to become an outstanding(著名的)writer and educationist(教育家)of the world.
It shows us a universal(普遍的bai)truth："Nothing is difficult if you put your heart into it!"This is why I like it best.What about you?
Mid Autumn Day is an autumn festive in China.It comes in September or October.On that day,families eat a big dinner, they also eat mooncakes somesmall round cakes with nuts meat or eggs in them.
The moon looks briter and rounder on that day .Chinese people often talk about their families and
tell the story of Chang e.It is like the Thanksgiving day in American.</p>
<p class="p3">Up to now I have read a lot of books,for example,magazines,novels and storybooks and so on.But one of the books that I like best is My Life Story.It was created(创作)by an American writer-Helen Keller(海伦·凯勒)in 1902.She was a blind(盲的),deaf(聋的)and dumb(哑的)person.In the book,she wrote that she had not been able to see,hear or speak since the age of one year and seven months.This unusual thing made her very sad.When she was seven years old,she knew Miss Sullivan(沙利文),her good teacher.Helen was getting happier every day.Then,Miss Sullivan helped her learn how to write English words.At first,Miss Sullivan wrote some words on Helen's hands with her own fingers again and again.Helen was a very diligent girl.Because of this,she tried as much as possible to remember words.After that,she wrote and published(出版)many famous works.My Life Story is one of them.
My Life Story described her hard struggle to become an outstanding(著名的)writer and educationist(教育家)of the world.
It shows us a universal(普遍的bai)truth："Nothing is difficult if you put your heart into it!"This is why I like it best.What about you?
Mid Autumn Day is an autumn festive in China.It comes in September or October.On that day,families eat a big dinner, they also eat mooncakes somesmall round cakes with nuts meat or eggs in them.
The moon looks briter and rounder on that day .Chinese people often talk about their families and
tell the story of Chang e.It is like the Thanksgiving day in American.</p>
<p class="p4">Up to now I have read a lot of books,for example,magazines,novels and storybooks and so on.But one of the books that I like best is My Life Story.It was created(创作)by an American writer-Helen Keller(海伦·凯勒)in 1902.She was a blind(盲的),deaf(聋的)and dumb(哑的)person.In the book,she wrote that she had not been able to see,hear or speak since the age of one year and seven months.This unusual thing made her very sad.When she was seven years old,she knew Miss Sullivan(沙利文),her good teacher.Helen was getting happier every day.Then,Miss Sullivan helped her learn how to write English words.At first,Miss Sullivan wrote some words on Helen's hands with her own fingers again and again.Helen was a very diligent girl.Because of this,she tried as much as possible to remember words.After that,she wrote and published(出版)many famous works.My Life Story is one of them.
My Life Story described her hard struggle to become an outstanding(著名的)writer and educationist(教育家)of the world.
It shows us a universal(普遍的bai)truth："Nothing is difficult if you put your heart into it!"This is why I like it best.What about you?
Mid Autumn Day is an autumn festive in China.It comes in September or October.On that day,families eat a big dinner, they also eat mooncakes somesmall round cakes with nuts meat or eggs in them.
The moon looks briter and rounder on that day .Chinese people often talk about their families and
tell the story of Chang e.It is like the Thanksgiving day in American.</p>
</body>
</html>
垂直对齐方式
CSS vertical-align属性设置HTML页面中内联元素或表格单元格元素在垂直方向上的对齐方式
应用于内联元素的值：
1.相对于父级元素的值：
- baseline
- sub
- super
- text-top
- text-buttom
- middle
2.相对于行的值：
- top
- bottom
3.应用于表单单元格的值：
- baseline
- top
- middle
- bottom
具体语法如下：
img.top{
vertical-align:text-top;
}
img.bottom{
vertical-align:text-bottom;
}
img.middle{
vertical-align:middle;
}
文本缩进
CSS text-indent属性设置块级元素首行文本内容之间的缩进量
具体语法如下：
.example {
text-indent:5em;
}
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本缩进</title>
<style>
p{
text-indent: 100px;
}
</style>
</head>
<body>
<p>Up to now I have read a lot of books,for example,magazines,novels and storybooks and so on.But one of the books that I like best is My Life Story.It was created(创作)by an American writer-Helen Keller(海伦·凯勒)in 1902.She was a blind(盲的),deaf(聋的)and dumb(哑的)person.In the book,she wrote that she had not been able to see,hear or speak since the age of one year and seven months.This unusual thing made her very sad.When she was seven years old,she knew Miss Sullivan(沙利文),her good teacher.Helen was getting happier every day.Then,Miss Sullivan helped her learn how to write English words.At first,Miss Sullivan wrote some words on Helen's hands with her own fingers again and again.Helen was a very diligent girl.Because of this,she tried as much as possible to remember words.After that,she wrote and published(出版)many famous works.My Life Story is one of them.
My Life Story described her hard struggle to become an outstanding(著名的)writer and educationist(教育家)of the world.
It shows us a universal(普遍的bai)truth："Nothing is difficult if you put your heart into it!"This is why I like it best.What about you?
Mid Autumn Day is an autumn festive in China.It comes in September or October.On that day,families eat a big dinner, they also eat mooncakes somesmall round cakes with nuts meat or eggs in them.
The moon looks briter and rounder on that day .Chinese people often talk about their families and
tell the story of Chang e.It is like the Thanksgiving day in American.</p>
</body>
</html>
文本阴影
CSS text-shadow设置文本内容的阴影
具体语法如下：
selector{
text-shadow:color offset-x offset-y blur-raduis;
}
- color ：颜色
- offset-x:水平方向的偏移量
- offset-y：垂直方向的偏移量
- blur-raduis：阴影模糊半径
设置多重阴影
具体语法如下：
selector{
text-shadow:color offset-x offset-y blur-raduis;
}
selector{
text-shadow:red 10px 10px 2px,blue 5px 5px 7px,yellow 8px 8px 6px;
}
文本换行
CSS中设置换行的属性：
- word-wrap属性
- word-break属性
overfloat-wrap属性
属于微软的一个私有属性，重命名为overflow-wrap设置当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow-wrap属性</title>
<style>
.example{
width: 13em;
background: blue;
}
/*该属性用来强制拆分过长的的单词（从容器中溢出）*/
.break{
overflow-wrap: break-word;
}
</style>
</head>
<body>
<p class="example">nskjajkdhjsakd ( xadjsjbch jwsnkxj hwnxjjb jdxsjgiudjbwcbxvbhscsbxjsdcxsm
bxsbjsxwjbkhec wjhdcbjjnxwiuegyfrvhdjeyreuwikajshdjsm)</p>
<p class="example break">
nskjajkdhjsakd ( xadjsjbch jwsnkxj hwnxjjb jdxsjgiudjbwcbxvbhscsbxjsdcxsm
bxsbjsxwjbkhec wjhdcbjjnxwiuegyfrvhdjeyreuwikajshdjsm)
</p>
</body>
</html>
word-break属性
CSS word-break属性用来设置文本内容自动换行的处理方式。通过具体的属性值设置，可以告知浏览器实现任意位置的换行
属性值:
- normal
- break-all:对于出中文、日文、韩文的文本内容，设置可以在任意字符间断行
- keep-all:相对于normal
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>word-break属性</title>
<style>
.p1{
word-break: normal;
}
.p2{
word-break: break-all;
}
.p3{
word-break: keep-all;
}
</style>
</head>
<body>
<p class="p1">Up to now I have read a lot of books,for example,magazines,novels and storybooks and so on.But one of the books that I like best is My Life Story.It was created(创作)by an American writer-Helen Keller(海伦·凯勒)in 1902.She was a blind(盲的),deaf(聋的)and dumb(哑的)person.In the book,she wrote that she had not been able to see,hear or speak since the age of one year and seven months.This unusual thing made her very sad.When she was seven years old,she knew Miss Sullivan(沙利文),her good teacher.Helen was getting happier every day.Then,Miss Sullivan helped her learn how to write English words.At first,Miss Sullivan wrote some words on Helen's hands with her own fingers again and again.Helen was a very diligent girl.Because of this,she tried as much as possible to remember words.After that,she wrote and published(出版)many famous works.My Life Story is one of them.
My Life Story described her hard struggle to become an outstanding(著名的)writer and educationist(教育家)of the world.
It shows us a universal(普遍的bai)truth："Nothing is difficult if you put your heart into it!"This is why I like it best.What about you?
Mid Autumn Day is an autumn festive in China.It comes in September or October.On that day,families eat a big dinner, they also eat mooncakes somesmall round cakes with nuts meat or eggs in them.
The moon looks briter and rounder on that day .Chinese people often talk about their families and
tell the story of Chang e.It is like the Thanksgiving day in American.</p>
<p class="p2">Up to now I have read a lot of books,for example,magazines,novels and storybooks and so on.But one of the books that I like best is My Life Story.It was created(创作)by an American writer-Helen Keller(海伦·凯勒)in 1902.She was a blind(盲的),deaf(聋的)and dumb(哑的)person.In the book,she wrote that she had not been able to see,hear or speak since the age of one year and seven months.This unusual thing made her very sad.When she was seven years old,she knew Miss Sullivan(沙利文),her good teacher.Helen was getting happier every day.Then,Miss Sullivan helped her learn how to write English words.At first,Miss Sullivan wrote some words on Helen's hands with her own fingers again and again.Helen was a very diligent girl.Because of this,she tried as much as possible to remember words.After that,she wrote and published(出版)many famous works.My Life Story is one of them.
My Life Story described her hard struggle to become an outstanding(著名的)writer and educationist(教育家)of the world.
It shows us a universal(普遍的bai)truth："Nothing is difficult if you put your heart into it!"This is why I like it best.What about you?
Mid Autumn Day is an autumn festive in China.It comes in September or October.On that day,families eat a big dinner, they also eat mooncakes somesmall round cakes with nuts meat or eggs in them.
The moon looks briter and rounder on that day .Chinese people often talk about their families and
tell the story of Chang e.It is like the Thanksgiving day in American.</p>
<p class="p3">Up to now I have read a lot of books,for example,magazines,novels and storybooks and so on.But one of the books that I like best is My Life Story.It was created(创作)by an American writer-Helen Keller(海伦·凯勒)in 1902.She was a blind(盲的),deaf(聋的)and dumb(哑的)person.In the book,she wrote that she had not been able to see,hear or speak since the age of one year and seven months.This unusual thing made her very sad.When she was seven years old,she knew Miss Sullivan(沙利文),her good teacher.Helen was getting happier every day.Then,Miss Sullivan helped her learn how to write English words.At first,Miss Sullivan wrote some words on Helen's hands with her own fingers again and again.Helen was a very diligent girl.Because of this,she tried as much as possible to remember words.After that,she wrote and published(出版)many famous works.My Life Story is one of them.
My Life Story described her hard struggle to become an outstanding(著名的)writer and educationist(教育家)of the world.
It shows us a universal(普遍的bai)truth："Nothing is difficult if you put your heart into it!"This is why I like it best.What about you?
Mid Autumn Day is an autumn festive in China.It comes in September or October.On that day,families eat a big dinner, they also eat mooncakes somesmall round cakes with nuts meat or eggs in them.
The moon looks briter and rounder on that day .Chinese people often talk about their families and
tell the story of Chang e.It is like the Thanksgiving day in American.</p>
</body>
</html>
处理空白
CSS white-space用来设置如何处理HTML中的空白
属性值：
| 换行符 | 空格和制表符 | 文字转行 | |
|---|---|---|---|
| normal | 合并 | 合并 | 转行 |
| nowrap | 合并 | 合并 | 不转行 |
| pre | 保留 | 保留 | 不转行 |
| pre-wrap | 保留 | 保留 | 转行 |
| pre-line | 保留 | 合并 | 转行 |
| break-spaces | 保留 | 保留 | 转行 |
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>处理空白</title>
<style>
.p1{
white-space: pre;
}
.p2{
white-space: nowrap;
}
</style>
</head>
<body>
<!--浏览器默认会将所有的空白进行合并为一个-->
<p class="p1">h 哈哈哈 哈哈哈 哈哈哈哈哈哈哈哈哈</p>
<p class="p2">h 哈哈哈 哈哈哈 哈哈哈哈哈哈哈哈哈</p>
</body>
</html>