CSS RGB到盒子模型

suiseidesu

于 2020-08-26 18:11:48 发布

阅读量143

点赞数 1

分类专栏：学习笔记 CSS

本文链接：https://blog.csdn.net/qq_50270170/article/details/108244445

版权

学习笔记同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

RGB

RGB(red green blue)(0,10,256)
#0010FF
CSS中颜色的表示方法
(1) 预定义颜色:blue,red,black……
(2) 十六进制颜色#0f0f0f
(3) RGB颜色(128,0,0)全红
(4) RGBA:在RGB的基础上又添加了表示透明度的Alpha
(5) HIS:用色调,饱和度,和透明度三个分量来表示颜色
(6) HSLA:在HIS的基础上又添加了表示透明度的Alpha

<p style="color: blue;">预定义颜色</p>
<p style="color: rgb(0,255,0);">RGB颜色</p>
<p style="color: #fff000;">16进制颜色</p>

背景相关属性

Background-color:背景颜色
Background-image:背景图片
Background-repeat:图片复制选项
     (repeat在水平，垂直两个方向复制)
     (repeat-x/y 在水平/垂直方向进行复制)
     (no-repeat 不复制)
Background-position:图片所在位置上 top 下 bottom 左 left 右 right
简写：将所有元素放在一起
顺序要求：背景颜色->背景图片->重复方式->所在位置
background：url（img/xxx.png）#87CEEB repeat-y right

<style type="text/css">
			div{
				border: 1px red solid;
				/* 给边框 */
			}
			.div1{
				background-color: #848fff;
				height: 100px;
			}
			.div2{
				background-image: url(img/xxx.jpg);
				height: 200px;
				background-repeat: no-repeat;
				background-position: right;
				/* top(上),bottom(下) */
			}
			.div3{
				background-image: url(img/xxx.jpg);
				height: 200px;
				background-repeat: repeat-x;
			}
			.div4{
				height: 800px;
				background: url(img/xxx.jpg) #87CEEB repeat-y right;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="div1">背景颜色</div>
			<div class="div2">背景图片</div>
			<div class="div3">背景图片横向(纵向重复)</div>
			<div class="div4"></div>
		</div>
	</body>

尺寸相关属性

（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:边框
Border-width:边框宽度
Border-style:边框线条类型
Border-color:边框的颜色
简写:border:10px(宽度) red(颜色) solid(形状)

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

.box{
    overflow: hidden;
}
.div1{
  	float: left;
  	width: 200px;
  	height: 100px;
  	font-size: 50px;
  	color: dodgerblue;
  }
.div2{
    float: right;
    width: 200px;
    height: 100px;
    color: white;
    text-align: center;
    font-size: 50px;
    font-family: "楷体";
    background-color: black;
    border: 1px dodgerblue solid;
    }

<div class="box">
    <div class="div1">芜湖</div>
    <div class="div2">起飞</div>
</div>

suiseidesu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS RGB到盒子模型

RGBRGB(red green blue)(0,10,256)#0010FFCSS中颜色的表示方法(1) 预定义颜色:blue,red,black……(2) 十六进制颜色#0f0f0f(3) RGB颜色(128,0,0)全红(4) RGBA:在RGB的基础上又添加了表示透明度的Alpha(5) HIS:用色调,饱和度,和透明度三个分量来表示颜色(6) HSLA:在HIS的基础上又添加了表示透明度的Alpha<p style="color: blue;">预定义颜色</
复制链接

扫一扫