样式重置
/*写css之前必须进行样式重置*/
*{
margin:0;
padding:0;
}
盒子模型的传参
margin:10px;//给一个参数 四个方向都会设置值
margin:10px 20px;//给两个参数 第一个top,bottom 第二个right,left
margin:10px 20px 30px;//第一个top 第二个right,left 第三个bottom
margin:10px 20px 30px 40px;//top right bottom left
html标签分类
块标签 ：独占一行、能够设置width，height
div、h1~h6、p、ul、li、dl、dt、dd
内联标签 :并排显示、不能设置宽和高、不能设置margin-top与margin-bottom
a、span、em、strong
内联块：并排显示、能够设置width、height
img、input、button
标签分类的原理
div{
diaplay:block;//底层属性，写不写都有
}
span{
display:inline;//底层属性，写不写都有
}
img{
width:100px;
margin-left:inline-block;//底层属性，写不写都有
}
标签之间的display属性是可以相互转换的
水平居中
让内联元素和内联块元素水平居中
1.改变元素自身的display属性 display:blcok; margin-left:auto; margin-right:auto;
2.给他爹text-align:centenr;
css选择器
后代选择器
.parent>p{
color:red;
}
选中全部的后代
.parent p{
background-color:green;
}
分组选择器//以逗号隔开
div,p,.one{
color:red;
}
伪类选择器
p:hover{
background-color:#eee;
}
选择器的优先级排序
id>class>元素选择器
选择器的权重
嵌套的越深，权重越高
.child{
color:red;
}
.parent .child{
color:green;
}
*************************
<div class="parent">
<div class="child">hh</div>
</div>
背景
背景重复
background-repeat:no-repeat;
背景位置
background-position:center;
background:red url(***) no-repeat center;//颜色 图片 重复 位置
文本
文本修饰
text-decoration:none;
文本缩进
text-indent:40px; //lorem可快速写一段话
颜色
color:red/#fff/rgb(71,196,121)
字体
font-family: //可设置多种字体，以便浏览器不支持某种时有后补
font-style:italic;//斜体
font-weight:900;//字体宽度
列表
list-style:none;
css的继承
子元素不设置width，它会继承父元素的width（仅仅发生在块元素之间）
父元素不设置height，它会继承子元素的height（仅仅发生在块元素之间）
