首先我们说一下各种属性：
1.水平对齐方式属性：
left:把文本排列在左边。默认值：由浏览器决定
right：把文本排列在右边
center:把文本排在中间
justify:实现两端对齐文本效果
2.用于调图标的属性
font family:调节字体
font weight:调节粗细
font size:调节字体大小 lighter/bold/border/
text indent:首行缩进
font-stye:italic 文字样式
lettrt-spacing：字母间距
word-spacing:单词间距
line-height:文本行高
vertical-align:设置元素内容的垂直对齐方式，只对行内元素有效，对块级元素无效
text-decoration:none :用来删除文本的下划线
text-transform: 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大
3.背景属性：
background-color +颜色就行
background-image+url（"图片路径"）
这两个只能选一个用 background repeat :重复方式 background no repeat:不重复
background-position ： center 背景图片的位置 居中
如果显示窗口小于背景图片那就只显示一部分，比如老师课堂讲的小黄人的例子，这个后面在html 中我会举这个例子。
话说上面这四个可以简写成一句： background:red ulr("图片路径") no-repeat right top;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.smallPeopleyellow{
vertical-align: -20px;
}
.btn{
text-decoration: none;
}
/*利用了后代选择器*/
.handler li .btn{
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<div class="c1">
<div>风景<img src="4.jpg " style="width: 30px ; height: 30px"></div>
</div>
<ul class="handler">
<li><a href="" class="btn">click</a></li>
<li><a href="" class="btn">click</a></li>
<li><a href="" class="btn">click</a></li>
</ul>
</body>
</html>
小黄人例子
4.边框属性：
border-width:设置边框的宽度
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
只有当这个值不是 none 时边框才可能出现。
5.列表属性：
list-style-type:设置列表项标志的类型
list-style-image:将图像设置为列表项标志
list-style-position:设置列表中的列表项的位置
list-style:简写属性，用于把所有用于列表的属性设置于一个声明中
6.diaplay属性
none: 隐藏某标签
block： 将内联标签设置为块级标签 注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
inline： 将块级标签设置为内联的标签 inline-block 可做列表布局
这边咱们再说一下：display:none和visibility:hidden的区别：
visibility:hidden： 可以隐藏某元素，但是就算是隐藏了可是他的空间还是要占用，而且并没有缩小，和隐藏前的一样，影响布局
display:none： 可以隐藏某个元素。并且隐藏了以后就不会占用任何空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
background-color:deepskyblue ;
display:inline;
}
span{
display: block;
width: 200px;
height: 200px;
background-color: lawngreen;
display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 100px;
border-right: solid red 2px;
}
ul{‘‘
padding: 0;
}
ul li{
list-style:none;
}
</style>
</head>
<body>
</body>
<div class="c1"></div>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
</html>
border属性
7.外边距（margine）和内边距（padding）
也就是我们这几天一直在讲的盒子模型
margine：用于控制元素与元素之间的距离； margine的最基本用途就是控制元素周围空间的间隙， 从视觉上达到互相隔开的目的
padding：用于控制内容与边框之间的距离;
border: 围绕在内边距和内容外的边框；
content: 盒子的内容，显示文本和图像
8.margine（外边距）
margine-top: 距顶端的距离
margine-bottom：距低端的距离
margine-left： 距左边的距离
margine-right: 距右边的距离
简写的格式： margine：10px 20px 20px 10px;
上边距 右边距 下边距 左边距
margine：10px 20px 10px;
上边距 左右边距 下边距
margine：10px 20px
上下边距 左右边距
margin: 20px
上下左右都是25px
margine：0 auto； 居中应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*.c1{*/
/*width: 200px;*/
/*height: 200px;*/
/*background-color: royalblue;*/
/*padding: 50px;*/
/*!*padding: 50px 20px 10px 10px;*!*/
/*border: 5px solid red;*/
/*!*margin-bottom: 20px;*!*/
/*}*/
/*.c2{*/
/*width: 200px;*/
/*height: 200px;*/
/*background-color: gold;*/
/*padding: 50px;*/
/*!*padding: 50px 20px 10px 10px;*!*/
/*border: 5px solid red;*/
/*margin-top: 20px;*/
/*}*/
/*.s1{*/
/*background-color: rebeccapurple;*/
/*padding: 10px;*/
/*margin-right: 100px;*/
/*margin-left: 50px;*/
/*}*/
/*.s2{*/
/*background-color: green;*/
/*padding: 10px;*/
/*margin-left: 20px;*/
/*}*/
/*margin 的居中操作*/
.c3{
width: 80%;
height: 300px;
background-color: gray;
margin: 100px auto;
}
</style>
</head>
<body>
<!--<div class="c1">DIV</div>-->
<!--<div class="c2">DIV</div>-->
<!--<span class="s1">span1</span>-->
<!--<span class="s2">span2</span>-->
<div class="c3"></div>
</body>
</html>
内外边距
9. margine collapse(边界的塌陷或说边界的重叠)
1.兄弟的div:
上面的margine-bottom和下面的margine-top会塌陷，也就是会 取上下两者margine里面最大值作为显示值
2.父子div：
if 父级中没有border,padding,inlinecontent，子级的margine会一直向上找直到找到某个标签包括border padding inline content中的其中一个，然后按照div进行margine
解决边界塌陷的问题:overflow:hidden 他会把溢出的都隐藏起来，弄了半天，反正当你遇到边界塌陷问题 就用overflow：hidden
10.overflow
scroll：溢出就会出一个滚动条
auto： 溢出就会出一个滚动条
hidden:溢出则隐藏
inherit
visible
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="c1">
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
</div>
</body>
</html>
11.padding(内边距)
单独使用填充属性可以改变上下左右的填充，缩写填充也可以使用，一旦改变一切都改变 设置同margine
12.float属性
a.基本浮动规则：
block元素和inline元素在文档流中的排列方式。
block就是块级标签，独占一行,多个block都是自己另起一行，默认block元素会 填满其父元素的宽度，他可以设置:width、margin、padding属性
inline不会独占一行，多个行内元素会排列在同一行，直到一行元素排不下，才会换新一行，宽度随元素的内容而变化,inline元素设置width、heigth无效
b.常见的块级元素：
div form table p pre hi~h5 dl ol ul等等
c.常见的内联元素：
span a strong en lable input select textatea img br等
文档流：元素排版布局过程中，元素会自动从左往右，从上往下的流式排列
脱离文档流：将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当作脱离文档 流的元素不存在而进行定位。
d.非完全脱离文档流 左右结构div盒子重叠现象，一般由于相邻两个div一个使用浮动而一个没有使用浮动
这样会导致div不在同一个平面上，但是内容不会造成覆盖现象，只有div形成覆盖现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: green;
width: 200px;
height: 200px;
float: left;
}
.c2{
background-color: wheat;
width: 400px;
height: 100px;
float: left;
}
.c3{
background-color: royalblue;
width: 100px;
height: 300px;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>
13.清除浮动
clear语法：
取值：
none：默认值，允许两边都可以有浮动对象
left:不允许左边有浮动现象
right:不允许右边有浮动现象
both:不允许有浮动对象
注意：clear属性只会对自身起作用，而不会影响其他元素
把握住两点：1.元素从上到下，从左到有一次加载
2.clear left对自身起作用，一旦左边有浮动，就切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题
清除浮动
14.position（定位）
static:默认值，无定位，不能当作绝对的参照物，并且设置标签对象的left top等值是不起作用的
relative:相对定位，参照物是自己，不会脱离文档流，可以使用top left解决定位
absoulte:脱离了文档流，按照已定位的父级定位，没有的话直接以border定位。
fixed：完全脱离文档流固定定位
15.选择器的优先级
！important（非规则的）最高
在规则内：
内嵌---》id---》class---》element
如果优先级一样，按加载顺序，谁先救谁执行
16.伪类
a:link（没有接触过的链接）,用于定义了链接的常规状态。 也就是例子中的未点击状态
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。 例子中的悬浮在上面时的状态
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。 点击时的状态
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。点击之后的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*!*#a1:link{*! 未点击状态*/
/*color: darkorange;*/
/*}*/
/*!*#a1:hover{*! 悬浮时*/
/*color: green;*/
/*}*/
/*!*#a1:active{*! 点击*/
/*color: red;*/
/*}*/
/*!*#a1:visited{*! 点击之后的颜色*/
/*color:violet;*/
/*}*/
/*可以给他设长宽是因为它是块级标签，就是下面的这一种情况*/
.c1{
width: 300px;
height:200px;
background-color: green;
}
/*设置c1悬浮时的样式*/
.c1:hover{
background-color: red;
}
/*不能给span做长宽，因为他是内联标签，但是可以给他设置背景*/
span {
background-color: crimson;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<a href="" id="a1">hellocss</a>
<div class="c1"></div>
<span>span</span>
</body>
</html>
伪类
17.brfore after伪类:
p:before 在每个<p>元素之前插入内容
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个<p>元素之后插入内容
p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*.inner1,.inner2{*/
/*width: 200px;*/
/*height: 200px;*/
/*border: blue;*/
/*}*/
/*!*块级独占一行*!*/
/*.inner1{*/
/*background-color: crimson;*/
/*}*/
/*.inner2{*/
/*background-color: yellow;*/
/*}*/
/*.outer{*/
/*border: 2px solid red;*/
/*width: 100%;*/
/*height: 400px;*/
/*background-color: darkorange;*/
/*}*/
/*!*注意这里hover后面有个空格，然后才是.inner1，没有为什么，因为不这样写就会错，这就是hover这个伪类*!*/
/*.outer:hover .inner1{*/
/*background:darkkhaki;*/
/*}*/
/*接下来我们来看一下before和after这个伪类*/
/*为了某种布局效果我们自己就加一个伪类*/
.c3:after{
content: "hello";
color: red;
}
</style>
</head>
<body>
<!--<div class="outer">-->
<!--<div class="inner1"></div>-->
<!--<div class="inner2"></div>-->
<!--</div>-->
<div class="c3">
div
</div>
</body>
</html>
18.inline-block 的间隙，正好也是我迷茫的一个地方
inline-block默认的空格符就是标签与标签之间的空隙造成的。
(1) 我们可以通过margin:-3px来解决，但是
1.我们布局肯定很多元素，不可能每个都添加margin负这样维护成本太大了
2.我们线上代码如果压缩，那么我们就不存在哪个4px的问题了，那么我们的margin负就回造成布局混乱！
(2)我们可以给几个标签加一个父级div，然后
div{word-spacing: -5px;}
19.后台管理布局
个人认为这个就是用来调节页面布局的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
a{
text-decoration: none;
}
.header{
width: 100%;
height: 44px;
background-color: #2459a2;
}
.leftmenu{
width: 250px;
background-color:#ededed;
border: 1px solid red;
position: fixed;
top: 44px;
left: 0;
bottom: 0;
}
.Con{
/*margin-left: 30px;*/
position: fixed;
top:44px;
left: 250px;
right: 0;
bottom: 0;
background-color: wheat;
overflow: auto;
}
.leftmenu .title{
list-style: none;
}
.leftmenu .title a{
font-size: 16px;
color: white;
/*display: inline-block;*/
/*float: left;*/
}
.title li{
width: 160px;
height: 30px;
background-color: grey;
text-align: center;
padding: 5px 30px;
margin-top: 20px;
line-height: 30px;
}
.Con h1{
margin-left: 30px;
}
.leftmenu ul{
width: 100%;
padding: 0;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="leftmenu">
<ul class="title">
<li><a href="">菜单一</a></li>
<li><a href="">菜单二</a></li>
<li><a href="">菜单三</a></li>
</ul>
</div>
<div class="Con">
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
<h1>yuan</h1>
</div>
</div>
</body>
</html>
20.流程控制语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// if else if ... else
/*
var num=76;
if (num>90){
alert("优秀")
}
else if (num>80){
alert("凑合")
}
else {
alert("挺好的！")
}
*/
// switch-case语句
/*
var x=15;
switch (x){
case 1:alert("星期一");break;
case 2:alert("星期2");break;
case 3:alert("星期3");break;
case 4:alert("星期4");break;
case 5:alert("星期5");break;
case 6:alert("星期6");break;
default:alert("日");
}
*/
// 循环 for while
// for 条件循环（推荐使用）
for (var i=0;i<100;i++){
console.log(i)
}
// ==================
var arr=[11,44,"hello",true];
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
遍历for循环
for(var i in arr){
console.log(i);
console.log(arr[i])
}
// while 循环
var count=0;
while (count<100){
console.log(count);
count++;
}
</script>
</head>
<body>
</body>
</html>
21.选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/*color: green;*/
/*}*/
/*id优先级最高*/
/*#s1{*/
/*color: darkorange;*/
/*}*/
/*.c1{*/
/*color: lightpink;*/
/*}*/
/*优先级是这样的比如 id 是100 class是10 element是1，所以id的优先级最高*/
.c2 .c3 div{
color: red;
}
.c2 .c4{
color: green;
}
.c3 span{
color: black !important; 非规则的，比内嵌的还高
}
#s4{
color: yellow;
}
.c2 span{
color: darkkhaki;
}
.c3 span{
color: blue;
}
</style>
</head>
<body>
<DIV>div</DIV>
<p class="c1" id="s1">PPP</p>
<div class="c2" id="s2">
<div class="c3" id="s3">
<!--<div class="c4" id="s4">0000</div>-->
<span class="c4" id="s4" style="color:firebrick;">0000</span> 这是内嵌式，比id的优先级还高
</div>
<p>PPP</p>
</div>
</body>
</html>
选择优先级!important(非规则的)最高
在规则内：
内嵌>id>class>element
如果优先级一样,按加载顺序，谁先就谁执行