一、颜色
有三种表示颜色的方法：英文单词、二进制颜色代表码、rgb，
二、字体
font-size：15px；设置字体大小，常用像素指定字体大小，指定长度的字号，不会随着浏览器的变化而变化
font-family：宋体；设置字体类型
font-weight：lighter、bold、bolder，设置字体粗细，常用的三种效果选择
font-style：oblique；设置字体倾斜
font-variant:small-caps；将小写字母转成大写字母；
color：设置字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exercise4</title>
<style>
#color_en{
color:blue
}
#color_bin{
color:#F0F;
}
#color_rgb{
color:rgb(255,0,255)
}
#color_pellucidity{
color:rgba(255,0,255,0.2)
}
#ablout_font{
background-color:rgba(0,255,255,0.2);
}
#font_size{
background-color:rgba(0,255,255,0.2);
font-size:15px;
}
#font_family{
background-color:rgba(0,255,255,0.2);
font-family:YouYuan;
}
#font_lighter{
background-color:rgba(0,255,255,0.2);
font-weight:lighter;
}
#font_bold{
background-color:rgba(0,255,255,0.2);
font-weight:bold;
}
#font_bolder{
background-color:rgba(0,255,255,0.2);
font-weight:bolder;
}
#font_style{
background-color:rgba(0,255,255,0.2);
font-style:oblique;
}
</style>
</head>
<body>
<p>练习属性property</p>
<p id="ablout_font">二、关于字体</p>
<p id="font_size">font-size设置字体大小，如：15px</p>
<p id="font_family">font-family设置字体类型???如：YouYuan</p>
<p id="font_weight">
font-weight设置字体粗细，如:
<a id="font_lighter">lighter</a>\
<a id="font_bold">bold</a>\
<a id="font_bolder">bolder</a>
</p>
<p id="font_style">font-style设置字体倾斜</p>
<p id="color_en">一、关于颜色</p>
<p id="color_bin">除了使用英文单词，还可以使用十六进制颜色对应表(如下图，#FFFF00表示黄色，还可简写成#FF0）
<table border="0">
<tbody>
<tr>
<td height="30" width="95" bgcolor="#ffffff">#FFFFFF</td>
<td height="30" width="95" bgcolor="#dddddd">#DDDDDD</td>
<td height="30" width="95" bgcolor="#aaaaaa">#AAAAAA</td>
<td height="30" width="95" bgcolor="#888888">#888888</td>
<td height="30" width="95" bgcolor="#666666">#666666</td>
<td height="30" width="95" bgcolor="#444444">#444444</td>
<td height="30" width="95" bgcolor="#000000">#000000</td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#ffb7dd">#FFB7DD</td>
<td height="30" width="95" bgcolor="#ff88c2">#FF88C2</td>
<td height="30" width="95" bgcolor="#ff44aa">#FF44AA </td>
<td height="30" width="95" bgcolor="#ff0088">#FF0088 </td>
<td height="30" width="95" bgcolor="#c10066">#C10066 </td>
<td height="30" width="95" bgcolor="#a20055">#A20055 </td>
<td height="30" width="95" bgcolor="#8c0044">#8C0044 </td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#ffcccc">#FFCCCC</td>
<td height="30" width="95" bgcolor="#ff8888">#FF8888</td>
<td height="30" width="95" bgcolor="#ff3333">#FF3333 </td>
<td height="30" width="95" bgcolor="#ff0000">#FF0000 </td>
<td height="30" width="95" bgcolor="#cc0000">#CC0000 </td>
<td height="30" width="95" bgcolor="#aa0000">#AA0000 </td>
<td height="30" width="95" bgcolor="#880000">#880000 </td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#ffc8b4">#FFC8B4</td>
<td height="30" width="95" bgcolor="#ffa488">#FFA488</td>
<td height="30" width="95" bgcolor="#ff7744">#FF7744 </td>
<td height="30" width="95" bgcolor="#ff5511">#FF5511 </td>
<td height="30" width="95" bgcolor="#e63f00">#E63F00 </td>
<td height="30" width="95" bgcolor="#c63300">#C63300 </td>
<td height="30" width="95" bgcolor="#a42d00">#A42D00 </td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#ffddaa">#FFDDAA</td>
<td height="30" width="95" bgcolor="#ffbb66">#FFBB66</td>
<td height="30" width="95" bgcolor="#ffaa33">#FFAA33</td>
<td height="30" width="95" bgcolor="#ff8800">#FF8800 </td>
<td height="30" width="95" bgcolor="#ee7700">#EE7700 </td>
<td height="30" width="95" bgcolor="#cc6600">#CC6600 </td>
<td height="30" width="95" bgcolor="#bb5500">#BB5500 </td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#ffee99">#FFEE99</td>
<td height="30" width="95" bgcolor="#ffdd55">#FFDD55</td>
<td height="30" width="95" bgcolor="#ffcc22">#FFCC22</td>
<td height="30" width="95" bgcolor="#ffbb00">#FFBB00 </td>
<td height="30" width="95" bgcolor="#ddaa00">#DDAA00 </td>
<td height="30" width="95" bgcolor="#aa7700">#AA7700 </td>
<td height="30" width="95" bgcolor="#886600">#886600 </td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#ffffbb">#FFFFBB</td>
<td height="30" width="95" bgcolor="#ffff77">#FFFF77</td>
<td height="30" width="95" bgcolor="#ffff33">#FFFF33</td>
<td height="30" width="95" bgcolor="#ffff00">#FFFF00</td>
<td height="30" width="95" bgcolor="#eeee00">#EEEE00</td>
<td height="30" width="95" bgcolor="#bbbb00">#BBBB00</td>
<td height="30" width="95" bgcolor="#888800">#888800</td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#eeffbb">#EEFFBB</td>
<td height="30" width="95" bgcolor="#ddff77">#DDFF77</td>
<td height="30" width="95" bgcolor="#ccff33">#CCFF33</td>
<td height="30" width="95" bgcolor="#bbff00">#BBFF00</td>
<td height="30" width="95" bgcolor="#99dd00">#99DD00</td>
<td height="30" width="95" bgcolor="#88aa00">#88AA00</td>
<td height="30" width="95" bgcolor="#668800">#668800</td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#ccff99">#CCFF99</td>
<td height="30" width="95" bgcolor="#bbff66">#BBFF66</td>
<td height="30" width="95" bgcolor="#99ff33">#99FF33</td>
<td height="30" width="95" bgcolor="#77ff00">#77FF00</td>
<td height="30" width="95" bgcolor="#66dd00">#66DD00</td>
<td height="30" width="95" bgcolor="#55aa00">#55AA00</td>
<td height="30" width="95" bgcolor="#227700">#227700</td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#99ff99">#99FF99</td>
<td height="30" width="95" bgcolor="#66ff66">#66FF66</td>
<td height="30" width="95" bgcolor="#33ff33">#33FF33</td>
<td height="30" width="95" bgcolor="#00ff00">#00FF00</td>
<td height="30" width="95" bgcolor="#00dd00">#00DD00</td>
<td height="30" width="95" bgcolor="#00aa00">#00AA00</td>
<td height="30" width="95" bgcolor="#008800">#008800</td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#bbffee">#BBFFEE</td>
<td height="30" width="95" bgcolor="#77ffcc">#77FFCC</td>
<td height="30" width="95" bgcolor="#33ffaa">#33FFAA</td>
<td height="30" width="95" bgcolor="#00ff99">#00FF99</td>
<td height="30" width="95" bgcolor="#00dd77">#00DD77</td>
<td height="30" width="95" bgcolor="#00aa55">#00AA55</td>
<td height="30" width="95" bgcolor="#008844">#008844</td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#aaffee">#AAFFEE</td>
<td height="30" width="95" bgcolor="#77ffee">#77FFEE</td>
<td height="30" width="95" bgcolor="#33ffdd">#33FFDD</td>
<td height="30" width="95" bgcolor="#00ffcc">#00FFCC</td>
<td height="30" width="95" bgcolor="#00ddaa">#00DDAA</td>
<td height="30" width="95" bgcolor="#00aa88">#00AA88</td>
<td height="30" width="95" bgcolor="#008866">#008866</td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#99ffff">#99FFFF</td>
<td height="30" width="95" bgcolor="#66ffff">#66FFFF</td>
<td height="30" width="95" bgcolor="#33ffff">#33FFFF</td>
<td height="30" width="95" bgcolor="#00ffff">#00FFFF</td>
<td height="30" width="95" bgcolor="#00dddd">#00DDDD</td>
<td height="30" width="95" bgcolor="#00aaaa">#00AAAA</td>
<td height="30" width="95" bgcolor="#008888">#008888</td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#cceeff">#CCEEFF</td>
<td height="30" width="95" bgcolor="#77ddff">#77DDFF</td>
<td height="30" width="95" bgcolor="#33ccff">#33CCFF</td>
<td height="30" width="95" bgcolor="#00bbff">#00BBFF</td>
<td height="30" width="95" bgcolor="#009fcc">#009FCC</td>
<td height="30" width="95" bgcolor="#0088a8">#0088A8</td>
<td height="30" width="95" bgcolor="#007799">#007799</td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#ccddff">#CCDDFF</td>
<td height="30" width="95" bgcolor="#99bbff">#99BBFF</td>
<td height="30" width="95" bgcolor="#5599ff">#5599FF</td>
<td height="30" width="95" bgcolor="#0066ff">#0066FF </td>
<td height="30" width="95" bgcolor="#0044bb">#0044BB </td>
<td height="30" width="95" bgcolor="#003c9d">#003C9D </td>
<td height="30" width="95" bgcolor="#003377">#003377 </td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#ccccff">#CCCCFF</td>
<td height="30" width="95" bgcolor="#9999ff">#9999FF</td>
<td height="30" width="95" bgcolor="#5555ff">#5555FF </td>
<td height="30" width="95" bgcolor="#0000ff">#0000FF </td>
<td height="30" width="95" bgcolor="#0000cc">#0000CC </td>
<td height="30" width="95" bgcolor="#0000aa">#0000AA </td>
<td height="30" width="95" bgcolor="#000088">#000088 </td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#ccbbff">#CCBBFF</td>
<td height="30" width="95" bgcolor="#9f88ff">#9F88FF</td>
<td height="30" width="95" bgcolor="#7744ff">#7744FF </td>
<td height="30" width="95" bgcolor="#5500ff">#5500FF </td>
<td height="30" width="95" bgcolor="#4400cc">#4400CC </td>
<td height="30" width="95" bgcolor="#2200aa">#2200AA </td>
<td height="30" width="95" bgcolor="#220088">#220088 </td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#d1bbff">#D1BBFF</td>
<td height="30" width="95" bgcolor="#b088ff">#B088FF</td>
<td height="30" width="95" bgcolor="#9955ff">#9955FF </td>
<td height="30" width="95" bgcolor="#7700ff">#7700FF </td>
<td height="30" width="95" bgcolor="#5500dd">#5500DD </td>
<td height="30" width="95" bgcolor="#4400b3">#4400B3 </td>
<td height="30" width="95" bgcolor="#3a0088">#3A0088 </td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#e8ccff">#E8CCFF</td>
<td height="30" width="95" bgcolor="#d28eff">#D28EFF</td>
<td height="30" width="95" bgcolor="#b94fff">#B94FFF </td>
<td height="30" width="95" bgcolor="#9900ff">#9900FF </td>
<td height="30" width="95" bgcolor="#7700bb">#7700BB </td>
<td height="30" width="95" bgcolor="#66009d">#66009D </td>
<td height="30" width="95" bgcolor="#550088">#550088 </td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#f0bbff">#F0BBFF</td>
<td height="30" width="95" bgcolor="#e377ff">#E38EFF</td>
<td height="30" width="95" bgcolor="#d93eff">#E93EFF </td>
<td height="30" width="95" bgcolor="#cc00ff">#CC00FF </td>
<td height="30" width="95" bgcolor="#a500cc">#A500CC </td>
<td height="30" width="95" bgcolor="#7a0099">#7A0099 </td>
<td height="30" width="95" bgcolor="#660077">#660077 </td>
</tr>
<tr>
<td height="30" width="95" bgcolor="#ffb3ff">#FFB3FF</td>
<td height="30" width="95" bgcolor="#ff77ff">#FF77FF</td>
<td height="30" width="95" bgcolor="#ff3eff">#FF3EFF </td>
<td height="30" width="95" bgcolor="#ff00ff">#FF0 0FF </td>
<td height="30" width="95" bgcolor="#cc00cc">#CC00CC </td>
<td height="30" width="95" bgcolor="#990099">#990099 </td>
<td height="30" width="95" bgcolor="#770077">#770077 </td>
</tr>
</tbody>
</table>
</p>
<p id="color_rgb">颜色还可以使用rgb（255,0,255）的方式</p>
<p id="color_pellucidity">使用rgba(255,0,255,0.6)最后一位设置透明度,取值0-1，</p>
</body>
</html>View Code
注意：
可使用复合属性font，设置字体相关属性值，不同属性值之间使用空格隔开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>else_test</title>
<style>
p{background-color:black;font:oblique 20px bolder;color:pink; }
</style>
</head>
<body>
<p>博客园是面向开发者的知识分享社区，不允许发布任何推广、广告、政治方面的内容。
博客园首页（即网站首页）只能发布原创的、高质量的、能让读者从中学到东西的内容。
如果博文质量不符合首页要求，会被工作人员移出首页，望理解。
如有疑问，请联系contact@cnblogs.com
</p>
</body>
</html>View Code
三、背景
background-color：rgba（255,255,255,0.15）；设置背景色，可以设置透明度，
background-image：url（image.gif）；设置背景图片，不能直接设置透明度，可以直接修图、或者修改容器的透明度，
background-repeat：no-repeat、repeat、repeat-x、repeat-y；设置背景图片是否重复排版
background-position：left、right、center、top、bottom；设置背景图片的摆放位置；
常用此属性定义抠图的位置信息，如：（0px 15px）表示x、y轴位置；
background-attachment：scroll、fixed，背景图片是否跟随浏览器滚动，
scroll背景图片跟着动、图片顶端不一定在窗口上方，fixed背景图片不跟着动，图片顶端始终都在窗口上方；
注意：
background的各属性也可以通过复合属性background进行设置，各属性值之间使用空格隔开,
四、文本
text-align：center、right、left；文本水平对齐居中、靠右、靠左，justify两端对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>else_test</title>
<style>
.C{
background-color:black;
font:oblique 20px bolder;
color:pink;
}
.D{
background-color:black;
font:oblique 20px bolder;
color:pink;
text-align:justify;
}
</style>
</head>
<body>
<p class="C">博客园是面向开发者的知识分享社区，不允许发布任何推广、广告、政治方面的内容。
博客园首页（即网站首页）只能发布原创的、高质量的、能让读者从中学到东西的内容。
如果博文质量不符合首页要求，会被工作人员移出首页，望理解。
如有疑问，请联系contact@cnblogs.com
</p>
<p class="D">博客园是面向开发者的知识分享社区，不允许发布任何推广、广告、政治方面的内容。
博客园首页（即网站首页）只能发布原创的、高质量的、能让读者从中学到东西的内容。
如果博文质量不符合首页要求，会被工作人员移出首页，望理解。
如有疑问，请联系contact@cnblogs.com
</p>
</body>
</html>View Code
vertical-align：设置垂直对平方式，不仅可以设置文本，还有其他元素，如图像
top、bottom、middle与同行元素的高、低、中对齐，text-top、text-bottom使文本与上级元素的文本上、下对齐，
还可以设置文本的上下标：sub、super，%设置图像的基线位置：整数向上调整、负数向下调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>else_test</title>
<style>
img{vertical-align:-150%;}
.exam1{vertical-align:super;}
.exam2{vertical-align:sub;}
</style>
</head>
<body>
<h2>荷花介绍</h2>
<p>
荷花if加尔文我我减肥哦一【软件覅偶名v卖狗肉耳机哦if迥然几个热歌如果后IE榻榻米个坑
<img src="1.png">
</p>
<p>djfoiewf joinfifuvno nvoei[rqq ,4 po,kwfcioruqf x34mf</p>
<HR>
<p>解放我偶尔发名片everporkv破费VB二夫人GV</p>
<p>
X<font class="exam1">1</font><font class="exam2">2</font>+
X<font class="exam2">1</font><font class="exam1">2</font>
</p>
</body>
</html>View Code
line-height：30px；行纵向高度
text-indent：20px；设置首行缩进；取负值表示凸出显示
word-spacing：20px；单词间间隙
letter-spacing：20px；字母间间隙
direction： rtl、ltr；设置文字写入方向，从左向右、从右向左，常与Unicode-bidi配合使用，
unicode-bidi指定内部双向规则是否作用，bidi-override单词本身顺序也改变、embed单词本身顺序不变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>else_test</title>
<style>
</style>
</head>
<body>
<p style="direction:rtl;unicode-bidi:bidi-override;">
hello world
<p>从右向左排版，单词本身顺序改变</p>
</p>
<p style="direction:rtl;unicode-bidi:embed">
hello world
<p>从右向左排版，单词本身顺序不变</p>
</p>
</body>
</html>View Code
writing-mode：tb-lr、lr-tb；设置文本元素的布局方式，先从左向右、在从上向下；或者先从上向下、在从右向左
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>else_test</title>
<style>
</style>
</head>
<body>
<p style="writing-mode:tb-rl;">
中科大研究生公选课《文献管理与信息分析》开课啦！作为中科大最火爆公选课（累计
选课人数最多！）和全校TOP10%课程，其同版慕课课程《文献管理与信息分析》已有超
10万人选修，80余所高校认可该课程学分，是国内影响面最广的科学素养和信息素养课
程。主讲老师的罗昭锋老师，在网易云课堂（http://study.163.com/u/science20）开
设的课程包括搜索引擎、知识管理、思维导图、文献管理、文献分析、视频编辑、科学
仪器等，累计有12万人学习，并获得五星级评价。
</p>
<p style="writing-mode:lr-tb;">
中科大研究生公选课《文献管理与信息分析》开课啦！作为中科大最火爆公选课（累计
选课人数最多！）和全校TOP10%课程，其同版慕课课程《文献管理与信息分析》已有超
10万人选修，80余所高校认可该课程学分，是国内影响面最广的科学素养和信息素养课
程。主讲老师的罗昭锋老师，在网易云课堂（http://study.163.com/u/science20）开
设的课程包括搜索引擎、知识管理、思维导图、文献管理、文献分析、视频编辑、科学
仪器等，累计有12万人学习，并获得五星级评价。
</p>
</body>
</html>View Code
text-transform：capitalize；设置首字母大写；uppercase全部大写；lowercase全部小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exercise5</title>
<style>
<!--#background{-->
<!--height:250px;-->
<!--background-color:rgba(100,100,100,0.15);-->
<!--background-image:url(image1.gif);-->
<!--background-repeat:no-repeat;-->
<!--background-position:left center;-->
<!--}-->
<!--#background{background:red url(image1.gif) no-repeat center;}-->
<!--#text{-->
<!--height:120px;-->
<!--background-color:rgba(100,100,100,0.15);-->
<!--text-align:right;-->
<!--line-height:25px;-->
<!--}-->
<!--#min-text{-->
<!--color:red;-->
<!--text-align:center;-->
<!--line-height:30px;-->
<!--background-color:pink;-->
<!--}-->
<!--#text_break{-->
<!--word-break:break-all;-->
<!--background-color:yellow;-->
<!--width:200px;-->
<!--font-size:30px;-->
<!--text-align:left;-->
<!--line-height:20px;-->
<!--text-indent:30px;-->
<!--word-spacing:20px;-->
<!--letter-spacing:10px;-->
<!--}-->
<!--#from_right{-->
<!--color:red;-->
<!--direction:rtl;-->
<!--text-transform:capitalize;-->
<!--}-->
</style>
</head>
<body>
<!--<div id="background">-->
<!--<p>这里设置背景属性，注意使用div进行分层，避免直接使用body出错;</p>-->
<!--<p>分层结构大小默认宽度，只需要设置高度即可，</p>-->
<!--<p>CSS渲染效果可以分开写，也可以写在一起用空格隔开</p>-->
<!--</div>-->
<!--<div id="text">-->
<!--<p>这里设置关于文字的排版</p>-->
<!--<p style="background-color:rgba(100,100,0,0.15);">text-align：设置文本左右对齐，水平方向上</p>-->
<!--<p style="background-color:rgba(0,0,200,0.15);">line-height：设置文本行的整体宽度，垂直方向</p>-->
<!--<p>效果可叠加；文本较多或较大时可溢出；</p>-->
<!--</div>-->
<!--<div id="min-text">-->
<!--使用line-height设置文字在一行的中间，不需要设置height-->
<!--</div>-->
<!--<p id="text_break">-->
<!--text-indent设置首行缩进;word-spacing设置单词间距；letter-spacing设置字母间距；word hello world s s s ssss-->
<!--</p>-->
<!--<div id="from_right">-->
<!--direction rtl设置单词从右向左写入,类似于右对齐<br>-->
<!--text-transform设置首字母大小写等-->
<!--</div>-->
</body>
</html>View Code
五、列表
list-style：decimal-leading-zero、disc、upper-alpha、circle；设置列表序号的形式，
list-style：none；去掉列表前的序号表示，很常用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>biankuang</title>
<style>
div{
height:100px;
width:100px;
background:url(1.png) no-repeat center;
border:5px red solid;
<!--display:none;-->
}
ul,ol{
list-style:decimal-leading-zero;
<!--list-style:disc;-->
<!--list-style:upper-alpha;-->
<!--list-style:circle;-->
<!--list-style:none;-->
}
p{
background-color:pink;
display:inline;
}
a{
background-color:yellow;
display:block;
}
</style>
</head>
<body>
<div>
border设置边框：style、color、width
</div>
<ul>
<li>列表属性</li>
<li>list-style:none,去掉前面的黑心圆</li>
<li>注释掉的内容放在后面，否则影响效果</li>
<li>222</li>
</ul>
<p>display属性：inline内联、block块级、none隐藏</p>
<a style="height:100px;width:100px;">内联标签改成块级标签</a>
<p>最常用的是display：none，轮播图，插件bxslider</p>
<p style="height:100px;width:100px;">内联标签不能设置长宽，块级标签可以设置作用范围</p>
</body>
</html>View Code
六、盒子
CSS一切皆盒子，常与div搭配使用，
通过设置div的width、height，支撑起一个盒子，可以添加背景，可以嵌套盒子
border：5px red solid；给盒子添加边框，可设置宽度、颜色和边框类型，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>else_test</title>
<style>
.c1{
height:100px;
width:100px;
border-top-style:none;
border-bottom-style:dotted;
border-left-style:dashed;
border-right-style:double;
border-top-color:red;
border-bottom-color:green;
border-left-color:yellow;
border-right-color:blue;
margin:10px;
}
.c2{
height:100px;
width:100px;
border-top-style:groove;
border-bottom-style:ridge;
border-left-style:inset;
border-right-style:outset;
border-color:pink;
border-top-width:thin;
border-bottom-width:medium;
border-left-width:thick;
border-right-width:8px;
margin:10px;
}
.c3{
height:100px;
width:100px;
border-style:solid;
border-color:pink;
border-width:6px;
margin:10px;
}
.c4{
height:100px;
width:100px;
border-top:solid red thick;
border-right:ridge pink thin;
border-bottom:ridge pink 6px;
border-left:ridge pink medium;
margin:10px;
}
.c5{
height:100px;
width:100px;
border:inset blue medium;
margin:10px;
}
</style>
</head>
<body>
<div class="c1">
<p>设计边框效果1</p>
</div>
<div class="c2">
<p>设计边框效果2</p>
</div>
<div class="c3">
<p>设计边框效果3:全体效果一致</p>
</div>
<div class="c4">
<p>设计边框效果4:使用复合属性设置各边框</p>
</div>
<div class="c5">
<p>设计边框效果5:使用复合属性设置同一边框</p>
</div>
</body>
</html>View Code
margin：10px；盒子外边距，元素与周边环境的空间；
四个边距可以分别单独设置：margin-top、margin-right、margin-bottom、margin-left，
也可以使用复合属性同一设置margin，1个值作用4个方向，2个值分别作用上下、左右；3个值作用上、左右、下，4个值作用顺序上右下左
padding：10px；盒子内边距，元素的边框与内容之间的距离
另外：
border可以用来设置表格相邻边框的合并，分别设置：border-collapse：collapse、seperate，默认separate，复合属性方式同margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>else_test</title>
<style>
.exam{
height:100px;
width:100px;
border-collapse:separate;
}
</style>
</head>
<body>
<p>border还可以用来设置表格相邻边框的合并</p>
<table border="2" align="center" bordercolor="red" class="exam">
<tr>
<td>名称</td>
<Td>价钱</Td>
</tr>
<tr>
<td>名称</td>
<Td>价钱</Td>
</tr>
<tr>
<td>名称</td>
<Td>价钱</Td>
</tr>
</table>
</body>
</html>View Code
七、float
可以使盒子脱离原来的文本流，变成一个浮动的对象，float ：left、center、right；设置浮动后的位置，
如果前一个元素也是一个浮动对象，水平紧跟浮动对象；如果不是浮动对象，垂直紧跟其后；
clear：right、left、both，消除float的影响，指明元素的某一侧不许有float对象，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box</title>
<style>
.outer{
width:400px;
height:400px;
background-color:rgba(255,100,0,0.15);
border:5px red solid;
margin:30px;
padding:100px;
}
.inner{
width:100px;
height:100px;
background-color:pink;
border:5px black solid;
padding:20px;
margin:20px;
}
.ftr{
float:left;
}
</style>
</head>
<body>
<!--<p>CSS一切皆盒子，如下重点讲述盒子模型：</p>-->
<div class="outer">
<p>盒子外边距：margin、内边距：padding，-top\bottom\left\right,</p>
<p></p>
<div class="inner">兄弟之间重叠处，以大的为主</div>
<div class="inner">父子之间，子以父为基准，调整;
body也可以进行盒子操作，html不行</div>
<div class="inner ftr">
<div>
<p style="background-color:white;">float:laft\right;离开当前文档流，下面的顶上</p>
</div>
</div>
<div class="inner ftr">
<div>
<p>如果上一个元素，是一个浮动对象，会横向紧跟浮动对象；
<br>如果是文本流中的一个元素，会垂直紧跟其后
</p>
</div>
</div>
<div class="inner ftr" style="clear:float;">
<div>
<p>clear：right/left/both，清除float影响</p>
</div>
</div>
</div>
</body>
</html>View Code
八、position
控制盒子的位置，
position:static,默认停留在原文档流处，
position:fixed，脱离文档流，在某位置不动，
position:relative,附着在文档流，相对于原位置位移：left、right、top、bottom
position:absolute,脱离文档流，相对于底层位移：left、right、top、bottom
注意：实现脱离文档流、相对于static定位，可先添加父层relative、子层absolute，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
.box1{
width:100px;
height:100px;
background:yellow;
position:fixed;
}
.box2{
width:200px;
height:100px;
background:pink;
position:static;
}
.box3{
width:100px;
height:150px;
background:blue;
position:relative;
left:100px;top:100px;
}
.box4{
width:100px;
height:150px;
background:blue;
position:absolute;
left:250px;top:50px;
}
.box5{
position:relative;
border:3px red solid;
}
.box6{
width:100px;
height:150px;
background:blue;
position:absolute;
left:250px;top:50px;
}
</style>
</head>
<body>
<div class="box1" style="color:blue;">1</div>
<div class="box2" style="color:blue;">2</div>
<div class="box3" style="color:white;">3</div>
<div class="box4" style="color:white;">4</div>
<div class="box5">
<div class="box6" style="color:white;">5\6</div>
</div>
<p>属性position，可控制盒子的位置</p>
<p>position:static,默认停留在原文档流处</p>
<p>position:fixed，脱离文档流，在某位置不动</p>
<p>position:relative,附着在文档流指定位置，相对于static的位置的位移：left、right、top、bottom</p>
<p>position:absolute,脱离文档流，指定位置，相对于底层位移：left、right、top、bottom</p>
<p>实现脱离文档流、相对于static定位，可先添加父层relative、子层absolute，</p>
</body>
</html>View Code
clip设置可视区域，从提供对象的左上角坐标开始计算的偏移值构成的一个可视区域范围，超出可视范围内容被被裁剪
如：clip：rect（auto 10px auto auto），auto表示，默认自动调整大小，此边不被裁剪，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>else_test</title>
<style>
.exam{
position:absolute;
top:150px;
left:100px;
clip:rect(auto 400px 100px auto);
}
</style>
</head>
<body>
<div class="exam">
<p>
我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
<p>
孔子为“不惑”划定了一条年岁界线：四十岁。
从“立”到“不惑”，整整花了十年，
而且是人生精力最充沛、思维最活跃的十年。
</p>
</div>
</body>
</html>View Code
另外：
属性display：inline、block、inline-block
inline：块级标签变内联标签，不使用原来的宽度、高度等信息；
block：内联标签变块级标签；
inline-block：块级标签变内联标签，使用原来的宽度、高度等信息；
层级：z-index，当一个页面有许多层的时候，设置层叠顺序，使需要显示的内容不被遮挡，
默认情况：越往后添加的层，位置越靠上 ，可通过z-index：顺序号；进行设置，如：z-index：2，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>else_test</title>
<style>
.t1{
width:40px;
position:absolute;
top:80px;
left:40px;
background-color:red;
z-index:1;
}
.t2{
width:40px;
position:absolute;
top:90px;
left:50px;
background-color:yellow;
z-index:2;
}
.t3{
width:40px;
position:absolute;
top:70px;
left:40px;
background-color:green;
z-index:3;
}
</style>
</head>
<body>
<div class="t1">
<p>飞机【偶写我们侧卧发名册肉if界面
热门容貌热快乐r个人及v哦怕么肉IPGV么
哦一么欧日干么肉IMv哦IT迷宫IT没VB皮卡</p>
</div>
<div class="t2">
<p>飞机【偶写我们侧卧发名册肉if界面
热门容貌热快乐r个人及v哦怕么肉IPGV么
哦一么欧日干么肉IMv哦IT迷宫IT没VB皮卡</p>
</div>
<div class="t3">
<p>飞机【偶写我们侧卧发名册肉if界面
热门容貌热快乐r个人及v哦怕么肉IPGV么
哦一么欧日干么肉IMv哦IT迷宫IT没VB皮卡</p>
</div>
</body>
</html>View Code
超出范围属性：除了上面的裁剪clip，还可以使用overflow设置，overflow：visible、hidden、scroll、auto，
可以统一设置，也可以分别设置overflow-x、overflow-y，值常用auto自动调整
overflow需要与指定大小的容器配合使用，指明当内容超过容器大小时，全部可见、剪切、滚动还是自动处理，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>else_test</title>
<style>
.exam{
height:50px;
width:200px;
margin:20px;
}
.c1{
color:red;
overflow:hidden;
float:right;
}
.c2{
color:pink;
overflow:scroll;
float:left;
}
.c3{
color:yellow;
overflow:visible;
clear:both;
}
.c4{
color:blue;
overflow:auto;
float:right;
}
</style>
</head>
<body>
<div class="exam c1">
<p>
我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
</div>
<div class="exam c2">
<p>
我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
</div>
<div class="exam c3">
<p>
我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
</div>
<div class="exam c4">
<p>
我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
</div>
</body>
</html>View Code
可见属性visibility，不仅适用于层级，还适用于图片元素，
hidden内容隐藏、visible内容可见，这两个属性与嵌套关系无关，不受父层影响；inherit表示子层继承父层的可见属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>else_test</title>
<style>
.f1{
border:solid pink;
visibility:visible;
}
.f2{
border:solid blue;
visibility:hidden;
}
.s1{visibility:hidden;}
.s2{visibility:visible;}
.s3{visibility:inherit;}
</style>
</head>
<body>
<div class="f1">
<p>
我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
<div class="s1">
<p>
1\我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
</div>
<div class="s2">
<p>
2\我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
</div>
<div class="s3">
<p>
3\我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
</div>
<p>
我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
</div>
</div>
<div class="f2">
<p>
我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
<div class="s1">
<p>
1\我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
</div>
<div class="s2">
<p>
2\我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
</div>
<div class="s3">
<p>
3\我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
</div>
<p>
我这一生，在摆脱种种迷惑的过程中，最艰难的，是对“名惑”的摆脱。
名，是中国古代对名誉、名声、名望、名节的简称。
但是，这个字，把千百年间无数高雅君子的脊梁压歪了。
如果能够把名看穿、看空，那么，即便被污名、毁名，
受害者也能成为一个兴致勃勃的观察者，并获得享受。
</p>
</div>
</div>
</body>
</html>View Code
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
