背景相关的属性
<style>
body{
background-color: maroon;
background-image: url("../chapter2/2.jpeg");
background-repeat: no-repeat;
background-position: top;
}
</style>
background-color:背景色
background-image:设定背景图片,需要设置图片的url地址
background-repeat:图片的复制
no-repeat:不重复平铺
repeat-x: 水平方向重复平铺
repeat-y: 垂直方向重复平铺
repeat: 默认值,在水平和垂直方向重复平铺
round: 自动缩放直到适应且填充满整个容器
background-position:图片的位置
也可以将这一组属性值封装到一个属性background中,书写顺序是:
背景色:background-color
背景图片:background-image
重复方式:background-repeat
位置:background-position
使表达更加简洁:
background:grey url("../chapter2/2.jpeg") no-repeat right;
尺寸相关属性
height:高度
width:宽度
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: brown;
}
</style>
max-width: 最大的宽度
max-height:最大的高度
min-width: 最小的宽度
min-height:最小的高度
显示相关属性
隐藏元素的方法:
(1)visibility:hidden,仅仅隐藏内容,该元素所占位置依然存在;
(2)display:none,不仅隐藏内容,并且位置也消失了。
display可以设置元素的显示模式
Inline:将块级元素以内联元素形式显示,此时width和height属性无效,其空间取决于元素的内容。
inline-block:将块级元素以内联元素形式显示,同时兼具块级元素的某些特征,比如可以使用width和height设置所占位置大小。
<style type="text/css">
li{
display: inline-block;
width: 200px;
background-color: blue;
}span{
display: block;
}
</style>
也可以将内联元素以块级元素形式来显示,即display:block。