CSS 颜色、背景属性及盒子模型的基础知识

颜色

RGB（red green blue）（0，10，256）

#0010FF

CSS中颜色的表示方法

1. 预定义颜色：blue ，red，black
2. 十六进制颜色：#ofofof
3. RGB颜色（128,0,0）全红
4. RGBA，在RGB的基础上又添加了表示透明度的Alpha
5. HIS:用色度，饱和度，和透明度三个分量来表示颜色
6. HSLA：在HIS的基础上又添加了表示透明度的Alpha

代码实现：

<p style="color: #0000FF;">预定义颜色</p>

<p style="color: rgb(300,255,0);">RGB颜色</p>

<p style="color: #FF0000;">16进制颜色</p>

 

 

背景相关属性

 

Background-color：背景颜色

Background-image：背景图片

Background-repeat：图片复制选项（repeat在水平，垂直两个方向复制）

                                （repeat-x/y 在水平/垂直方向复制）

                                （no-repeat 不复制）

 

简写：将所有元素放在一起

         有顺序要求：背景颜色->背景图片->重复方式->所在位置

 Background：url（img/pic.jpg）#87CEEB repeat-y right；

 

尺寸相关属性

1. 固定高度与宽度（height：200px）
2. 自适应高度（高度会根据内容的增加而增加）
3. 指定最大高度max-height（内容增加到指定高度的时候就不会再增加）
4. 指定最小高度 min-height（开始时高度固定，内容增加到一定地步时开始增加高度）

显示相关属性

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

visibility: hidden;

     /*隐藏内容，位置依然存在*/

 

1. display：none 不仅隐藏内容，而且隐藏位置

display: none;

/*不仅隐藏内容，而且隐藏位置*/

 

Display：inline将块级元素以内联元素形式显示，此时宽，高等属性对其无效

Display：inline-block 将块级元素以内联元素形式显示并且具有块级元素的特征，宽，高属性依然有效

Display：block将内联元素以块级元素的形式展现

 

盒子模型

Margin：外边距

Margin-top/bottom/left/right（上下左右）

使用方式

1. margin：30px，表示上下左右外边距都设置30px
2. margin-left：30px，表示设置距离左方30px
3. margin：10px20px30px40px 分别设置上右左下四个边的边距，顺序按照顺时针方向
4. margin：20px30px 分别设置上下边距为20px，左右边距为30px

padding：内边距

与 margin类似 上下左右边距都有

Border：边框

 

如果想让两个盒子在一行内，那么两个盒子都要浮动（float）并且给它们的父类清除浮动（overflow: hidden;）