学习周记4

最新推荐文章于 2022-09-02 16:21:29 发布

Ddddd_xr

最新推荐文章于 2022-09-02 16:21:29 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/Ddddd_xr/article/details/115271116

版权

CSS常用属性

CSS尺寸
CSS对齐
CSS边框
CSS显示

CSS尺寸

通过改变尺寸属性可以改变元素的高度和宽度，也可以改变行间距。

属性	描述
height	设置元素的高度
line-height	设置行高
max-height	设置元素的最大高度
max-width	设置元素的最大宽度
min-height	设置元素的最小高度
min-width	设置元素的最小宽度
width	设置元素的宽度

注：将属性改变写入< style >标签，放于< head >下
设置元素不同高度的实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		img.normal
		{
			height:auto;
		}
		img.big
		{
			height:150px;
		}
		p.ex
		{
			height:250px;
			width:50px;
		}
		</style>
	</head>
	<body>
		<img class="normal" src="../image/z2%20.jpg" width="95" height="84" /><br>
		<img class="big" src="../image/z2%20.jpg" width="95" height="84" />
		<p class="ex">这里的段落受style中的属性定义控制，宽为50px，高为250px</p>
		<p>这里的段落不受影响
			</p>
	</body>
</html>

浏览器运行结果
在这里插入图片描述
同理，将style中CSS声明的值改为百分比，即可用百分比设置元素尺寸。
注：使用上述表格中的其他属性加对应的值即可进行最大高度、最小宽度等的设定。

CSS对齐

一、居中对齐

1.元素居中对齐

元素居中对齐可以使用 margin: auto;
一定要设置元素的宽度，这样才能达到居中的效果。元素通过指定宽度，将两边的空进行平分。
实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.a {
		    margin: auto;
		    width: 60%;
		    border: 3px solid #a70000;
		    padding: 10px;
		}
		
		</style>
	</head>
	<body>
		<h1>元素居中对齐</h1>
		<div class="a">
		  <p>元素居中时一定要设置元素宽度</p>
		</div>
	</body>
</html>

浏览器运行结果
在这里插入图片描述

2.文本居中对齐

只要文本居中对齐时使用 text-align: center;
实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.center {
		    text-align: center;
		    border: 3px solid blue;
		}
		</style>
	</head>
	<body>
		<h2>文本居中对齐</h2>
		
		<div class="center">
		  <p>该属性下只有文本居中</p>
		</div>
	</body>
</html>

浏览器运行结果
在这里插入图片描述

3.图片居中对齐

设置图片居中对齐时, 使用 margin: auto;
并将它放到块元素中
实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		img {
		    display: block;
		    margin: 0 auto;
		}
		</style>
	</head>
	<body>
		<h3>图片居中对齐</h3>
		<img src="../image/z2%20.jpg"  style="width:10%">
	</body>
</html>

浏览器运行结果
在这里插入图片描述

二、左右对齐

1.用定位方法

使用 position: absolute; 属性来对齐元素
实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.right {
		    position: absolute;
		    right: 0px;
		    width: 300px;
		    border: 3px solid #7f0000;  
		}
		</style>
	</head>
	<body>
		<h>使用定位方法实现右对齐</h>
		<div class="right">
		  <p>使用position: absolute;后定义据右边的距离、元素宽度等</p>
		</div>
	</body>
</html>

浏览器运行结果
在这里插入图片描述

2.用float 方法

在上述实例中将position: absolute;改为***float: right;***即可，但float方法中不需要定义据右边的距离。

三、垂直居中

要实现垂直居中对齐，可在头部顶部使用 padding
如果要水平和垂直都居中，可以同时使用 padding 和 text-align: center

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.center {
		    padding: 70px 0;
		    border: 3px solid blue;
			text-align: center;
		}
		</style>
	</head>
	<body>
		<h>垂直居中</h>
		<div class="center">
		  <p>在style同时使用padding:和text-align: center;使水平垂直都居中</p>
		</div>
	</body>
</html>

浏览器运行结果
在这里插入图片描述

CSS边框

1.边框样式

定义border-style于< style >下

border-style 值	样式结果
none	无边框
dotted	点线边框
dashed	虚线边框
solid	实线边框
double	双边框
groove	凹槽边框
ridge	垄状边框
inset	嵌入边框
outset	外凸边框
hidden	隐藏边框

2.边框宽度

在边框样式后，用border-width定义边框宽度
定义宽度可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，也可以使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin
注意: “border-width” 属性如果单独使用则不起作用。要先使用 “border-style” 属性来设置边框。

3.边框颜色

在边框样式后，用border-color定义边框颜色
定义颜色可以用颜色名称，如 “red”，也可以用RGB 值, 如 “rgb(255,0,0)”，也可以用16进制值, 如 “#ff0000”。
注意: “border-color” 属性如果单独使用则不起作用. 要先使用 “border-style” 属性来设置边框。

应用实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
p.none {border-style:none;}
p.dotted {
	border-style:dotted;
	border-width:10px
	}
p.dashed {
	border-style:dashed;
	border-width:medium;
	}
p.solid {
	border-style:solid;
	border-width:1px;
	}
p.double {
	border-style:double;
	border-color:red;
	}
p.groove {
	border-style:groove;
	border-color:#98bf21;
	}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
p.a
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
		</style>
	</head>
	<body>
		<p class="none">无边框。</p>
		<p class="dotted">虚线边框。</p>
		<p class="dashed">虚线边框。</p>
		<p class="solid">实线边框。</p>
		<p class="double">双边框。</p>
		<p class="groove"> 凹槽边框。</p>
		<p class="ridge">垄状边框。</p>
		<p class="inset">嵌入边框。</p>
		<p class="outset">外凸边框。</p>
		<p class="hidden">隐藏边框。</p>
		<p class="a">两个不同的边界样式。</p>
	</body>
</html>

浏览器运行结果
在这里插入图片描述

CSS显示

隐藏元素
有display:none或visibility:hidden两种方法
visibility:hidden可以隐藏某个元素，但隐藏的元素仍占用之前的空间，仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间，从布局中消失了。
应用实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.solid {
	border-style:solid;
	border-width:1px;
	}
p.hidden {border-style:hidden;}
p.hidden1 {visibility:hidden;}
p.hidden2 {display:none;}
		</style>
	</head>
	<body>
		<p class="ridge">垄状边框。</p>
		<p class="hidden1">嵌入边框。</p>
		<p class="solid">实线边框。</p>
		<p class="hidden2">外凸边框。</p>
		<p class="hidden">隐藏边框。</p>
	</body>
</html>

浏览器运行结果
在这里插入图片描述

Ddddd_xr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习周记4

CSS常用属性CSS尺寸通过改变尺寸属性可以改变元素的高度和宽度，也可以改变行间距。属性描述height设置元素的高度line-height设置行高max-height设置元素的最大高度max-width设置元素的最大宽度min-height设置元素的最小高度min-width设置元素的最小宽度width设置元素的宽度注：将属性改变写入< style >标签，放于< head >下设置元素不同高度的实
复制链接

扫一扫