re:从0开始的CSS学习之路 7. 盒子模型

1. 盒子模型

盒子模型(box model):可以把HTML中所有的元素都理解成盒子,用于装内容的容器
目的就是为了将HTML文档中的内容进行归纳整理,方便管理,从而达到布局的效果

内容区 content
边框 border
内边距 padding
外边距 margin

1. 内容区 content

元素中所有的子元素和文本等都在内容区中排列
内容区的大小使用widthheight属性设置
width 设置内容区的宽度
height 设置内容区的高度

2. 边框 border

边框由三个部分组成,缺一不可

  1. 边框的宽度 border-width

    1. 可以分别设置四个边框的宽度
      border-top-width
      border-right-width
      border-bottom-width
      border-left-width
    2. 可以利用border-width属性直接设置四个边框的宽度
      border-width: 10px 20px 30px 40px; 上 右 下 左(顺时针)
      border-width: 10px 20px 30px; 上 左右 下(顺时针)
      border-width: 10px 20px; 上下 左右
  2. 边框的样式 border-style
    可选值:
    solid 实线
    dotted 点状虚线
    dashed 虚线
    double 双线

    1. 可以分别设置四个边框的样式
      border-top-style
      border-right-style
      border-bottom-style
      border-left-style
    2. 可以利用border-style直接设置四个边框的样式
      border-style: solid dotted dashed double; (顺时针,和border-width一样)
  3. 边框的颜色 border-color
    使用方式与border-width一模一样

  • 边框的简写属性:border
    border属性可以设置边框所有的样式
    border:border-width border-style border-color(顺序无要求)
    border-top
    border-right
    border-bottom
    border-left

3. 内边距 padding

用于设置内容区域边框之间的距离

  1. 可以设置四个方向的内边距
    padding-top
    padding-right
    padding-bottom
    padding-left
  2. 注意:
    1. 设置内边距会影响盒子的大小
    2. 背景会延伸到内边距

内边距的简写属性:
padding可以直接设置四个方向的内边距
padding: 10px 20px 30px 40px; 上 右 下 左(顺时针)
padding: 10px 20px 30px; 上 左右 下
padding: 10px 20px; 上下 左右
padding: 10px; 上下左右

4. 外边距 margin

用于设置盒子与盒子之间的距离,设置外边距并不会影响盒子可见框的大小,但是会影响盒子(其他盒子)的位置

  1. 可以设置四个方向的外边距:
    margin-top
    margin-right
    margin-bottom
    margin-left

  2. 注意:

    1. 盒子的排列是由上到下、由左到右进行排列的。因此改变盒子的上外边距和左外边距
      会改变当前盒子的位置
    2. 改变盒子的下外边距和右外边距会改变其他盒子的位置
    3. 外边距可以设置负值,盒子会向反方向移动
  • 外边距的简写属性
    margin 属性可以直接设置四个方向的外边距
    margin: 100px 200px 300px 400px; (顺时针,使用方式与padding一样)

示例如下:

DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>box modeltitle>
	.box {
		width: 200px;
		height: 200px;
		background-color: #c7edcc;
	}
	
	.box1 {
		width: 200px;
		height: 200px;
		background-color: #c7edcc;
	
		/* 边框的宽度 */
		/* border-width: 10px; */
		/* border-top-width: 10px;
		border-right-width: 20px;
		border-bottom-width: 30px;
		border-left-width: 40px; */
		/* border-width: 10px 20px 30px 40px; */
		/* border-width: 10px 20px 30px; */
		/* border-width: 10px 20px; */
		/* border-width: 10px; */
	
		/* 边框的样式 */
		/* border-style: solid; */
		/* border-top-style: solid;
		border-right-style: dotted;
		border-bottom-style: dashed;
		border-left-style: double; */
		/* border-style: solid dotted dashed double; */
		/* border-style: solid; */
	
		/* 边框的颜色 */
		/* border-color: red; */
		/* border-color: red yellow blue green; */
	
		/* 边框的简写属性 */
		/* border: 10px solid red; */
	}
	
	.box2 {
		width: 300px;
		height: 300px;
		background-color: #c7edcc;
		border: 1px solid #000;
	
		/* 设置四个方向内边距 */
		/* padding-top: 50px;
		padding-right: 50px;
		padding-bottom: 50px;
		padding-left: 50px; */
		padding: 10px 20px 30px 40px;
		padding: 10px 20px 30px;
		padding: 10px 20px;
		padding: 10px;
	}
	
	.son {
		width: 300px;
		height: 300px;
		background-color: #fde6e0;
	}
	
	.box3,
	.box4 {
		width: 200px;
		height: 200px;
	
	}
	
	.box3 {
		background-color: #c7edcc;
	
		/* 设置盒子的外边距 */
		/* margin-top: 100px;
		margin-left: 100px;
		margin-bottom: 100px;
		margin-right: 100px; */
		margin: 100px 200px 300px 400px;
	}
	
	.box4 {
		background-color: #fde6e0;
		margin-left: -100px;
	}
head>

<body>
	<div class="box">div>
	<div class="box1">div>
	<div class="box2">
		<div class="son">div>
	div>

	<div class="box3">div>
	<div class="box4">div>
body>

html>

你可能感兴趣的:(从0开始的CSS之旅,css,学习,前端)