css属性设置方法：
方式1：在标签上设置style属性；
<div style="height:10px ; width:10px"></div>方式2:放在head里添加css模式；
<head><style>
#i1，#i2{ height:10px ; width:10px； } /*id选择器*/
.c1{ height:10px ; width:10px； } /*class选择器*/
div{ height:10px ; width:10px； } /*标签选择器*/
span div{ height:10px ; width:10px； } /*层级选择器：span下面的div属性*/
.c1[key=value]{ height:10px ; width:10px； } /*属性选择器:对选择到的标签再通过属性再进行一次筛选*/
</style></head>
注：css里面的注释方法/*被注释的内容*/方式3：引入外部link
<link rek="stylesheet" herf=“common.css”/>
单独文件common.css中定义属性；选择器的优先级：标签上的style优先；css样式写在最下面的优先级高（就近原则）；
css属性
--边框：
- -宽度、样式、颜色（boarder：1px solid red）
- -boarder-left等；
--高度：
height：48px
height：50% /*一般不需要*/
--宽度：
width：48px
width：50%
--字体：
字体大小：font-size:16px
字体加粗：font-weight：
字体颜色：color：red
--居中：
text-align:center /*水平方向根据div居中*/
line-height：48px /*垂直方向根据div居中*/
--背景色：
background-color：red；
--float：
让标签飘起来，块级标签堆叠；left、right
父亲没有被撑起来：在最末尾加style=“clear：both；”让父框变得可控；
--display：
显示格式：inline、block、inline-block、none（消失）
inline-block：具有inline默认自己有多少占多少；具有block，可以设置高度，宽度，padding，margin
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
--边距：
padding：内部边距；
margin：外部边距；margin：0 auto；
css重用：
重复的属性放在共同的样式里面；
独特的放在自己的样式里面；
自适应和改变大小变形：
左右滚动条的出现；
宽度和百分比（会随着页面的缩小出现变形--->在页面的最外层设置像素的宽度==>最外层设置绝对宽度，会自动出现滚动条）；
注意1：
窗口最外面的宽度定义为绝对宽度，里面按照百分比设置；
自适应media；
a标签在IE浏览器出现蓝色框：里面的img继承a的蓝色字体颜色，可以设置img的border为0；
form表单action、method：post和get；get以?name=输入&name=输入的格式提交；post包含请求头和请求内容；表单里面包含文件要设置enctype属性；
display块级和行级转换；
float div末尾要清除clear：both; 目的是重新掌控它里面的子模块；
margin：0 auto；
padding：自身发生变化；
position:
--fixted 固定在页面的某个位置；
--relative+absolute; <div style="position:relative"><div style="absolute"></div></div>
--opacity:透明度设置0-1
--z-index:层级顺序谁最大谁在上面;
--margin-left：-23px 左移23px；
overflow：
如果里面的图片大小大于外部div的大小则设置overflow
--hidden 隐藏
--auto 滚动条
若想全部看到：设置图片的大小
hover：
当鼠标移动到menu时调用hover属性；
#pg-header .menu :hover{background-color:blue;}
background：
--background-color：背景颜色；
--background-image：背景图片；Eg：background-image：url（'image.jpg'）;默认div大，图片重复堆叠
--background-repeat：no-repeat；或者repeat-x；repeat-y；
拿一整张图，获取图像的一部分：
--background-position： x y 等同于
--background-position-x： x
--background-position-y： y