CSS 初识_4颜色,浮动和定位

最新推荐文章于 2023-09-24 01:51:21 发布

DK_bin

最新推荐文章于 2023-09-24 01:51:21 发布

阅读量338

点赞数

分类专栏： IT前端知识学习

本文链接：https://blog.csdn.net/qq_32124881/article/details/80373061

版权

IT前端知识学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、颜色

1、颜色属性

可以为任何元素设置前景和背景色。一般来说，前景是元素的文本，不过，前景还包括元素周围的边框。

两种方式，直接影响一个元素的前景色：可以使用color属性，也可以使用某个边框属性设置边框颜色。

color--设置前景色
前景色这个属性是可以继承的。段落里面颜色是灰色，那么段落里面所有的强调文本粗体文本都会变成这个颜色。
background-color 背景颜色
默认的背景颜色是transparent 几乎所有元素都可以设置背景色。背景颜色不能继承

	<p>
		在这里实验一下，前景色和后景色的区别。<em>这里是倾斜字体</em><br><strong>这里是加粗字体</strong><br>看一看有没有什么区别呢？
	</p>

p{
	height: 20em;
	width: 10em;
	color: black;
	background-color:#f40;
}

2、background-image 背景图片

现在来认识另一个更加重要的元素。背景图片--这个元素不能继承。图像放在制定的背景颜色上，背景颜色是不会显示的，但是PNG可以部分或完全透明，这会导致图像与背景色相结合。

	<p>
		这里试着去设置一下背景图片,允许向任何元素应用背景图像,可以是块级元素也可以是行内元素。当然，大多数背景都应用到body元素。
	</p>

p{
	height: 20em;
	width: 10em;
	color: #FAF0E6;
	background-color:#f40;
	background-image: url(背景.jpg);


}

3、background-repeat background-position 有方向的重复

body{
	background-image:url(机器猫.jpg);
	background-repeat: repeat-x;
	background-position: repeat-left;

}

4、固定背景图像

body{
	background-image:url(机器猫.jpg);
	background-repeat: no-repeat;
	background-position: repeat-left;
	background-attachment: fixed;
}

二、浮动

建立列式布局，将布局的一部分与另一部分重叠。还可以完成多年来，通常需要使用多个表才能完成的任务。

1、float 浮动元素

	<p>
		这里试验一下图片浮动到右边，这里嵌入图片<img src="机器猫.jpg" alt="机器猫的图片" title="jiqimao">前面是图片。现在体验一下是否会围绕这个图片展开文字呢？看来会 哦。对于浮动元素要几点注意:首先,会以某种方式将浮动元素从文档的正常流中删除，不过他还是会影响布局。<br>
		一个元素浮动时,其他内容会环绕该元素。
		浮动元素周围的外边距不会合并。如果浮动一个有20像素外边距的图像,在这个图像周围至少将有20像素的空间。如果其他元素，与此图相邻,而且这些元素也有外边距,那么这些外边距不会与浮动图像的外边距合并。<br>
		float 还有一个属性值 none；
		防止元素浮动。<br>
		浮动元素会产生一个块级框,而不论这个元素本身是什么.因此，如果让一个链接浮动,即使该链接本身是行内元素,通常会产生一个行内框，但只要它是浮动的，就会产生一个块级框。他会像块级元素一样摆放和表现。<br>
	</p>

p{
	text-indent:2em;
	height: 20em;
	width: 50em;
	color: #FAF0E6;
	background-color:#f40;

}
img{

	
	float: right;
	height: 150px;
}

2、清除

3、定位

4、内容溢出和剪裁

如果一个元素的内容，对于元素大小来说过大，就有可能溢出元素本身。

（1）、溢出 overflow

	 <div>
	 	<p>
	 		出于某种原因,一个元素固定为某个特定大小,但内容在元素中放不下。此时就可以利用overflow 属性进行控制。<br>
	 		visible 是范围外可见。scroll 元素的内容会在元素框的边界处裁剪。也就是说溢出的部分无法看到，不过还是有办法让用户得到这些额外的内容。浏览器使用一种滚动条或者使用另外某种方法访问内容，而不会改变元素本身的形状。<br>
	 		hidden,元说的内容会在元素框的边界处裁剪,不过不会提供滚动条接口使用户访问超出裁剪区域的内容。
	 	</p>

	 </div>

div{
	overflow: scroll;
	height: 100px;
	width: 100px;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

（2）、内容剪裁

如果一个绝对定位元素的内容溢出其内容框，而且overflow设置为要求裁剪该内容，通过clip可以改变裁剪区域的形状。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS初识</title>
	<link rel="stylesheet" href="CSS初识样式表.css">
</head>
<body>
	 <div>
	 	<p>
	 		出于某种原因,一个元素固定为某个特定大小,但内容在元素中放不下。此时就可以利用overflow 属性进行控制。<br>
	 		visible 是范围外可见。scroll 元素的内容会在元素框的边界处裁剪。也就是说溢出的部分无法看到，不过还是有办法让用户得到这些额外的内容。浏览器使用一种滚动条或者使用另外某种方法访问内容，而不会改变元素本身的形状。<br>
	 		hidden,元说的内容会在元素框的边界处裁剪,不过不会提供滚动条接口使用户访问超出裁剪区域的内容。
	 	</p>

	 </div>
	
</body>
</html>

DK_bin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 初识_4颜色,浮动和定位

1、颜色属性可以为任何元素设置前景和背景色。一般来说，前景是元素的文本，不过，前景还包括元素周围的边框。两种方式，直接影响一个元素的前景色：可以使用color属性，也可以使用某个边框属性设置边框颜色。color--设置前景色前景色这个属性是可以继承的。段落里面颜色是灰色，那么段落里面所有的强调文本粗体文本都会变成这个颜色。background-color 背景颜色默认的背景颜色是tra...
复制链接

扫一扫