前端学习--Day05

一、背景相关属性

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>