一、页面布局
1.div盒子
盒子模型，定义页面某一块区域范围
<div></div>,块级标签
与table表格布局：整齐，规则，需要行和列组成，布局死板
2.css内部样式
样式设置方式：
1)内联样式，行式样式
写在标签内，通过style来定义样式
<div style="width: 1000px;height: 500px;background: mediumturquoise;">
</div>
2)内部样式
写在<style></style>标签中，<style>标签定义样式
需要样式选择器 选择body中的标签
样式选择器类型：
A.通配符选择器：定义页面中的所有标签
*表示所有标签
*{ 样式属性：属性值.....}
Eg：/*通配符:一般清楚margin和padding的值*/
*{color: #FB00AB;margin: 0;padding: 0; font-family: 宋体;}
B.标签选择器：通过标签来定义所有此标签样式
ul{width: 600px; height: 100px; background-color:snow;}
li{font-family: 微软雅黑;}
C.类选择器：通过class定义类名，通过类名定义样式
<标签 class=”类名”></标签>
.类名{属性：值；}
前缀：.点
Eg：
<li class="c1">类选择器</li>
/*类*/
.c1{color: #086FF9;}
Eg：
<li class="c1">类选择器</li>
<li class="c2">先定义类名，通过类名来定义样式</li>
<li class="c1 c2">类选择器组合使用</li>
/*标签中必须满足有两个类选择器，才有样式效果*/
D.id 选择器;通过id属性定义id名，通过id名定义样式
Id 前缀是#
<标签 id=”名字”>
#id 名字{属性，值}
Id选择器的名字是唯一的，不能重复
<li id="d1" class="c1 c2">
/*id*/
#d1{color: #807e05;}
E.分组选择器：同时定义多个选择器
选择器1，选择器2，选择器
#id1,id2,.c1{样式}
.c2,#d1{border: #308003 dashed 1px;}
F.派生选择器：指派标签中，需要定义的标签的样式
父级标签 标签{属性：值}
Div li{属性：值}
div p{
width: 100px;
height: 100px;
border: #0e8020 1px solid;
}
G.伪类选择器：定义样式的效果
样式效果：hover 鼠标悬停 ,focus 点击获取焦点等...
选择器：效果{样式}
比如：hover
#d1:hover{ }--当鼠标悬停到#d1标签上，定义#d1的样式
#d1:hover{
font-size: 50px;
}
3）优先级
样式重复，需要考虑优先级问题
注意：样式重复，优先级：通配符<标签<类<id<内联样式
派生选择器：
父级选择器 子级选择器{样式}
父级选择器 选择器{样式}
#d1 a{
font-size: 30px;
}
/*使用派生选择器，优先级 要注意添加父级选择器，不然没有优先级效果*/
#d1 .ca{
font-size: 50px;
}
<div id="d1">
<a id="da" class="ca" href="javascript:;">超链接</a>
</div>
3.外部样式
写css样式文件中，在html文件中通过link标签引入
创建css文件
通过link引入css
<link href="css02.css" rel="stylesheet" type="text/css">
Href：引入文件的路径
Type：引入文件的类型
Rel：引入文件与文件的关系
Stylesheet：级联样式表
text/css：文本样式类型
3.在css样式文件中通过选择器定义样式
<link href="../image.png" rel="icon">
Icon：关系是标题小图片
二、盒子模型设置距离
1.padding
在标签中，设置内容与标签边框的距离
距离边框的方向：top,bottom,left,right;
Padding-方向：距离；设置距离方向的距离
Padding:值1;内边距距离四个方向是值1的距离
Padding:值1 值2；上下方向是值1，左右方向是值2
Padding:值1 值2 值3；上方向是值1，左右方向是值2，下方向是值3
Padding:值1 值2 值3 值4；四个方向分别对应：上右下左
注意：使用内边距padding，标签范围会变大，注意页面布局
2.margin
外边距的外边距离，本标签与其他标签的距离
可设置边框的方向：top,bottom,left,right;
三、定位
Position:标签的位置属性
属性值：static(默认),relative,absolute,fixed
1.static(默认)：默认定位，静态定位；系统自动生成
2.relative;相对定位:相对于标签的原位置的左上角(0,0)进行定位
与定位的方向:top,bottom,left,right 结合使用.
(1)相当于标签原位置的左上角进行定位
(2)保留标签原位置
3.absolute;绝对定位
(1)以页面body标签的左上角来定位
(2)当父标签的position不是static，以父标签进行定位
(3)不保留原位置
4.fixed 固定定位，确定定位
(1)以整个页面整体进行定位
(2)不会随着滚动条滚动发生位置变化，固定在页面上
(3)不保留位置
隐藏,溢出 属性
隐藏:display(不保留位置的隐藏) 和 visibility（保留位置的隐藏）display：none隐藏/block 显现
Visibility:hidden 隐藏/visible 显现
溢出:overflow；标签中的内容超出了标签范围默认是可见
overflow:
Hidden溢出内容隐藏/visibility溢出内容显示/scroll滚动方式查看
层级：z-index
处理标签显示，覆盖优先级
z-index的值越大，层级越高
z-index:正整数
其他常用属性设置
1.边框
Border:颜色 大小 样式；
边框占用 px位置空间
Border:red 1px solid;
Solid:实线
Dashed:虚线
Boder-radius:大小值；设置标签中边框四个角的弧度，圆角
Border-top-left-radius:设置左上角的弧度
Border-bottom-right-radius:设置右下角的弧度
2.轮廓
Outline:颜色 大小 样式；与边框设置是一致
与边框是一致，区别:轮廓不占空间，边框占空间