颜色、背景相关属性、尺寸相关属性、显示相关属性、边框案例

最新推荐文章于 2024-11-03 20:03:09 发布

坚持曾今曾坚持的

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量145

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_44791674/article/details/108240659

版权

2.3颜色

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
代码实现：

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

2.4背景相关属性

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;

2.5尺寸相关属性

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

2.6显示相关属性

(1)visibility：hidden 仅仅隐藏内容，该元素所占位置依然存在
(2)display：none 不仅隐藏内容，而且隐藏位置
Display:inline 将块级元素以内联元素形式显示，此时宽，高等属性对其无效
Display:inline-block 将块级元素以内联元素形式显示并且具有块级元素的特征，宽，高属性依然有效
Display：block 将内联元素以块级元素的形式展现
2.7盒子模型
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：边框
在这里插入图片描述
margin类似上下左右边距都有
Border：边框

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

Box是div1和div2的父类

COLOR.HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p style="color: blue;">预定义颜色</p>
		<p style="color: rgb(0,255,0);">RGB颜色</p>
		<p style="color: #ff0000;">16进制颜色</p>
	</body>
</html>

background.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>background8.26</title>
		<style type="text/css">
			div{
				border: 1px red solid;
				/* 给边框 */
			}
			.div1{
				background-color: skyblue;
				height: 100px;
			}
			.div2{
				background-image: url(img/t.jpg);
				height: 200px;
				background-repeat: no-repeat;
				background-position: right;
				/* top(上), bottom(下) */
			}
			.div3{
				background-image: url(img/t.jpg);
				height: 500px;
				background-repeat: repeat-x;
			}
			.div4{
				height: 500px;
				background: url(/img/t.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>
</html>

watchTV.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
					div{
						background-color: #008000;
						width: 200px;
						height: 100px;
					}
					.div1{
						visibility: hidden;
						/* 隐藏内容，位置依然存在 */
						display: none;
						/* 内容与位置均不存在 */
					}
				</style>
	</head>
	<body>
		<div class="div1">1</div>
				<div>2</div>
	</body>
</html>

box.html

<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
        		<title>盒子模型</title>
        		<style type="text/css">
        			div {
        				border: 1px solid red;
        			}
        
        			.div1 {
        				width: 400px;
        			}
        
        			.div2 {
        				border: 20px #00ff00 solid;
        			}
        
        			.div3 {
        				height: 100px;
        			}
        		</style>
        	</head>
        	<body>
        		<div class="div1">
        			<div class="div2">
        				<div class="div3">
        
        				</div>
        			</div>
        		</div>
    </body>
</html>

box案例.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
			.box{
				overflow:hidden;
			}
			.div1{
				float: left;
				width: 200px;
				height: 100px;
				font-size: 50px;
				color: skyblue;
				font-family: '楷体';
				overflow: hidden;
			}
			.div2{
				float: right;
				margin-left: 50px;
				width: 200px;
				height: 100px;
				font-size: 50px;
				font-family: "幼圆";
				color: white;
				background-color: black;
				overflow: hidden;
			}
			.div3{
				border: 1px solid  red;
				width: 200px;
				height: 100px;
				float: left;
			}
			.box2{
				overflow: hidden;
			}
			.box2 li{
				margin-top: 20px;
				float: right;
				color: #FF0000;
				font-size: 35px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="div1 ">Web1班</div>
			<div class="div2">我们最棒的</div>
		</div>
		<div class="box2">
			<div class="div3">字体大小50px <br>字体大小35px</div>
				<ui>
					<li>1234</li>
					<li>2345</li>
					<li>王牌飞行员请求出战</li>
				</ui>
		</div>
		

	</body>
</html>

height and width.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">t
		<title>尺寸有关</title>
		<style type="text/css">
			div {
				border: red 2px solid;
			}

			.div1 {
				wedth: 200px;
				height: 100px;
			}

			.div3 {
				max-height: 50px;
			}

			.div4 {
				min-height: 100px;
			}

			.div5 {
				overflow: scroll;
				max-height: 100px;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="div1">固定高度和宽度</div>
			<div class="div2">自适应高度和宽度<br>hjsdjsdkds<br>dkjrekdjkrf</div>
			<!--高度有内容称起,内容越多高度越大-->
			<div class="div3">可以指定最大高度</div>
			<div class="div4">可以指定最小高度</div>
			<div class="div5">
				<p>666</p>
				<p>666</p>
				<p>666</p>
				<p>666</p>
				<p>666</p>
				<p>666</p>
				<p>666</p>
				<p>666</p>
				<p>666</p>
				<p>666</p>
				<p>666</p>
				<p>666</p>
			</div>
		</div>
	</body>
</html>