一、背景相关属性
Background-color:背景颜色 Background-image:背景图片
Background-repeat:图片复制选项(repeat在水平,垂直两个方向上复制
Repeat-x/y:在水平/垂直方向上进行复制)(no-repeat:不复制) Background-position:图片位置 上top、下 bottom、左 left 、右 right
简写:将所有元素放在一起 有顺序要求:背景颜色>背景图片>重复方式>所在位置
Background:url(‘img/bg.jpg’) blue repeat-x right;
二、尺寸相关属性
(1) 固定高度与宽度(height:200)
(2) 自适应高度(高度会根据内容的增加而增加)
(3) 指定最大高度max-height(内容增加到指定高度的时候就不会再增加)
(4) 指定最小高度min-height(开始时高度固定,内容增加到一定地步时开始增加高度)
三、显示相关属性
(1)visibility:hidden 仅仅隐藏内容,该元素所在位置依然存在(2)display:none 不仅隐藏内容,而且隐藏位置 display:inline 将块级元素以内联元素的形式显示,此时宽、高等属性对其无效
display:inline-block 将块级元素以内联元素形式显示并且具有块级元素的特征,宽高属性依然有效 display:block
将内联元素以块级元素的形式展现
四、盒子模型
1.margin:外边距
margin-top(上)margin-bottom(下)margin-left(左)margin-right(右) 使用方式:
(1) margin:30px,表示上下左右外边距都是30px
(2) margin-left:30px,表示距离左方30px
(3) margin:10px 20px 30px 40px,分别表示上右下左的外边距;按顺时针方向
(4) margin:20px 30px,表示上下20px,左右30px
2.padding:内边距
用法与margin类似
3.border:边框
border-width: 边框宽度;
border-style: 边框线条类型;
border-color: 边框的颜色;
也可以使用更优化的书写方式 border:10px dashed blue;
4.outline:轮廓线,
用法同border
注意:如果想让两个盒子在一行内,那么这两个盒子都要浮动(float)并且给他们的父类清除浮动(overflow:hidden)
.box{
overflow: hidden;
}
.div1{
float: left;
width: 200px;
height: 100px;
font-size: 50px;
color: dodgerblue;
}
.div2{
float: right;
width: 200px;
height: 100px;
color: white;
text-align: center;
font-size: 50px;
font-family: "楷体";
background-color: black;
border: 1px dodgerblue solid;
}
<div class="box">
<div class="div1">web1班</div>
<div class="div2">我们最棒</div>
</div>