CSS学习

• css是层叠样式表。使用方法在头标签里<link rel="stylesheet" href="./css/index.css">
• css选择器
  1.标签选择器p{color:red}
  2.ID选择器，需先在html里面把标签设置id="xxid名"，然后css里#xxid名 {color:red}
  3.类选择器，需先在html里面把标签设置类class="xx类名"，css里.xx类名 {color:red}，类名不要用数字开头
  4.后代选择器。css例子div ul
  5.儿子选择器。css例子div>ul
  6.默认选择器，* {color:red}，这样是全部选中
  7.伪类：例如超链接的访问状态，a:link,a:visited,a:hover,a:active,a:focus
• css选择器的优先级，在html直接设置最优先，然后文件引用顺序。ID>类>元素
• css字体属性，一般在body标签里font-family，这是一个字体集合，按顺序查找

body{
	font-family:"Microsoft YaHei","微软雅黑","HeitiSC"
	font-size:30px;
	font-weight:
	color:
	text-align:
	text-decoration:
	text-indent:
	width:
	heigth:
	background-color:
	background-image:
	background-repeat:no-repeat;
	background-position:0px 20px;
	background-attachment:fixed;
	border-width:
	border-style:
	border-color:
	border-radius:
	display:
	overflow:
}

text-indent是首行缩进
text-decoration字体装饰
font-weight字体粗细
background-repeat:背景图是否重复
background-position:背景图片的定位，用于雪碧图定位小图标，制作时，前面repeat一定是no
background-attachment:fixed;背景图片会固定在浏览器
border-radius:边框圆角，边框是可以分别设置上下左右的
display:显示属性，none，block，inline，inline-block，再次强调块级标签是可以设置宽和高，
行内标签高和宽是根据内容展示的，如果有必要可以把行内设置为块
overflow:当标签内的内容超出标签范围的时候，比如div高度和宽度的时候，处理方式，常用hidden

• 盒子模型，从内到外，contetnt内容，padding内填充，border边框，margin外边框
• 浮动 常用来布局float:left,right,浮动会造成塌陷

 <div>
        <div style="float: left">
            11111111
        </div>
        <div style="float: left">
            22222222
        </div>
</div>

上面代码就是：子元素浮动，最外层的div就会塌陷掉，要解决该问题，业界通常做法是在最外层的
div中把他归属于clearfix类，这个类写法如下(固定格式)：
.clearfix:after{
		content: "";
		display: block;
		clear: both               这个类的左右都没有浮动的元素，就等于自己是一行了是一个整体
}

• z-index

定位 position
			1. static(默认)
			2. relative(相对定位 --> 相当于原来的位置)
			3. absolute(绝对定位 -->相当对于定位过的前辈标签)
			4. fixed (固定 --> 返回顶部按钮示例)

z-index要生效有2个前提条件
1. 数值越大,越靠近你
2. 只能作用于定位过的元素，就是要有position属性

常用于模态框
<div class="cover"></div>
.cover{
		position:absolute;
		top:0;
		bottom:0;
		left:0:
		right:0;
		color:
		z-index:998;
}
<div class="model"></div>
.model{
		position:fixed;
		top:50%;
		left:50%:
		color:
		z-index:1000;
		margin-top:负数的一半的自身高度;
		margin-left:负数的一半的自身宽度;
}