20200224前端学习笔记

最新推荐文章于 2022-10-19 20:19:15 发布

--believe

最新推荐文章于 2022-10-19 20:19:15 发布

阅读量110

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/qq_44850917/article/details/104488694

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.导航栏实例

代码如下
注意：

line-height=height时候文字位于垂直中间
text-decoration:none去掉下划线

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.nav{
		background-color: 0xFCFFFC;
		height: 41px;
		border-top:3px solid red;
		border-bottom: 1px solid black;  
	}
	.nav a{
		display:inline-block;
		text-decoration: none;
		font-size: 12px;
		height: 30px;
		/*注意写法，line-height等于height的时候居中*/
		line-height: 30px;
		background: pink;
		/*文字上下内间距为0左右内间距为5*/
		padding:0 5px;
	}
	.nav a:hover{
		background-color: red;
	}
	</style>
</head>
<body>
	<div class="nav">
	<a href="#">设为首页</a>
	<a href="#">手机新浪网</a>
	<a href="#">移动客户端</a>
	<a href="#">博客</a>
	<a href="#">微博</a>
	<a href="#">关注我</a>
	</div>
</body>
</html>

2.内盒尺寸计算（元素实际大小）

宽度：content width+padding+border
高度：content height+padding+border
盒子实际大小=内容的宽度和高度+内边距+边框

3.padding不影响盒子大小的情况

如果没有给一个盒子指定宽度，此时，如果给这个盒子padding值，就不会撑开盒子
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			background-color: pink;
			width: 200px;
			height: 200px;
		}
		div p{
			background-color: red;
			height: 20px;
			/*未给出宽度值，就不会被padding撑开*/
			padding:0 20px;
		}
	</style>
</head>
<body>
	<div><p>大大大</p></div>
</body>
</html>

4.外边距（margin）

用于设置外边距，margin就是控制盒子和盒子之间的距离
如下图

在这里插入图片描述

5.块级盒子水平居中

可以让一个块级盒子实现水平居中
盒子必须制定了宽度width
然后给左右外边距margin：auto
实际工作中，以下三种方法都可以
margin-left: auto;margin-right: auto;
margin: auto;
margin:0 auto;

6.文字居中和盒子居中区别

文字水平居中是text-align：center 而且还可以让行内元素和行内块元素居中对齐
块级盒子水平居中左右margin改为auto
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 600px;
			background-color: pink;
			height: 200px;
			/*盒子水平居中*/
			margin: 0 auto;
			/*行内块文字水平居中*/
			text-align: center;

			/*行内块元素垂直居中*/
			line-height: 200px;
		}
	</style>
</head>
<body>
<div>
		稳住<strong>我们能赢</strong><input type="text">
</div>
	
</body>
</html>

7.插入图片和背景图片的区别

插入图片我们用的最多：比如产品的展示类移动位置只能靠盒模型padding和margin
背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过background-position来设置

在这里插入图片描述

8.清除元素的默认内外边距（重要）

为了更灵活方面的控制网页中的元素，制作网页时，我们要将元素的默认内外边距清除
注意
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距
代码：

*{
		padding: 0px;
		margin: 0px;
	}

9.外边距合并

相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下边距margin-bottom
下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom之和
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

在这里插入图片描述

--believe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20200224前端学习笔记

1.导航栏实例代码如下注意： line-height=height时候文字位于垂直中间 text-decoration:none去掉下划线<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>...
复制链接

扫一扫