新人笔记5，css基础属性。

最新推荐文章于 2024-05-28 19:17:26 发布

安于本命

最新推荐文章于 2024-05-28 19:17:26 发布

阅读量160

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/zxcvbnm930/article/details/108239408

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

颜色

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>

背景相关属性

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;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>background</title>
		<style type="text/css">
			div{
				border: 1px red solid;
				/*给边框*/
			}
			.div1{
				background-color: #0000FF;
				height: 100px;
			}
			.div2{
				background-image: url(./2.jpg);
				height: 200px;
				background-repeat: no-repeat;
				background-position: right;
				/*top（上），buttom（下）*/
				
			}
			.div3{
				background-image: url(2.jpg);
				height: 500px;
				background-repeat: repeat-x;
			}
			.div4{
				height: 500px;
				background: url(2.jpg) #FFC0CB repeat-y right;
			}
			
		</style>
	</head>
		
	<body>
		<div class="div1">背景颜色</div>
		<div class="div2">背景图片不重复</div>
		<div class="div3">背景图片横向（纵向重复）</div>
		<div class="div4">简写方式</div>
		</div>
	</body>
</html>

在这里插入图片描述

尺寸相关属性

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

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

			.div1 {
				width: 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>asdkjaksdjkasjkd<br>hadsjhdahsd</div>
			<!--高度有内容撑起，内容越多高度越大-->
			<div class="div3">可以指定最大高度</div>
			<div class="div4">可以指定最小高度</div>
			<div class="div5">
				<p>6666</p>
				<p>6666</p>
				<p>6666</p>
				<p>6666</p>
				<p>6666</p>
				<p>6666</p>
				<p>6666</p>
				<p>6666</p>
				<p>6666</p>
				<p>6666</p>
				<p>6666</p>
				<p>6666</p>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

显示相关属性

(1)visibility：hidden 仅仅隐藏内容，该元素所占位置依然存在
(2)display：none 不仅隐藏内容，而且隐藏位置
Display:inline 将块级元素以内联元素形式显示，此时宽，高等属性对其无效
Display:inline-block 将块级元素以内联元素形式显示并且具有块级元素的特征，宽，高属性依然有效
Display：block 将内联元素以块级元素的形式展现

		<style type="text/css">
			div{
				background-color: #008000;
				width: 200px;
				height: 100px;
			}
			.div1{
				visibility: hidden;
				/*隐藏内容，位置依然存在*/
				display: none;
				/*内容与位置均不存在*/

盒子模型

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的父类。

我的作业如下：
代码图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型测试</title>
		<style type="text/css">
			.box {
				overflow: hidden;
			}

			.div1 {
				font-size: 50px;
				color: aqua;
				font-family: "楷体";
				float: left;
				width: 200px;
				height: 100px;
				overflow: hidden;

			}

			.div2 {
				font-family: "幼圆";
				float: right;
				width: 200px;
				height: 100px;
				border: 1px solid green;
				overflow: hidden;
				color: white;
				background-color: black;
				font-size: 50px;
			}

			.div3 {
				border: 1px solid red;
				width: 200px;
				height: 100px;

			}

			.div4 li {
				overflow: hidden;
				color: red;
				font-size: 35px;
				float: right;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="div1">web1班</div>
			<div class="div2">我们最棒</div>
		</div>
		<div class="div3">我是盒子3</div>
		</div>
		<div class="div4">
			<ui id="div4">
				<li>王牌飞行员申请出战</li>
				<li>2234</li>
				<li>1234</li>
			</ui>
		</div>
	</body>
</html>

运行图：
在这里插入图片描述

安于本命

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新人笔记5，css基础属性。

颜色RGB（red greed bule）（0，10，256）#0010FFCSS中颜色的表示方法（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
复制链接

扫一扫