web前端第五天

一 . 颜色
RGB（red greed bule）（0，10，256）
#0010FF
CSS中颜色的表示方法
（1） 预定义颜色：bule ，red，black。。。

（2） 十六进制颜色：#0f0f0f

（3） RGB颜色（128，0，0）全红

（4） RGBA，在RGB的基础上又添加了表示透明度的Alpha

（5） HSl：用色调，饱和度，和透明度三个分量来表示颜色

（6） HSLA：在HSL的基础上又添加了表示透明度的Alpha
代码实现：

预定义颜色

RGB颜色

16进制颜色

二 . 背景相关属性
Background-color:背景颜色

Background-image：背景图片

Background-repeat：图片复制选项（repeat在水平，垂直两个方向复制）
（repeat-x/y 在水平/垂直方向进行复制）
（no-repeat 不复制）

Background-position：图片所在位置 上top 下bottom 左left 右right

简写：将所有元素放在一起
有顺序要求：背景颜色->背景图片->重复方式->所在位置
background: url(img/pic.jpg) #87CEEB repeat-y right;

三 . 尺寸相关属性
（1）固定高度与宽度（height：200px）

（2）自适应高度（高度会根据内容的增加而增加）

（3）指定最大高度max-height（内容增加到指定高度的时候就不会再增加）

（4）指定最小高度min-height（开始时高度固定，内容增加到一定地步时开始增加高度）

四 . 显示相关属性
(1)visibility：hidden 仅仅隐藏内容，该元素所占位置依然存在

(2)display：none 不仅隐藏内容，而且隐藏位置

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

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

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

五 . 盒子模型
Margin：外边距

Margin-top(上) margin-bottom（下） margin-left（左） margin-right（右）
使用方式：
（1） margin：30px ，表示上下左右外边距都设置30px

（2） margin-left：30px ，表示设置距离左方30px

（3） margin： 10px 20px 10px 20px 分别设置上右下左四个边的边距，顺序按照顺时针方向

（4） margin：20px 30px 分别设置上下边距为20px ，左右边距为30px

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

Border：边框