CSS背景、尺寸、盒子模型

1、背景相关属性

background-color：背景色

background-image：设定背景图片，需要设置图片的URL地址

background-repeat：图片的复制选项

repeat：在水平和垂直两个方向上进行复制

no-repeat：不复制

repeat-x：在垂直水平方向上复制

repeat-y：在垂直方向上复制

 

也可以将这一组属性值封装到一个属性background中，表达更加简洁，书写顺序是：背景色background-color

     背景图片 background-image

     重复方式 background-repeat

     位置 background-position

2、尺寸相关属性

height：高度

width：宽度

max-width：最大宽度

max-height:最大高度

min-width：最小宽度

min-height:最小高度

3、显示相关属性

隐藏元素的方法：

（1）   visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在

（2）   display：none，不仅隐藏内容，且不占位置

 display可以设置元素的显示模式

inline：将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容。

inline-block：将会计元素以内联元素形式显示，同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置大小。

4、盒子模型

margin：外边距

margin-top、margin-right、margin-bottom、margin-left、

使用方式

（1）   margin：30px；表示上下左右外边距都为30px

            margin-top： 单独设置上外边距

            margin： 可分别设置上右下左四个边距 

（2）padding:内边距

（3）border：边框

          border-width：边框宽度

         border-style:边框线条类型

         border-color：边框的颜色

更优化的书写方式：

border：px dashed blue；

outline：轮廓线