首页 > 其他分享> 文章详细

第四次HTML学习笔记（css的常用属性,盒子模型）

2022-02-08 19:58:50 阅读：119 来源： 互联网

标签：盒子设置 color text 边框 HTML background border css

css常用属性

一、背景

1.background-color

设置元素的背景颜色

2.background-image

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

3.background-repeat

设置如何重复背景图像

二、文本

1.color

字体颜色

2.text-align

对齐方式

3.text-decoration

文本修饰
（/去除文本效果（去除超链接下划线）/
text-decoration: none；）

4.text-indent

首行缩进

三、对齐方式

left、 center、 right、 justify两端对齐

四、display属性

在这里插入图片描述

五、浮动

在这里插入图片描述
例子:

#div1{
			width: 800px;
			height: 600px;
			background-color: #808080;
			background-image: url(img/logo.png);
			background-repeat: no-repeat; 
			}
			
		#div2{
			/*字体颜色*/
			color: #0000FF;
			/*对整方式*/
			text-align: left;
			/*文本修饰*/
			text-decoration: line-through overline underline;
			/*首行缩进*/
			text-indent: 2em;
		}
		a{
			/*去除文本效果（去除超链接下划线）*/
			text-decoration: none;
		}
		
		#p1{
			/* 对齐方式  left  center  right  justify两端对齐 */
			text-align: justify;
		}
		
		h2{
			/* display属性 none隐藏元素 block显示元素*/
			display: none;
		}
		/*  浮动 */
		#d1{
			width: 6.25rem;
			height: 6.25rem;
			background-color: #7FFF00;
			float: left;
		}
		#d2{
			width: 6.25rem;
			height: 6.25rem;
			background-color: #A52A2A;
			float: left;
		}
================================================================
<div id="div1">
		hello	
		</div>
		
		<div id="div2">
			hello world
		</div>
		<a href="https://www.baidu.com/">百度</a>
		<hr />
		<p id="p1"> 　1、踏破二十载风雨路，学院星空一年期，错一步，一生苦，空余笑靥如初。2、御剑江湖天涯路，前世梦今生误。晚舟唱，情相忘，泪痕浅瀛目。一世情缘未书，半生离愁难诉，不记春秋几回，只叹花落几度。3、岁月的长河静静流淌着，云淡风轻。假如生活欺骗了你，爱情的果实遭遇了害虫，你又执意不肯回头，就让我用三生烟火，换你一世迷离吧，等你终于清醒，我依旧在你身旁，从不曾离去。4、我自是年少，终是不懂，不懂什么官场人情，不懂什么人心险恶、世态炎凉，不懂得何谓早恋，何谓幼稚的爱。我只知道手心里的那只手，将一辈子陪我一起走。
　　5、漫步在青石小路上，已至八月，天热的和蒸笼似的，就连吹过来的风都是热热的，所幸是将至傍晚，倒也是清凉了不少，颇有几分微醺之意。
　　6、一株野草心的，没有温度，但有梦的憧憬，梦不是用心囤积的，她的梦是飘散的，风来的时候，或许会藏着一点。野草的心，不会有温度，每当靠近时，都会划伤你们的手。
　　7、我是长在南国的一根野草，只想去看沙漠中的漠漠沙粒，和那些冷漠的骆驼刺。我想去看一望无尽的大海，坐在沙滩上，为自己种一朵花，静听海水的浪潮，等待夕阳把我缩影，直到六点半的世界。</p>
		
		<hr />
		<h2>hello</h2>
		<hr />
		
		<div id="d1"></div>
		
		<div id="d2"></div>

结果：
在这里插入图片描述

盒子模型（padding 内边距 border 边框 margin 外边框）

在这里插入图片描述

1.border

border 边框

设置边框的颜色、样式、宽度
border:颜色样式宽度
例：border:red soild 1px

<1>.border-wide

<2>.border-color

<3>.border-style

（border的基本属性）
在这里插入图片描述

<4>.border-collapse

设置是否将表格边框折叠为单一边框
属性值：separate（默认、单元格边框独立）、collapse（单元格边框合并）

2.padding 内边距

设置元素所有内边距的宽度，或者设置各边上内编剧的宽度
单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right
默认按照上右下左的顺序设定

3.margin 外边距

设置一个元素所偶有外边距的宽度，或者设置各边上外边距的宽度
单独设置各边的外边距：margin-top、margin-left、margin-right

注：
当使用时
设置1个值：上右下左都一致
设置2个值：上下一致，左右一致
设置3个值：上右下，左和右一致

例子：

#d1{
			width: 100px;
			height: 100px;
			background-color: #7FFF00;
			/* 边框 */
			border: chocolate 5px outset;
			/* 内边距 */
			padding: 10px  20px;
			/* 外边距 */
			margin-top: 100px;
	=======================================
			<div id="d1"></div>