12.31~1.6周报

最新推荐文章于 2024-06-19 08:49:53 发布

Venciki

最新推荐文章于 2024-06-19 08:49:53 发布

阅读量94

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/qq_33188421/article/details/85803675

版权

web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

12.31~1.6周报

本周学习的知识点：

css框模型
基本框
链表

本周分享知识点：

使用auto
如果设置width丶margin-left或margin-right中的某个值为auto，而余下两个属性指定为特定的值，那么设置为auto的属性会确定所需的长度，从而使元素框的宽度等于父元素的width。换句话所，假设7个属性的和必须等于400像素，没有设置内边距或外边距，而且有外边距和width设置为100px，左边距设置为auto。那么左外边距的宽度将是200像素：
eg:

p{
	margin-left: auto;
	margin-right: 100px;
	width: 100px;
}

//此例子就完美的说明了上述内容auto会自动确定所需的长度
从某种程度上将，可以用auto弥补实际值与所需总和的差距。

不只一个auto
下面来看如果这3个属性（width丶margin-left丶margin-right）中有两个都设置为auto会出现什么情况呢？如果两个外边距都设置为auto，如下代码所示：

p{
   width: 100px;
   margin-left: auto;
   margin-right: auto;
}

让我们来看下效果：
在这里插入图片描述
它们会设置为相等的长度，一次将元素在其父元素居中。
将两个外边距设置为相等的长度是将父元素剧中的一种正确放大，这不同于使用text-align，因为text-align只应用于块级元素的内联内容，所以将元素的text-align设置为center并不能将这个元素居中。

三个auto时:
两个外边距都会设置成零，而width会尽可能宽。
这种结果和默认值是相同的，即使没有外边距或width声明任何值。在这种情况下，外边距默认为0，width默认为auto。
最后分下这样几个实例的代码：

<html>
<head>
<style type="text/css">
p.leftmargin {margin-left: 20px}
p.automargin {margin-left: auto}
</style>
</head>
<body>
<p class="automargin">这是auto margin的结果</p>
<p class="leftmargin">margin-left: 20px 页边距为20的显示结果</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>头像的一个样式</title>
	<style>
	html{
		background: #ccc;
	}
	.container{
		margin-top: 200px;
	}
		.container img{
			height: 100px;
			border-radius: 50px; 
			display: block;
			margin: 0 auto;
		}
		.container img:hover{
			box-shadow: 0px 1px 8px 1px #000;
		}
	</style>
</head>
<body>
<div class="container">
	<img src="avatar.jpg">
</div>
</body>
</html>

下周学习计划

要好好学习链表把链表这块而弄懂。
前端的下周学习基本视觉格式化。
好好复习丶备考期末。

Venciki

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12.31~1.6周报

12.31~1.6周报本周学习的知识点：本周分享知识点：使用auto如果设置width丶margin-left或margin-right中的某个值为auto，而余下两个属性指定为特定的值，那么设置为auto的属性会确定所需的长度，从而使元素框的宽度等于父元素的width。换句话所，假设7个属性的和必须等于400像素，没有设置内边距或外边距，而且有外边距和width设置为100px，左边距...
复制链接

扫一扫