HTML基础复习4

CSS的应用

模块的边框

设置边框样式

border-style:：如果是一个值那么表示四个边的样式都一样；如果是两个值那么第一个值代表上下，第二个值代表左右；如果是三个值，第一个值代表上，第二个值代表左右，第三个值代表下；如果是四个值，按顺序代表上、右、下、左，none表示没有边框

dashed：虚线边框

double：双实线边框

solid：实线

dotted：小虚线

也可以单独设置一条到四条边框：border-right-style:设置右边框的样式\

调整边框的粗细

border-width:后面可以跟四个值，顺序和border-style:一致

设置边框的颜色

border-color:后面可以跟四个值，顺序如上

也可以单独设置一条到四条边框的颜色：border-right-color:设置右边框的颜色

border:1px solid yellow;设置边框粗细样式和颜色

border-collapse:collapse;设置表格内相邻边框是否合并（默认不合并，collapse是合并）

模块的边距

使用在块级元素上才有效果

margin-left:左外边距

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin:后面可以跟四个值

padding:内容距离容器的边距 用了padding会使容器增大 上下左右各增加padding的值得大小

DIV（层）的应用

DIV的应用+CSS 用在布局上，比Table布局更有优势，代码量减少并且方便维护

DIV是一个块级元素，多个DIV默认垂直摆放，如果想让这些块级元素水平摆放，使用float:left;

clear:left;清除左浮动

clear:both;清除左右浮动

clear:right;清除右浮动

要最外层box上方与浏览器无缝隙，在CSS中使用margin:0px;``padding:0px;

层的定位

1. 相对定位：以当前这个层所在的位置为基准进行定位

position: relative;
top:50px;
left:50px;
right: ;
botton: ;

1. 绝对定位：如果父容器有定位，那么该层会以父容器为基准，如果父容器没有定位，那么该层以网页为基准

position:absolute;
top:50px;
left:50px;
right: ;
botton: ;

z-index:数字越大，层的位置就越上层

overflow:hidden;层中溢出的内容隐藏 scroll;层中会有滚动条

设置鼠标指针

cursor: ;

菜单设置

菜单用无序列表

将无序列表的垂直排列改为水平排列使用浮动：float:left;

把行内元素转化为块级元素：display:block;