RGB(red greed blue)(0,10,256)
CSS中的颜色表达方法
(1)预定义颜色:bule,red black。。。
(2)十六进制颜色:#0f0f0f
(3)RGB颜色(128,0,0)全红
代码实现:
<p style="color: blue;">预定义颜色</p>
<p style="color: rgb(0,255,0)">RGB颜色</p>
<p style="color: #FF0000">十六进制颜色</p>
(4)RGBA,在RGB的基础上有添加了表示透明度的Alpha
(5)HSL:用色调,饱和度和透明度三个分量来表示颜色
(6)HSLA:在HSL的基础上有添加了表示透明度的AIpha
背景相关属性
Background-color:背景颜色
Background-image:背景图片
Background-repeat:图片复制选项(repeat在水平,垂直两个方向复制)(repeat-x/y,在水平/垂直)(no-repeat 不复制)
简写:将所有元素放在一起(有顺序要求:背景颜色->背景图片->重复方式->所在位置
尺寸相关属性
- 固定高度和宽度(height:200px)
- 自适应高度(高度随内容增加而增加)
- 最大高度:max-height(内容增加到指定高度就不会再增加)
- 最小高度:min-height(开始高度固定,内容超过指定高度开始增加高度)
显示相关属性
- visibility:hidden 仅仅隐藏内容,该元素所占位置依然存在
- display:none 不仅隐藏内容,而且隐藏位置
- Display:inline 将块级元素以内联形式显示,此时宽,高等属性对其无效
- Display-block 将块级元素以内联元素形式显示并且具有块级元素的特征,宽,高属性依然有效
盒子模型
Margin:外边距
Margin-top(上) margin-bottom(下) margin-left(左)margin-right(左)
- margin:30px,表示上下左右外边距都设置30px
- margin-left:30px 表示设置距离左方30px
- margin:10px20px30px40px 分别设置上右下左四个边的边距,顺序按照顺时针方向
- margin:20px30px 分别设置上下边距20px 左右边距30px
Padding:内边距
与margin类似(参照上述方法)
Border:边框
若果想让两个盒子在一行内,那么两个盒子都要浮动(float)并且给他们的父类清除浮动(overflow:hidden;)
是什么是父类:
Box是div1和div2的父类