HTML_05__css_li标签边框_背景属性

背景属性
background-color:red;
background-image:url(图片地址);
background-repeat:no-repeat;//repeat-x;repeat-y;repeat是否平铺
background-positon:left ;//right center top center bottom展开方式
background-position:left top;
background-position:0px 0px;
background-attachment:fixed;//背景固定
简写
background:背景颜色 背景图片 是否平铺 (附件通常仅用body标签 ) 水平 垂直

注意:水平和垂直不可以颠倒 其他可以


列表
去掉前面的项目符号
list-style-type:none;
list-style:none;
list-style-image:url(地址图片);

边框线
注意:html的都可以添加
border-top-width:粗细;
border-top-color: 颜色;
border-top-style:solid ;//实线 dashed虚线 dotted点
简写
border-top:粗细 类型 颜色;

bottom
left
right








使用rules="all" 表格<table>的属性合并表格的边框线
css的效果 border-collapse:collapse;//合并表格的边框线


盒子模型

内边距padding:内容和边框的距离

padding-top:
padding-right:
padding-bottom:
padding-left:


简写
padding:10px 22px 23 px 23px;
padding: 上 右 下 左;

padding:10px 22px 23px;
padding:上 左右 下;

padding:10px 22px ;
padding: 上下 左右;

padding:10px ;
padding:上右下左;



外边距margin:边框以外的距离
(详情可以参考padding同理)


margin-top:
margin-right:
margin-bottom:
margin-left:

简写

详情可以参考padding同理




浮动:float
float:left;
float:right;
特点:
设置浮动的元素 不占空间
设置浮动之后一定是块元素
设置浮动的元素层级高于普通元素

横排就要设置浮动//li标签可以考虑 浮动

margin 居中
水平居中 margin:0 auto;

margin-left:auto;
margin-right:auto;


*{margin:0;
padding:0;
}//初始化























posted @ 2016-10-22 23:18  孙中明  阅读(177)  评论(0编辑  收藏  举报