CSS盒子模型—3

一、CSS盒子模型

概念
盒子模型四部分组成:内容、边框(border)、内边距(padding)、外边距(margin)
内容:盒子里面的文字和图片等元素组成内容
边框:指的是盒子的厚度
内边距:盒子内容与边框之间的距离
外边距:盒子与盒子之间的距离

1、边框 border

  • 语法:
    border : border-width ||border-style ||border-color
属性作用
border-width定义边框粗细,单位px
border-style边框的样式
border-color边框颜色
  • 边框的样式
    none:没有边框(默认)
    solid:边框为单实线(最常用的)
    dashed:边框为虚线
    dotted:边框为点线

  • 代码

	<style >
		div{
			width: 300px;
			height: 200px;
			/*线的粗细*/
			border-width: 10px;
			/*border-style:solid实线;dashed 虚线 dotted 点线*/
			border-style: solid;
			border-color: black;
		}
	</style>
边框简写:border: 10px dotted yellow;
三个属性没有先后顺序。
  • 边框的样式写法
上边框下边框左边框右边框
border-top-style 样式border-bottom-style 样式border-left-style 样式border-right-style 样式
border-top-width 宽度border-bottom-width 宽度border-left-width 宽度border-right-width 宽度
border-top-color 颜色border-bottom-color 颜色border-left-color 颜色border-right-color 颜色
(重点)border-top:样式 宽度 颜色border-bottom:样式 宽度 颜色border-left:样式 宽度 颜色border-right:样式 宽度 颜色

举例代码:

div{
			width: 200px;
			height: 100px;
			/*先写大的,后些小的*/
			border :none;
			border-top:1px black solid;
			border-left: 1px yellow solid;
			border-right: 1px green solid;
			border-bottom: 1px blue solid;
		}

border-collapse:collapse;(合并的意思)表示相邻边框合并在一起

/*相邻边框合并在一起,让边框变细一点,实现 1 + 1 = 1 的效果*/
border-collapse: collapse;

2、内边距 padding

  • 概念
    内边距(padding):是指边框与内容之间的距离。
  • 设置
属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距

当我们给盒子指定padding之后,发生了2件事情:

  1. 内容和边框有了距离,添加了内边距
  2. 对盒子的影响:盒子会变大了
/*内边距的距离:赋值顺序为 上右下左 顺时针*/
padding: 10px 20px 30px 5px;

padding赋值个数不同,表达的意思不同:

值的个数表达意思
1个值padding:上下左右 内边距
2个值padding:上下内边距 左右内边距
3个值padding:上内边距 左右内边距 下内边距
4个值padding:上 右 下 左 顺时针赋值

举例子:新浪官网的导航栏

<!DOCTYPE html>
<html>
<head>
	<title>新浪网导航栏</title>
	<style >
		.nav
		{
			/*设置盒子的高度*/
			height: 41px;
			/*设置盒子的背景颜色*/
			background-color: #FCFCFC;
			/*设置上下边框的属性*/
			border-top: #ff9900 3px solid;
			border-bottom: green 1px solid;
		}
		.nav a{
			/*将 a 转换成行内块元素*/
			display: inline-block;
			/*去掉下划线*/
			text-decoration: none;
			color: #4c4c4c;
			height: 41px;
			line-height: 41px;
			/*因为 行高 =  高度,那么文字已经垂直居中了,所以不需要设置上下的内边距了,只需要设置左右的内边距,通过padding撑开盒子的大小*/
			padding: 0px 20px;
			/*字体大小*/
			font-size: 12px;

		}
		/*鼠标经过时会变颜色*/
		a:hover{
			background-color: #eee;
			color: orange;
		}
	</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>

结果:
在这里插入图片描述
盒子的实际大小 = 内容宽度 高度 + 内边距 + 边框
盒子被撑大了,如何解决呢?
解决方法:内边距一定要给的,我们只能改变 内容宽度 width ,让它减去多出来的内边距就可以了。

特殊情况:当没有给一个盒子指定宽度,此时,如果这个盒子指定padding,则不会撑开盒子

	p{
			height: 30px;
			background-color: purple;
			padding-left: 30px;
			/*特殊情况:如果这个盒子没有宽度,则padding 不会撑开盒子 ;(高度也是如此)*/
		}

3、外边距 margin

(1) 概念
外边距(margin):盒子与盒子之间的距离
(2)设置

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距

(3)让块级元素居中对齐水平:

	必须有宽度  width = 30px;
	左右外边距设置为auto
/*盒子居中对齐水平*/
margin-left: auto;
margin-right: auto;

常见的写法,以下三种都可以;

  • margin-left:auto; margin-right:auto;
  • margin:auto;
  • margin:0 auto;

(4)文字居中 和 盒子居中的区别;

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

举个栗子:代码如下

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style >
		div{
			width: 200px;
			height: 200px;
			background-color: red;
			/*盒子居中*/
			margin-left: auto;
			margin-right: auto;
			/*文字居中*/
			text-align: center;
		}
		
	</style>
</head>
<body>
	<div>123
		<!-- 行内元素居中 -->
		<strong>我们要赢了</strong>
		<!-- 行内块元素居中 -->
		<input type="text" name="">
	</div>
</body>
</html>

(5)插入图片 和 背景图片 的区别
插入图片 img:用得最多,比如产品展示类,移动位置只能靠盒子模型 padding margin
背景图片 background-image:一般用于小图标背景 或者 超大背景图片 背景图片只能通过 background-position移动。
举例:代码如下

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style >
	/*对div 盒子的操作*/
		.pic,
		.bg
		{
			width: 500px;
			height: 500px;
			border: 1px solid red;
			padding:50px;
		}
		/*对插入图片的操作*/	
		.pic img{
			margin:30px;
		}
		/*对背景图片的操作*/
		.bg{
			background: url(images/3.jpg) no-repeat;
			background-position: 30px 30px;
		}
	</style>
</head>
<body>
	<div class="pic">
	<!--插入图片-->
		<img src="images/3.jpg" >
	</div>
	<div class="bg"></div>
	
</body>
</html>

(6)清除元素默认的内外边距(重要)

为了更方便的控制网页中的元素,制作网页时,我们需要将元素默认内外边距清除。

代码如下:

	* {
			/*这是以后我们写CSS的第一句话*/
			margin:0px;
			padding: 0px;
		}

attation:

  • 行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距

(7)外边距合并

  • 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距100px,下面的元素有上外边距50px ,他们之间的外边距并不是 100 + 50 = 150 ,而是取两者中较大的 100px。这也就是外边距合并。
  • 解决方法:尽量只给一个盒子添加 margin 值。
  • 嵌套块元素垂直外边距的合并(塌陷)
    概念:本来只想变化子元素,但是父元素会跟着子元素一起变化,
    解决方法:
    (1)为父元素定义边框 border-top:1px red trandparent;
    (2)为父元素定义内边距 padding-top:1px;
    (3)为父元素添加 overflow:hidden;
    代码:
	<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style >
		.father{
			width: 500px;
			height: 500px;
			background-color: red;
			/*嵌套关系 垂直外边距合并 解决方案:*/
			/*1.给父亲定义一个上边框*/
			/*border-top:1px solid transparent;*/
			/*2.给父亲指定一个 上 padding值*/
			/*padding-top: 1px;*/
			/*3.可以给父元素添加 overflow:hidden;*/
			overflow: hidden;

		}
		.son{
			width: 200px;
			height: 200px;
			background-color: green;
			margin-top: 100px;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>

</body>
</html>

4.盒子布局的稳定性

学完盒子模型,什么情况下选择内边距?什么情况下用外边距呢?
答:大部分情况下是可以混合使用的,根据稳定性来分:width > padding > margin

去掉列表默认样式
无序列表 和 有序列表,在不同浏览器显示效果不同,而且也比较难看,所以,我们一般选择去掉这些列表样式。
代码:

li { list-style : none; }

拓展

1. 圆角边框

  • 语法
    border-radius:length
  • 其中每个值可以为数值或者百分比
  • 技巧:让一个正方形变成圆 :border-radius:50%
  • 而如果我们想要下面的圆角矩形的图案,这里的length就要给具体的数据了—高度的一般就可以。
    举例:
p{
	/*宽、高、背景颜色、字体颜色、字体大小、文字水平居中、垂直居中*/
		width: 100px;
		height: 20px;
		background-color: red;
		font-size: 12px;
		color:#fff;
		text-align: center;
		line-height: 20px;
		/*制作圆角矩形,给的长度是高度的一半*/
		border-radius: 10px;
	}

结果如下:
在这里插入图片描述

2. 盒子阴影

  • 语法:
box-shadow: 水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色  内/外阴影
描述
h-shadow必须要写。水平阴影的位置。允许为负值
v-shadow必须要写。垂直阴影的位置。允许为负值

其他的部分不是必须的,可写可不写。

/*box-shadow: 水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 */
box-shadow: 2px 2px 2px 2px #000;

/*更好看的*/
box-shadow: 0px 15px 30px 2px rgba(0,0,0,.3);
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页