web前端学习-第五天

目录

颜色

RGB（red green blue）（0,10,255）
#0010FE
CSS中颜色的表示方法（加粗为重点）
（1） 预定义颜色：blue，red，black……
（2） 十六进制颜色：#0F0F0F
（3） RGB颜色（128,0,0）全红
（4） RGGBA，在RGB的基础上又添加了表示透明度的Alpha
（5） HSL：用色调，饱和度和透明度三个分量来表示颜色
（6） HSLA：在HSL的基础上又添加了表示透明度的Alpha

背景相关属性

background-color：背景颜色
background-image：背景图片
background-repeat：图片复制选项（repeat在水平，垂直两方向复制）
（repeat-x/y 在水平/垂直方向进行）
（no-repeat 不复制）
background-position：图片所在位置 上 top 下bottom 左left 右right
简写：将所有元素放在一起
顺序要求：背景颜色->背景图片->重复方式->所在位置
background：url（img/a.png）#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 将块级元素以内联元素形式显示并且具有块级元素的特征，宽，高属性依然有效

盒子模型

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：边框

如果想让两个盒子在一行内，那么两个盒子都要浮动（float）并且给他们的父类消除浮动（overflow: hidden；）
什么是父类：

box是div1和div2的父类.