background-color:背景颜色
background-image:设定背景图片,需要设置图片的URL地址。
background-repeat:图片的复制选项
repeat:在水平和垂直两个方向上进行复制
norepeat:不复制
repeat-x:在水平方向上复制
repeat-y:在垂直方向上复制也可以将这些属性封装到一个属性background中,使代码更加简洁:
background: greenurl("../img/index.jpg") no-repeatright top;
background-color(背景色)
background-image(背景图片)
background-repeat(重复方式)
background-position(位置)
2.尺寸的相关属性:
常见的height--高度 width--宽度
而max-width表示最大宽度
max-height表示最大高度
min-width表示最小宽度
min-height表示最小高度
3.显示的相关属性
隐藏元素
方法:visibility:hidden;仅仅隐藏内容,该元素所占的位置依然存在
display:none;不仅隐藏内容,而且不占位置
例:
div{
/*visibility: hidden;*/
height: 200px;
display: none;
}
display:可以设置元素的显示模式
inline-block:将块级元素以内联元素形式显示,同时兼具块级元素的某些特征,比如可以使用width和height设置所占位置大小。
inline:将块级元素以内联元素形式显示,此时width和height属性无效,起空间取决于元素的内容。
li{
/*块级元素转换为内联元素*/
display: inline-block;
width: 200px;
background-color: red;
}
span{
/*内联元素转换为块级元素*/
display: block;
}
4.盒子模型
盒子模型可以理解为一个大盒子里面放着一个小盒子,而小盒子又不是紧贴着大盒子,之间保留着一些距离。
margin:外边距
margin-top、margin-right、margin-bottom、margin-left 分别为上、右、下、左的边距表示
使用方式:
margin:30px;表示上下左右外边距都是30px;
margin-left:30px;单独设置上下左右外边距;
而同时,四种边距也可以简写:margin: 10px 20px30px 40px;
内边距:padding;和margin类似
border:边框
broder-width:边框宽度
broder-style:边框线条类型
broder-color:边框的颜色
outline-轮廓线。用法同border
border: 4px dashedblue;