<!DOCTYPE html>
<!-- 注意css设置时对多个属性设置一致特性用逗号隔开 -->
<html>
<head>
<meta charset="utf-8">
<title>css学习2</title>
<style>
table,
th,
td {
border: 2px solid red;
/*没有solid属性，框架将不会实体化，故不会显示边框，2px规定框架大小*/
/*注意表格由于th，table，tr均会显示框架，故会显示双重框架，使用boder-collapse属性会进行折叠*/
/* 如上图，同时对多个标签定制同一个属性的方法为分组选择器 */
/* 关于嵌套选择器：
.what{}对所有采用该class的标签生效
.what p{}同 p.what{}对所有采用该class的标签的p元素生效，其它元素不生效。
*/
}
table {
border-collapse: collapse;
/*该属性用于折叠边框，使其显示但边框*/
width: 50%;
/*注意table中的width为具体数值时会将th，tr中的height属性覆盖，使其无法生效*/
/*width，height等后面的值可以用百分比，关键字，数值表示*/
}
th {
height: 80px;
background-image: url(https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3381573685,1866477444&fm=26&gp=0.jpg);
background-position: center;
background-attachment: fixed;
}
/* 设置表格内部时也可以用上次学到的body属性，设置背景图片和颜色背景
也可设置id属性或class属性对不同行或列表格进行定制
不要忘了表格有caption标签定制标题，caption可以css定制在表格底部或上方等，需用：caption-side标签*/
td {
text-align: left;
height: 80px;
vertical-align: top;
}
/*设置表格对齐方式为中央底部，表格宽度为80像素（仅对td标签有效）*/
/* 也可设置padding属性控制双重边框时的间距，单边框时不许要 */
div {
background-color: royalblue;
width: 200px;
margin: 0px;
padding: 50px;
border: 90px solid rebeccapurple;
}
/*总宽度等于width+2*margin+2*padding+2*border*/
#what {
border-left-color: rgba(34, 106, 201, 0.863);
border-left-width: 10px;
border-left-style: solid;
/* border-top-style: solid; */
/* border-top-width: 2px; */
/* border-bottom-style: solid; */
/* border-bottom-width: 2px; */
/* border-right-color: brown; */
/* border-right-width: 1px; */
/* border-right-style: solid; */
background-color: rgb(205, 218, 247);
}
/* #where {
border-style: solid dotted double dashed;
}快捷设置四个边 */
/* #why{
border-top: 2px solid red;
}快捷设置一个边的所有属性 */
</style>
</head>
<body>
<h1>
<table>
<tr>
<th>
大年初一
</th>
<th>大年初二</th>
<th>大年初三</th>
<th>接下来的日子</th>
</tr>
<tr>
<td>宅在家</td>
<td>宅在家</td>
<td>宅在家</td>
<td>宅在家</td>
</tr>
</table>
</h1>
<!-- 以下用于演示css盒模型
1.盒模型用于封装html元素
2.盒模型包含外边距（margin），边框（boader），内边距（padding），内容（content）
3.使用div元素，并进行css定制-->
<h1>
<div>
为什么我寒假会这么闲呢?故事还得从一只蝙蝠说起。
<!-- 此为content -->
</div>
<p style="border-style: dotted;border-width: 2px;border-color: gold;">
<font size="4">虚线边框</font>
</p>
<p style="border-style: double;">
<font size="4">双边框</font>
</p>
<!-- 注意html很灵活，属性是可以更改添加的，注意灵活使用，还有很多，此处略 -->
<!-- 一下为单独定制边框各个边及添加背景，注意边框有简单写法，达到相同效果，注意灵活使用 -->
<p id="what">
更详细的边框定制
</p>
<p id="where">
简写style
</p>
<!-- 以下为设置轮廓线outline，类似于上面的边框 ，属性有s，c，w-->
<p style="outline: 1px solid red;">
此为轮廓里面的内容，由于设置并不突出，极其类似边框，注意轮廓可定制性低于边框
</p>
<br>
<p>
<font size="4">
margin（外边距），padding（填充）图解（来自菜鸟）：
<img src="https://www.runoob.com/wp-content/uploads/2013/08/VlwVi.png" alt="菜鸟">
<br> 注意各个边的margin都可以定制,maargin是透明的，包含top，bottom，left，right，可以使用百分比，像素，厘米值
<br>注意可简写，按照上右下左，三个值时为上左右下，两个时为上下左右，一个为全部，margin与padding设置相同
</font>
</p>
<!-- 接下来讲解尺寸，即高与宽
注意尺寸对任意内容均生效，如文本背景色，图片，设置时可用像素，百分比-->
<p>
<font size="3">
width:设置宽<br>
height：设置高<br>
max-height：设置最大高<br>
max-width：设置最大宽<br>
min-height:略<br>
min-width:略<li>
line-height：设置行高（这个有点重要）</font>
</p>
<!-- 关于内联与块 -->
<p style="line-height: 0em;">你好</p>
<p style="display: none; line-height: 0em;">
你好
<p style="line-height: 0em;">你好</p>
</p>
<p style="visibility: hidden;line-height: 0em;">你好</p>
<p style="line-height: 0em;">你好</p>
<!-- 如图可见，已使用line-height消除行高，disply用于隐藏时，不会占据空间，而visibility会占据空间 ，注意当visibility用于table中，若使用visibility：collapse时，也不会占据空间！-->
<p></p>
<!-- 通过display可对块元素和内联元素进行属性置换 -->
<h1 style="display: inline;">我想说，</h1>
<h1 style="display: inline;">好吧，我不想说</h1>
<!-- inline意思为同一水平线即内联，显然，h标签并未使其分段 -->
<span style="display: block;">我又想说</span>
<span style="display: block;">好吧，我又不想说</span>
<!-- block块，显然，span为内联还是分段了 -->
</h1>
<p>
<ul>
<strong>接下来是关于position的内容：</strong>
<li>position：static 解释：此属性下，文档按照正常格式安排文档，此时top等属性无效</li>
<li>position：fixed 解释：此属性下，文档可自由定制，但定制内容会固定在显示位置，即滚动无效</li>
<li>position：sticky 解释：此属性下，类似fixed，但内容可以滚动！只是始终在页面内，最后始终在页面最上方，好玩不？</li>
<li>position：relative 解释：此属性下，文档相对正常位置进行移动，以正负确定位置</li>
<li>position：absolute 解释：此属性下，文档相对于上一个已定位的文档进行二次定位，若无，则同relative</li>
</ul>
<a href="https://baidu.com"><img src="https://www.easyicon.net/api/resizeApi.php?id=1239128&size=48" alt="点击这里"
style="position: fixed; top: 500px;right: 50px;"></a>
<a href="https://baidu.com"><img src="https://www.easyicon.net/api/resizeApi.php?id=1239128&size=48" alt="点击这里"
style="position: fixed; top: 400px;right: 50px;z-index: -1;"></a>
<!-- 区别上下两个图片，注意看z-index（重叠元素显示优先级）的作用 -->
</p>
<!-- 略提：clip用于裁剪图片，使用唯一合法形式：clio：rect(上像素，右像素，下，左)
cursor用于更改指针，默认值为：cursor：自动
overflow用于当内容超出指定的宽和高时的处理方式，有scroll（允许滚动），hidden（隐藏溢出内容）auto（自动处理），visible（默认溢出）
-->
<p style="overflow: scroll;width: 100px;height: 200px;">
最近肺炎感染状况愈演愈烈，全国已统计的感染人数高达6000+，该病毒可能来源于中华菊头蝠，借由果子狸作为媒介，
大吃货帝国名不虚传，由于华南海鲜市场有人违法售卖野生动物，初期并不严重，但传染力很强，现在表现为：
<ul>
<li>潜伏期为3-8天，最长不超过14天</li>
<li>存在人传染现象</li>
<li>目前重灾区为武汉</li>
<li>武汉已封城，但500多万人已提前离开，剩余900多万人听从国家安排，尽可能减轻风险</li>
<li>目前仅西藏豁免此次危机，有人开玩笑：病毒有严重高原反应</li>
<li>对于那些不在意的人，我们无话可说，只能尽己所能</li>
</ul>
</p>
<!-- 由此例可知overflow里面不能附带其它元素！
overflow-x或overflow-y用于裁剪对应方位元素 -->
<p>
<!-- 元素浮动float即元素根据文本自动选择占位 -->
<img src="http://file.digitaling.com/eImg/uimages/20150824/1440412608821067.jpg" alt="图片" style="float:left;">
1、文。
汉·许慎《〈说文解字〉叙》：“盖依类象形，故谓之文；其後形声相益，即谓之字，”按，依类象形，即独体，为文；形声相益，即合体，为字。
《史记·秦始皇本纪》：“一法度衡石丈尺，车同轨，书同文字。”
南北朝《千字文》：“始制文字 ，乃服衣裳 。”
北齐·颜之推《颜氏家训·勉学》：“夫文字者，坟籍根本，世之学徒，多不晓字。”
唐·韩愈《读〈鹖冠子〉》：“文字脱谬，为之正三十有五字。”
清·陈澧《东塾读书记·小学》：“声者象乎意而宣之者也，声不能传於异地，留於异时，於是乎书之为文字。”
鲁迅《汉文学史纲要》第一篇：“要之文字成就，所当绵历岁时，且由众手，全羣共喻，乃得流行，谁为作者，殊难确指，归功一圣，亦凭臆之说也。”
2、字记录的书面语。
唐·孟郊《老恨》诗：“无子抄文字，老吟多飘零。”
元·刘祁《归潜志》卷八：“雷 则云作文字无句法，委靡不振，不足规。”
《醒世恒言·钱秀才错占凤凰俦》：“有几个考学，看了舍亲的文字，都许他京解之才。”
夏丏尊、叶圣陶《文心》三：“一篇文字的题目，往往是完篇之后才取定的。”
3、字记录词和句子。
唐·韩愈《荆潭唱和诗序》：“搜奇抉怪，雕镂文字，与韦布里闾憔悴专一之士，较其毫釐分寸。”
4、公文；案卷。
宋·范仲淹《耀州谢上表》：“今后贼界差人齎到文字，如依前僭伪，立便发遣出界，不得收接。”
《宣和遗事》前集：“有那押司宋江接了文字看了，星夜走去石碣村，报与晁盖几个。”
《秦并六国平话》卷上：“各路州县接得文字，得知韩王被虏，诸将皆亡，未免具降书投降。”
《古今小说·简帖僧巧骗皇甫妻》：“钱大尹看罢，即时教押下一箇所属去处，叫将山前行山定来。当时山定承了这件文字。”
5、奏疏或札子。
宋·朱弁《曲洧旧闻》卷八：“熙宁初议新法，中外惶骇，韩魏公有文字到朝廷，裕陵之意稍疑。”
明·冯梦龙《智囊补·上智·韩琦》：“一日，入札子，以山陵有事取覆，乞晚临，后上殿独对，谓官家不得惊，有一文字须进呈，说破只莫泄。” [1]
<!-- 可以看见图片浮动在左侧，相反，使用clear可以禁止对应方位的浮动，只是float写在img中，clear写在p或目标文字区域标签内 -->
<!-- 多个浮动元素会遵循相邻的原则
注意img也可以设置边框等
使用span内联元素加工目标文字-->
<br>
</p>
<p>
<div style="margin: auto;width:50%;border: 0em;padding: 0em;">
年后
</div>
<!-- margin：auto默认居中，必须设置width才有效，且width不能为100% ，margin：auto也可用来设置图片居中，必须在块元素中，可用display转换-->
<!-- 也可以使用定位设置位置，float只能设置左右 -->
<!-- 文本可使用text-align设置 -->
</p>
<p>
<form action="https://baidu.com">
姓：<input type="text" style="background-color:rosybrown;"><br>
名: <input type="text" style="background-color:royalblue;"><br>
<input type="submit" value="提交">
</form>
</p>
</body>
</html>
1
2
3
4
