前端开发-css续3

表单进阶

1.单选框

a) name属性：当一组选项进行单选时，此组的所有单选按钮都应赋予同一个name。

b) label标签：点击选项中的文字时即可选中复选框。

第一步为单选框标签设置一个id--例： <input type="radio" name="sex" id="man">

第二步 label标签中选中此id--例：<label for="man">男</label>

c) checked属性：即一组选项有一个时默认选项直接在input标签中加入此属性。

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>表单进阶-单选框</h1><div>你对京东的满意程度</div><div><!-- 一组的选项要取一个名字才可以进行单选 --><input type="radio" name="dx">非常满意</div><div><input type="radio" name="dx">满意</div><div><input type="radio" name="dx">一般</div><div><input type="radio" name="dx">不满意</div><div><div>你的性别</div><div><input type="radio" name="sex" id="man"><!-- label的应用可以点击文字字段时便让单选框选中 --><label for="man">男</label></div><div><input type="radio" name="sex" id="woman"><label for="woman">女</label></div></div><div><div>你的性别</div><div><!-- checked 默认选中 --><!-- <input type="radio" name="xb" id="man1" checked="checked"> --><!-- 也可直接写checked --><input type="radio" name="xb" id="man1" checked><!-- label的应用可以点击文字字段时便让单选框选中 --><label for="man">男</label></div><div><input type="radio" name="xb" id="woman1"><label for="woman">女</label></div></div></body>

样式：

单选框

2.复选框

与单选框所使用的三个属性相同，直接给出实例。

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 与单选框三个属性相同 --><h1>表单进阶-复选框</h1><div><div>你的兴趣爱好:</div><div><input type="checkbox" name="hy" checked>抽烟<input type="checkbox" name="hy">喝酒<input type="checkbox" name="hy">烫头</div></div><div><div>你擅长的技术:</div><div><input type="checkbox" name="js" id="html"><label for="html">html</label><input type="checkbox" name="js" id="css"><label for="css">css</label><input type="checkbox" name="js" id="js"><label for="js">js</label></div></div>
</body>

样式：

复选框

3.上传文件和隐藏字段

上传文件 type=“file”---点击后即可进入本人电脑文件部分。
图片按钮 type="image" src="" ---即将按钮替换成一张图片作为按钮。
隐藏按钮 type=“hidden”----此按钮不显示，通过value值带给后端信息。
禁用 disabled=“disabled”/disadled---此按钮或是文本禁用
只读 readonly ---不能输入

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div>请截图说明</div><div><!-- 上传文件 --><input type="file"></div><div>图片按钮--用图片代替提交按钮(input type="submit")</div><div><form action=""><!-- 图片按钮 --><input type="image" src="../image/submit.png"></form></div><div><!-- 隐藏 --><div>隐藏按钮</div><input type="hidden" value="带给后端的个人信息"></div><div><div>禁用,只读</div><div><buttom disabled="disabled">注册</buttom><br><input type="radio" disabled>非常不满意<br><input type="text" disabled value="111"><br><!-- 只读功能 --><input type="text" readonly value="222"></div></div>
</body>

样式：

上传文件及部分属性

4.下拉菜单

select标签---形成下拉菜单

两个属性：

1) size 控制要显示几个选项

2) multiple 可以选中多个选项选择时需要按住shift键

option标签---与select标签配套使用，作为下拉菜单里的选项

两个属性：

1) value 提供给后端所需的value值，即让后端知道选择了哪一个选项

2) select 默认选中

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>表单进阶-下拉菜单</h1><div><div>收货地址</div><!-- 选择 --><!-- select 支持的属性 1.size 控制要显示几个选项2.multiple 可以多个选中 需要按住shift键--><select size="3"><option>辽宁</option><option selected>河北</option><option>河南</option><option>内蒙古</option><option>北京</option><option>上海</option></select></div><div><div>你想要买什么</div><select size="3" multiple><!-- option 支持的属性1.value 提供给后端需要用的value值 让后端知道我们选中了哪一个2.selected 默认选中--><option value="桌子" selected>桌子</option><option value="椅子" selected>椅子</option><option value="台灯">台灯</option><option value="沙发">沙发</option><option value="壁纸">壁纸</option><option value="衣服">衣服</option></select></div>
</body>

样式：

下拉菜单

5.文本域

textarea标签--多行文本输入框

属性：

直接在标签中设置

cols 设置文本框行数--一般不用
rows 设置文本框列数--一般不用
placeholder 文本框提示文字
textarea的value值写在双标签内部，应注意空格

在style标签中设置

width---设置文本框的宽度
height---设置文本框的高度
resize---重新设置文本框的大小取值：both(默认值)/none/vertical-竖直/horizontal-水平

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>textarea {height: 100px;width: 100px;/* resize 重新设置大小，取值：vertical-竖直 horizontal-水平 both-都可(默认值) none-都不可*/resize: vertical;}</style>
</head><body><h1>表单进阶-文本域 多行文本输入</h1><!-- textarea 多文本输入框1.cols 设置几行2.rows 设置几列3.playceholder：提示文字4.默认value值写在双标签内部注意空格--><div><!-- 单行文本value值在标签内写 对比 --><input type="text" value="xxx"><textarea cols="10" rows="10" placeholder="请输入你的意见">提前设置好的value</textarea><textarea cols="10" rows="10" placeholder="请输入你的意见"></textarea></div>
</body>

样式：

多行文本框

6.字段集

<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。
<legend> 标签为 <fieldset> 元素定义标题。

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>fieldset {border: 1px solid blue;width: 200px;height: 100px;}legend {border: 1px solid pink;text-align: center;}</style>
</head><body><h1>表单进阶-字段集</h1><fieldset><legend>性别</legend><input type="radio" name="sex">男<input type="radio" name="sex">女</fieldset>
</body>

样式：

H5新增

1.html5 语法

内容类型

html5文件扩展符与内容类型保持不变，仍然为".html" 或".htm"

DOCTYPE声明

不区分大小写

指定字符集编码

meta charset="UTF-8"

可省略标记元素

不允许写结束标记的元素:br,col,embed,hr,img,input,link,meta

可以省略结束标记的元素:li,dt,dd,p,option,colgroup,thead,tbody,tfoot,tr,td,th

可省略全部标记的元素:html,head,body,colgroup,tbody

省略引号

属性值可以使用双引号，也可使用单引号。

2.html5 新增语义化标签

section元素表示页面中的一个内容区块相当于body
article元素表示一块与上下文无关的独立的内容
aside元素在article之外的，与article内容相关的辅助信息
header元素表示页面中一个内容区块或整个页面的标题相当于头部
footer元素表示页面中一个内容区块或整个页面的脚注相当于脚部
nav元素表示页面中导航链接部分相当于导航栏
figure元素表示一段独立的流内容，使用ficaption元素为其添加标题（第一个或最后一个子元素的位置）
main元素表示页面中的主要的内容（ie不兼容）

用来给开发者，爬虫来看的便于理解

图解

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0px;padding: 0px;}html,body {height: 100%;}header,footer {height: 50px;line-height: 50px;text-align: center;background-color: orange;}section {height: calc(100% - 100px);}nav,aside {width: 100px;height: 100%;background-color: #ccc;float: left;}main {width: calc(100% - 200px);height: 100%;background-color: aqua;float: left;}.article1,.article2 {height: 50%;}main header,main footer {background-color: pink;}main p {height: calc(100% - 100px);}</style>
</head><body><!-- 这是头部 --><!-- <div class="header"></div><div class="body"></div><div class="footer"></div> --><header>header</header><section><nav><figure>nav</figure><ul><li>11</li><li>111</li><li>111</li><li>111</li></ul></nav><main><article class="article1"><header>article-header</header><p></p><footer>article-footer</footer></article><article class="article2"><header>article-header</header><p>11111</p><footer>article-footer</footer></article></main><aside><figure>aside</figure><p style="width:100px;">11111111111111111111111111111111111</p></aside></section><footer>footer</footer></body>

遇到问题：p标签中明明设置了宽度为什么里面文字会继续显示在外面?

样式：

3.新增音频标签

<audio>音频标签

属性：

src 音频来源
controls 音频的控制条
loop 循环播放
autoplay 自动播放
muted 静音

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p></p><h1>音频</h1><!-- controls 出现音频的控制栏 loop：循环autoplay：自动播放muted：静音--><audio src="../audio/抖音.m4a" controls loop autoplay muted></audio></body>

实例：

4.新增视频标签

<video>视频标签

属性：

src 音频来源
controls 音频的控制条
loop 循环播放
autoplay 自动播放
muted 静音
poster 海报封面即视频封面

实例：

样式：

5.增强表单-input

type="color" 生成一个颜色选择的表单
type="tel" 唤起拨号盘表单
type="search" 产生一个搜索意义的表单
type="range" 产生一个滑动条表单
type="number" 产生一个数值表单
type="email" 限制用户必须输入email类型
type="date" 限制用户必须输入日期
type="url" 限制用户必须输入url类型
type="month" 限制用户必须输入月类型
type="week" 限制用户必须输入周类型
type="time" 限制用户必须输入时间类型
type="datetime-local" 选取本地时间

实例:

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action=" "><div><!-- 颜色选择 -->颜色选择：<input type="color" name="color"></div><div><!-- email -->email：<input type="email" name="email"></div><div><!-- url -->url地址：<input type="url" name="url"></div><div><!-- tel 一般在手机端使用 -->电话号码：<input type="tel" name="tel"></div><div><!-- 滑块效果 min 最小值max 最大值value 起始值step 步长-->滑块效果：<input type="range" name="range" min="100" max="200" value="100" step="10"></div><div><!-- 数字类型 -->数字类型：<input type="number" name="number" min="5" max="10" value="5" step="1"></div><div><!-- 搜索 -->搜索：<input type="search"></div><div><!-- 日期选择 -->日期选择：<input type="date" name="date"><div><!-- 月份选择 -->月份选择：<input type="month" name="month">周数选择：<input type="week" name="week">实时选择：<input type="datetime-local" name="datetime-local"></div></div><input type="submit"></form>
</body>

样式：

6.增强表单-选项列表

datalist：选项列表

要想搜索框与选项列表相连必须加id。

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text" list="mylist"><datalist id="mylist"><!-- option中必须加value值 --><option value="手机"></option><option value="手表"></option><option value="手环"></option><option value="手连"></option></datalist>
</body>

样式：

7.表单增强-属性

autofocus属性--给文本框，选择框或者按钮控件加上该属性，当页面打开时，该控件自动获得国际焦点，一个页面只有一个。
required属性--验证输入不能为空
multiple--可以输入一个或多个值，每个值之间用逗号分开

例:<input type="email" multiple/>

还可以应用于file

pattern--将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定的格式

例:<input pattern ="[0-9][A-z]{3}" 即需要按此格式输入:一个数与三个大字母 "placeholder= ‘输入内容：一个数字与三个大字母’ "

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action=" "><!-- autofocus 自动获取焦点required 必填项 不能为空multiple 支持多个邮箱地址，用逗号隔开pattern 正则表达式--><div>用户名: <input type="text" name="username" autofocus required pattern="[0-9][A-Z]{3}"></div><div>邮箱：<input type="email" name="email" required multiple></div><input type="submit"></form>
</body>

样式：

css3基础-增加

渐进增强：针对低版本浏览器进行构建，保证最基本的功能，然后在针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验

优雅降级：一开始构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应版本未来环境的需要，降级（功能衰减）意味着往回看，而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

1.层级选择器

">" 子代选择器 --亲儿子
"+" 当前元素的后面第一个兄弟
"~" 当前元素的后面的所有兄弟

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 亲儿子选择器 */.box>li {border: 1px solid red;}/* + 给当前元素的后面第一个兄弟加属性*/.child+li {background-color: aqua;}/* ~ 给当前元素的后面所有亲兄弟加属性 */.son~li {background-color: aquamarine;}</style></head><body><ul class="box"><li>111<ul><li>111-1</li><li>111-2</li><li>111-3</li></ul></li><li class="child">222</li><li>333</li><li class="son">444</li><li>555</li><li>666</li></ul>
</body>

样式：

2.结构伪类选择器

X:first-child---匹配子集的第一个元素，IE7就可以支持
X:last-child---匹配父元素中的最后一个X元素
X:nth-child(n)---用于匹配索引值为n的子元素，索引值从1开始
X:only-child---这个伪类一般用的比较少，比较上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配
X:root---匹配文档的根元素，在HTML中，根元素永远是HTML
X:empty---匹配没有任何子元素(包括包含文本)的元素X

实例：包含first-child last-child nth-child属性

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 940px;height: 100px;margin: 0 auto;background-color: blue;}.box div {width: 300px;height: 100px;background-color: red;margin-right: 20px;float: left;}/* box的最后一个孩子 */.box div:last-child {margin-right: 0px;}li:first-child {background-color: red;}li:last-child {background-color: yellow;}/* 第几个指定属性 */li:nth-child(2) {background-color: blue;}/* 第几个，偶数2n或even奇数2n+12n-1或odd*/li:nth-child(2n) {border: 2px solid black;}li:nth-child(odd) {border: 3px solid green;}</style>
</head><body><!-- 通过某种结构关系查找页面比如：匹配某元素第一个子元素匹配某元素最后一个子元素 --><div class="box"><div></div><div></div><div></div></div><ul><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li></ul>
</body>

样式：

实例:包含only-child :root empty 三个属性

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* html,body {height: 100px;background-color: yellow;} *//* :root代表根节点 可以代替html */:root,body {height: 100px;background-color: yellow;}div {width: 100px;height: 100px;border: 1px solid black;}/* 给具有唯一一个孩子的节点加属性 */div p:only-child {background-color: pink;}/* 给空盒子加属性 盒子中有空格也不行  */div:empty {background-color: aqua;}</style>
</head><body><div><p>111</p><p>222</p></div><div><p>111111</p></div><div>11111</div><div></div></body>

样式：

3.目标伪类选择器

E:target---选择匹配E的所有元素，且匹配元素被相关URL指向

可以用来制作一个手风琴的效果。

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div .content {display: none;}div .content:target {display: block;}</style>
</head><body><div><a href="#aaa">aaa</a><div id="aaa" class="content">CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区...</div></div><div><a href="#bbb">bbb</a><div id="bbb" class="content">CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区...</div></div><div><a href="#ccc">ccc</a><div id="ccc" class="content">CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区...</div></div>
</body>

样式：

4.UI元素状态伪类选择器-主要应用表单

E:enabled---匹配所有用户界面（form表单）中处于可用状态的元素
E:enabled---匹配所有用户界面（form表单）中处于不可用状态的E元素
E:enabled---匹配所有用户界面（form表单）中处于选中状态的元素E
E:selection---匹配E元素中被用户选中或处于高亮状态的部分

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 非禁用的*/input:enabled {background-color: pink;}/* 禁用的 */input:disabled {background-color: aquamarine;}/* 焦点会匹配此选择器 */input:focus {background-color: blue;}/* 选中后匹配 */input:checked {background-color: green;}/* 属性选择器 */input[type=checkbox] {/* 去掉默认样式 */appearance: none;/* 自己添加样式 */width: 15px;height: 15px;border: 1px solid black;}/* 选中之后匹配 应用于任何标签 */div::selection {background-color: aqua;color: blue;}</style>
</head><body><form action="">用户名：<input type="text" name="username"><br>密码：<input type="password" name="password"><br><!-- 受默认样式的管控 -->记住用户名 <input type="checkbox"><br><input type="submit" disabled></form><div>CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区...</div>
</body>

样式：

UI伪类状态选择器

5.否定与动态伪类选择器

否定伪类选择器

E:not(s)---匹配所有不匹配简单选择符s的元素E

动态伪类选择器---讲a链接的时候讲过

E:link--链接伪类选择器

选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过，常用于链接上个

E:visited--链接伪类选择器

选择匹配的E元素，而且匹配元素被定义了超链接并且已被访问过，常用于链接锚点上

E:active--用户行为选择器

选择匹配的E元素，且匹配元素被激活，常用于链接锚点和按钮上

E:hover--用户行为选择器

选择匹配的E元素，且用户鼠标停留在元素E上

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 否定选择器 *//* 除了这个其他都应用 */li:not(:first-child) {background-color: pink;}li:not(:nth-child(2n+1)) {background-color: aqua;}</style>
</head><body><ul><li>111</li><li>222</li><li>333</li><li>444</li></ul>
</body>

样式：

6.文本阴影

text-shadow:10px 10px 10px red;

即给文本添加阴影

第一个值代表水平方向位移，第二个值代表垂直方向位移，第三个值代表模糊程度，第四个值代表阴影颜色。

可以添加多个阴影，即在后面添加，后继续添加阴影

例： text-shadow:10px 10px 10px red，1px 1px 1px blue;

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {text-shadow: 10px 10px 10px red, 0px -10px 1px blue;}/* 第一个10px 水平方向位移第二个10px 垂直方向位移前两个值可被设置为负数第三个10px 模糊程度越大越模糊第四个 阴影颜色 *//* 可以写多个阴影 */</style>
</head><body><div>大家好</div>
</body>

样式：

7.盒子阴影

盒子阴影-属性值
h-shadow	必需的，水平阴影的位置。允许负值
v-shadow	必需的，垂直阴影的位置。允许负值
blur	可选，模糊距离
spread	可选，阴影的大小
color	可选，阴影的颜色
inset	可选，从外层阴影（开始时）改变阴影内侧的阴影

例:box-shadow:10px 10px 5px #cccccc;

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;margin: 0 auto;/*  第一个值 水平阴影位置第二个值 垂直阴影位置第三个值 模糊距离第四个值 阴影大小第五个值 阴影颜色第六个值 是否让其为内阴影*//* box-shadow: 10px 10px 3px 10px orange inset; */box-shadow: 10px 10px 3px orange;}</style>
</head><body><div></div>
</body>

样式：

8.圆角边距

border-radius:10px;

使边框四个角的角度变圆。可以是一个值两个值三个值四个值。

一个值--四个角保持一致
两个值--左上角右下角一致,左下角右上角一致
三个值--左上左下右上,右下
四个值--顺时针方向

也可进行单独方向上的设置

border-top-left-radius --左上
border-bottom-left-radius --左下
border-top-right-radius --右上
border-bottom-left-radius --右下

圆形：取正方形盒子边长的各一半。

半圆：取长方形盒子，盒子长为宽的一半，取值为一半和0

扇形：取正方形盒子，其中一个值为盒子边长其他值为0

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1 {width: 200px;height: 200px;margin: 0 auto;background-color: green;border: 20px solid red;/* px或百分比边框圆角效果 *//* 四个角保持一致 *//* border-radius: 10px; *//* 两个值 左上角右下角一致,左下角右上角一致 *//* border-radius: 10px 20px; *//* 三个值 左上 左下右上,右下 *//* border-radius: 10px 20px 30px; *//* 四个值 顺时针方向 *//* border-radius: 10px 20px 30px 40px; *//* 单独设置一个角 左上 *//* border-top-left-radius: 20px; *//* 右上 *//* border-top-right-radius: 20px; *//* 左下 *//* border-bottom-left-radius: 20px; *//* 右下 *//* border-bottom-right-radius: 20px; *//* 水平/垂直 四个角*//* border-radius: 30px/60px; *//* 每个角 *//* border-radius: 10px 20px 30px 40px/60px 70px 80px 90px; *//* 这种单独设置是不支持的 *//* border-bottom-left-radius: 20px/10px;  不可以*//* 圆形 取盒子边长的一半 两种方式 *//* border-radius: 120px; */border-radius: 50%;}.box {width: 200px;height: 100px;background-color: aquamarine;margin: 0 auto;border-radius: 100px 100px 0px 0px;}.sx {width: 200px;height: 200px;background-color: pink;margin: 0 auto;border-radius: 200px 0 0 0;}</style>
</head><body><h3>圆形</h3><div class="div1"></div><h3>半圆</h3><div class="box"></div><h3>扇形</h3><div class="sx"></div>
</body>

样式：

9.字体引入

字体模块：@font-face

@font-face是css3中的一个模块，主要是把自己定义的web字体嵌入到你的网页中，随着@font-face模块的出现，我们在web开发中使用字体不怕只能使用web安全字体（@font-face这个功能早在IE4就支持）

语法规则：

@font-face{

font-family:<YourWebFontName>;

src:<source>[<fomat>];

[font-weight:<weight>];

[font-style:<style>];

}

@font-face语法说明：

YourWebFontName此值用的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的web元素中的font-family，如“font-family:YourWebFontName”
source-此值用的是你自定义的字体的存放路径，可以是相对路径也可以是绝对路径

10.怪异盒模型

即将padding和border值包含在width，和height中

含义：更改原有布局盒子模型的计算方式，通过box-sizing属性的取值进行更改

属性：box-sizing---允许您以特定的方式定义匹配某个区域的特定元素

属性值：content-box---这是由css2.1规定的宽度高度行为，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 200px;height: 200px;padding: 30px;border: 5px solid black;background-color: green;/* 标准盒模型 */box-sizing: content-box;}.box2 {width: 200px;height: 200px;margin-top: 100px;background-color: red;border: 5px solid black;/* 怪异盒模型 */box-sizing: border-box;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body>

样式：

11.弹性盒

弹性盒---一种新的布局方式，特别适合移动端布局。

弹性盒---display: flex; 在父元素中加入

影响：

让子元素默认横向排列
行内元素变为块元素
只有一个子元素的时候，margin:auto会让子元素自动居中

弹性盒-主轴方向修改

主轴：当弹性盒中的盒子默认方式水平排列时，主轴即为水平方向，侧轴为垂直方向

当弹性盒中的盒子改为垂直排列时，主轴为垂直方向，侧轴为水平方向

flex-direction: column(垂直排列)/row(水平排列)/row-reverse(反向水平排列)/column-reverse(反向垂直排列);

弹性盒-主轴侧轴对称方式

调整主轴对齐方式:justify-content: flex-start(靠左或靠上)/flex-end(靠右或靠下)/flex-center(靠中间)/space-between(两端对齐)/space-around(距离环绕自身盒子左右两边距离相等)

调整侧轴对齐方式: align-items: flex-end(靠右或靠下)/flex-start(靠左或靠上)/flex-center(靠中间);

弹性盒-折行与行间距

折行：即当大盒子为弹性盒的时候，里面的盒子会按照默认方式水平排列，即使小盒子过多只会导致小盒子自身缩小。所以对于这种情况的解决出现了折行。即当小盒子排列超过大盒子的范围，即在下一行在进行排列。

折行：flex-wrap: wrap;

行间距：控制折行后的行间距。

行间距： align-content: flex-start(靠左或靠上)/flex-end(靠右或靠下)/flex-center(靠中间)/space-between(两端对齐)/space-around(距离环绕自身盒子左右两边距离相等);

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 500px;height: 500px;border: 1px solid black;margin: 100px auto;/* 弹性盒 */display: flex;/* 垂直排列 */flex-direction: column;/* row 水平排列column 垂直排列row-reverse 反向水平排列column-reverse 反向垂直排列 *//* 调整主轴对齐方向flex-start 靠左或靠上flex-end 靠右或靠下flex-center 靠中间space-between 两端对齐space-around 距离环绕 自身左右两边等距*/justify-content: space-between;/* 调整侧轴对齐方式 flex-start 靠左或靠上flex-end 靠右或下flex-center 靠中间*/align-items: flex-end;/* 折行用法 如果盒子水平排列超过大盒子 默认时会将盒子缩小 排列在大盒子中折行后如果小盒子的排列超过大盒子则会在下一行进行排列*/flex-wrap: wrap;/* 控制折行后行间距 flex-start 靠左或靠上flex-end 靠右或靠下flex-center 靠中间space-between 两端对齐space-around 距离环绕 自身左右两边等距*//* align-content: flex-end; */}.box div {width: 100px;height: 100px;border: 1px dashed black;}.box span {width: 100px;height: 100px;border: 1px dashed black;}.box2 {width: 500px;height: 500px;border: 1px solid black;margin: 100px auto;/* 弹性盒 */display: flex;}.box1 {width: 100px;height: 100px;border: 1px dashed black;margin: auto;}</style>
</head><body><!-- 弹性盒是一种新的布局方式，特别适用移动端 --><!-- 影响：让子元素默认横向排列行内元素变为块元素只有一个元素的时候，margin:auto会自动居中--><div class="box"><div>111</div><div>222</div><div>333</div><div>444</div><div>555</div><div>666</div></div><div class="box"><span>111</span><span>222</span><span>333</span><span>444</span></div><div class="box2"><div class="box1">111</div></div>
</body>

样式：

12.项目属性设置

项目：弹性盒相当于容器，弹性盒中的小盒子相当于项目。

对齐方式

主轴为水平方向

align-self: flex-start(靠上)/flex-end(靠下)/center(居中)/baseline(于flex-start相似)/stretch(拉伸-不要设置项目的高度);

主轴为垂直方向

align-self: flex-start(靠左)/flex-end(靠右)/center(居中)/baseline(于flex-start相似)/stretch(拉伸-不要设置项目的宽度);

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 500px;height: 500px;border: 1px solid black;margin: 100px auto;/* 弹性盒 */display: flex;}.box div {width: 100px;/* height: 100px; */border: 1px dashed black;/* 怪异盒模型 */box-sizing: border-box;}.div1 {/* 居中 */height: 100px;align-self: center;}.div2 {/* 靠上 */height: 100px;align-self: flex-start;}.div3 {/* 靠下 */height: 100px;align-self: flex-end;}.div4 {height: 100px;align-self: baseline;}.div5 {/* 拉伸不设置div高度时 会拉伸到父盒子的高度 */align-self: stretch;}/* 主轴方向为垂直方向要想使stretch有用需去掉宽度哦*/.box1 {width: 500px;height: 500px;border: 1px solid black;margin: 100px auto;/* 弹性盒 */display: flex;/* 弹性盒垂直排列 */flex-direction: column;}.box1 div {/* width: 100px; */height: 100px;border: 1px dashed black;/* 怪异盒模型 */box-sizing: border-box;}.div6 {/* 居中 */align-self: center;}.div7 {/* 靠上 */align-self: flex-start;}.div8 {/* 靠下 */align-self: flex-end;}.div9 {align-self: baseline;}.div10 {/* 拉伸不设置div高度时 会拉伸到父盒子的高度 */align-self: stretch;}</style>
</head><body><!-- 弹性盒排列方式水平排列 --><div class="box"><div class="div1">111</div><div class="div2">222</div><div class="div3">333</div><div class="div4">444</div><div class="div5">555</div></div><!-- 弹性盒排列方式垂直排列 --><div class="box1"><div class="div6">111</div><div class="div7">222</div><div class="div8">333</div><div class="div9">444</div><div class="div10">555</div></div>
</body>

样式：

调整顺序

order: 1; 用来调整项目的顺序值越大越靠后。

实例:

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 项目调整顺序 */.box2 {width: 500px;height: 500px;border: 1px solid black;margin: 100px auto;/* 弹性盒 */display: flex;}.box2 div {width: 100px;height: 100px;border: 1px dashed black;/* 怪异盒模型 */box-sizing: border-box;}.div12 {/* 顺序调整 值越大越靠后 */order: 2;}.div13 {order: 1;}.div15 {order: -1;}</style>
</head><body><!-- 项目调整顺序 --><div class="box2"><div class="div11">111</div><div class="div12">222</div><div class="div13">333</div><div class="div14">444</div><div class="div15">555</div></div>
</body>

样式：

剩余宽高-宽高自适应

flex:1; 用来占满剩余宽高如果多个项目设置此属性则值越大所占比例越大

应用：可应用于三栏布局

实例：

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 项目剩余宽高 */.box3 {width: 500px;height: 500px;border: 1px solid black;margin: 100px auto;/* 弹性盒 */display: flex;}.box3 div {width: 100px;height: 100px;border: 1px dashed black;/* 怪异盒模型 */box-sizing: border-box;}.div16 {flex: 2;}.div17 {/* 占满剩余空间 *//* 只有一个盒子设置flex则填满剩余空间如果多个盒子设置了flex值则按比例分空间例: div16为flex2,div17为flex1,div18不设置flex则为原来的宽度则剩余空间即大盒子宽度减去div18的宽度, div16占剩余空间的2/3 div17占剩余空间的1/3*/flex: 1;}.div18 {order: 1;}</style>
</head><body><!-- 剩余宽高 --><div class="box3"><div class="div16">111</div><div class="div17">222</div><div class="div18">333</div></div>
</body>

样式：