梅科尔工作室-第四次网页前端培训笔记（CSS常用属性和盒子模型）

C_yyy89

已于 2022-07-13 18:49:02 修改

阅读量557

点赞数 1

文章标签：前端 css

于 2022-02-07 02:04:23 首次发布

本文链接：https://blog.csdn.net/ayaxx1314/article/details/122802784

版权

前言

本文主要记录我学习CSS常用属性和盒子模型的笔记

1、CSS常用属性设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用属性</title>
		<style type="text/css">
		#div1{
			height: 37.5rem;
			/* 背景颜色 */
			background-color: antiquewhite;
			/* 背景图片 */
			background-image: url(img/1.png);
			/* 是否重复 */
			background-repeat: no-repeat;
		}
		#div2{
			/* 字体颜色 */
			color: #FF0000;
			/* 对齐方式 */
			text-align: left;
			/* 文本修饰 */
			text-decoration: line-through overline underline;
			/* 首行缩进 */
			text-indent: 2em;
		}
		a{
			/* 去除超链接下划线 */
			text-decoration: none;
		}
		#p1{
			/* 对齐方式 */
			text-align: justify;
		}
		/* 浮动 */
		#d1{
			width: 6.25rem;
			height: 6.25rem;
			background-color: #00FFFF;
			/* 浮动 左浮动 */
			float: left;
		}
		#d2{
			width: 6.25rem;
			height: 6.25rem;
			background-color: black;
			/* 浮动 左浮动 */
			float: left;
		}
		</style>
	</head>
	<body>
		<div id="div1">
			Hello
		</div>
		<br>
		<hr>
		<div id="div2">
			Hello World
		</div>
		<a href="http://www.baidu.com">百度</a>
		<hr />
		<p id="p1">asdasdasdasd
			HTML：HTML概述、W3C概述、B/S架构系统原理、table、表是一种用来表现HTML或XML等文件样式的计算机语言。
			HTML：HTML概述、W3C概述、B/S架构系统原理、table、表是一种用来表现HTML或XML等文件样式的计算机语言。ahwahdashdohoqwh
			HTML：HTML概述、W3C概述、B/S架构系统原理、table、表是一种用来表现HTML或XML等文件样式的计算机语言。asd
			HTML：HTML概述、W3C概述、B/S架构系统原理、table、表是一种用来表现HTML或XML等文件样式的计算机语言。afsasf
		</p>
		<h2 style="display: block;">Hello</h2><br />
		<h2 style="display: none;">Hello</h2>
		<div id="d1"></div>
		<div id="d2"></div>
	</body>
</html>

1.1.背景

CSS背景属性用于定义HTMIL元素的背景效果

1.1.1.background-color（背景颜色）

body {
background-color:#ff0000;
}

设置元素的背景颜色

1.1.2.background-image（背景图片）

body {
background-image:url（...）;
}

设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

1.1.3.background-repeat（背景图片是否重复）

body {
background-image:url（...）;
background-repeat;
}

设置是否及如何重复背景图像

repea-x：x轴重复 repea-y：y轴重复

1.2.文本

{
			/* 字体颜色 */
			color: #FF0000;
			/* 对齐方式 */
			text-align: left;
			/* 文本修饰 */
			text-decoration: line-through overline underline;
			/* 首行缩进 */
			text-indent: 2em;
		}
		a{
			/* 去除超链接下划线 */
			text-decoration: none;
		}

文本主要可以设置

字体颜色：color 对齐方式：text-align 文本修饰（下划线之类）：text-decoration

首行缩进：text-indent：2em; 去除超链接的下划线：text-decoration:none;

1.3.对齐方式

text-align

值	描述
left	把文本排列到左边，默认值:由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justif	实现两端对齐文本效果
inherit	规定应该从父元素继承text-align属性的值

1.4.display

display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型

值	属性
none	不显示该元素
block	此元素将显示为块级元素,此元素前后会带有换行符
inline	默认，此元素会被显示为内联元素，元素前后没有换行符
inline-block	行内块元素(cSS2.1新增的值)
list-item	此元素会作为列表显示

1.5.浮动

float的属性值有none、left、right。
1．只有横向浮动，并没有纵向浮动。
2．会将元素的display属性变更为block。
3．浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片)
4．浮动元素的前一个元素不会受到任何影响(如果你想让两个块状元素并排显示，必须让两个块状元素都应用float)

2.盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
		#d1{
			width: 6.25rem;
			height: 6.25rem;
			background-color: #00FFFF;
			/* 设置边框 */
			border: #000000 0.3125rem outset;
			/* 内边距 */
			padding: 0.9375rem;
			/* 外边距 */
			margin-top: 6.25rem;
			margin-left: 6.25rem;
		</style>
	</head>
	<body>
		<div id="d1"></div>
	</body>
</html>

border（边框）、padding（内边距）、 margin（外边距）三个属性构成了盒子模型

2.1.border

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
		#d1{
			width: 6.25rem;
			height: 6.25rem;
			background-color: #00FFFF;
			/* 设置边框 */
			border: #000000 0.3125rem outset;
		</style>
	</head>
	<body>
		<div id="d1"></div>
	</body>
</html>

同时设置边框的样式、颜色、宽度

border：颜色样式宽度（顺序无所谓）例：border：red solid 1px

单独设置边框的样式、颜色、宽度、合并边框

border-width border-style border-color border-collapse

border-collapse 是设置是否将表格边框折叠为单一边框。
属性值: separate (默认，单元格边框独立)、collapse(单元格边框合并)