一、定义元素的宽和高
定义元素的宽和高需要使用下面属性：
1、width宽度、height高度：固定的宽度和高度，当内容超出宽度和高度之后，不会自动填充扩展
2、min-width最小宽度、min-height最小高度 ：
最小宽度、最小高度：设置了最小宽度和最小高度之后，如果在div中没有任务文字，系统会显示一个最小宽度和最小高度的区域，若div中的文字超过了最小宽和最小高度，那么区域会自动进行填充扩展
3、max-width最大宽度、max-height最大高度 ：
最大宽度和最大高度是可以在范围之内自动根据内容的多少进行自动填充扩展，但如果是超过了最大宽度和最大高度的话，元素将只会延展到最大值就不会再继续延展下去了
4、单位是px像素、%百分比：
px是精确的像素，百分比是根据窗口大小设置的，若指定百分比，会根据窗口拖动的大小，来自动换行
下面是相关实例：
<!DOCTYPE html>
<html>
<head>
<title>定义元素的宽和高</title>
<style type="text/css">
/*最小宽度和最小高度*/
/*没有任何文字时会显示最小区域*/
.box{min-width: 50px;min-height: 50px;background-color: red;}
/*超过最小宽度和最小高度会自动进行填充扩展*/
.box1{min-width: 50px;min-height: 50px;background-color: blue;}
/*最大宽度和最大高度*
/*没有超过最大宽度和最大高度时，会自动根据内容进行延展*/
.box2{max-width: 400px;max-height: 200px;background-color: green;}
/*超过最大宽度和最大高度的部分，不会自动延展*/
.box3{max-width: 400px;max-height: 200px;background-color: green;}
/*百分比控制:子元素根据父元素的大小设置百分比，会根据父元素大小改变同时改变自身大小*/
.father{width: 100%;height: 300px;background-color: yellow;}
.father .child{width: 50%;height: 50%;background-color:red;}
</style>
</head>
<body>
<div class="box"></div>
<hr>
<div class="box1">各位一直喜爱并支持CSDN的用户大家好：
在这里告诉大家个好消息，CSDN建立了开发者社群，群内提供行业技术讲师提供专业答疑，技术资源共享，技术精英相互连接等社群服务，为保证良好的交流氛围，请大家共同杜绝恶意营销的广告哦~
社群领域包涵：AI、Python、大数据、区块链及综合类，五类领域的技术交流栈供大家自行选择哦~
扫码添加李思思小姐姐，回复数字即可进入技术社群！
---------------------
作者：CSDNedu
来源：CSDN
原文：https://blog.csdn.net/CSDNedu/article/details/84327908
版权声明：本文为博主原创文章，转载请附上博文链接！</div>
<hr>
<div class="box2">各位一直喜爱并支持CSDN的用户大家好：
在这里告诉大家个好消息，CSDN建立了开发者社群，群内提供行业技术讲师提供专业答疑，技术资源共享，技术精英相互连接等社群服务</div>
<hr>
<div class="box3">各位一直喜爱并支持CSDN的用户大家好：
在这里告诉大家个好消息，CSDN建立了开发者社群，群内提供行业技术讲师提供专业答疑，技术资源共享，技术精英相互连接等社群服务，为保证良好的交流氛围，请大家共同杜绝恶意营销的广告哦~
社群领域包涵：AI、Python、大数据、区块链及综合类，五类领域的技术交流栈供大家自行选择哦~
扫码添加李思思小姐姐，回复数字即可进入技术社群！
---------------------
作者：CSDNedu
来源：CSDN
原文：https://blog.csdn.net/CSDNedu/article/details/84327908
版权声明：本文为博主原创文章，转载请附上博文链接！</div>
<hr>
<div class="father">
<p class="child"></p>
</div>
</body>
</html>
二、内边距padding
1、内边距padding介绍
内边距就是边框与内容之间的间距，请看下图来理解：
2、内边距属性介绍
内边距具有4个属性，单位为像素px：
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
3、padding的简写方式
3.1、假如内边距的上下左右都是同样的间隔像素，简写如下：
padding：10px，代表上下左右间距都是10像素
3.2、假如上下间隔相同，左右间隔相同，简写如下：
padding：10px 20px（10px代表上下间隔为10像素，20px代表左右间隔为20像素，中间用空格隔开）
3.3、假如上下间隔不同，左右间隔相同，简写如下：
padding：10px 20px 30px（10px代表内上边距，20px代表内左右边距，30px代表内下边距，中间用空格隔开）
3.4、假如上下左右间隔都不同，简写如下：
padding：10px 20px 30px 30px（分别代表上、右、下、左方向的内边距，中间用空格隔开）
3.5、假如有三项方向的像素一致，有一个方向不同，简写如下：
padding：10px；padding-bottom：50px； （先设置四个方向都是10像素，然后单独再控制其中一个方向的像素 ）
具体实例如下：
<!DOCTYPE html>
<html>
<head>
<title>padding内边距</title>
<style type="text/css">
/*padding内边距*/
.box{width: 300px;min-height: 10px;background-color: #ccc;
/*内上边距*/
padding-top:10px;
/*内左边距*/
padding-left: 20px;
/*内右边距*/
padding-right: 30px;
/*内底边距*/
padding-bottom: 10px;
}
/*若内边距上下左右的像素一致*/
.box1{width: 300px;min-height: 10px;background-color: #ff6700;
padding: 30px;}
/*若上下间距相同，左右间距相同*/
.box2{width: 300px;min-height: 10px;background-color: green;
padding: 10px 20px;}
/*若上、下间距不同，左右间距相同*/
.box3{width: 300px;min-height: 10px;background-color: yellow;
padding: 10px 20px 30px;}
/*若上下左右间距都不同*/
.box4{width: 300px;min-height: 10px;background-color: blue;
padding: 10px 20px 30px 5px;}
</style>
</head>
<body>
<div class="box">
百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索
</div>
<hr>
<div class="box1">
百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索
</div>
<hr>
<div class="box2">
百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索
</div>
<hr>
<div class="box3">
百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索
</div>
<hr>
<div class="box4">
百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索百度搜索
</div>
</body>
</html>三、外边距margin
1、外边距margin介绍
外边距就是一个布局元素与其他元素之间的间距，看下图来理解：
2、外边距属性介绍
外边距具有四个属性，单位为像素px：
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
3、外边距auto用法
在进行margin外边距设置时，margin提供了一个参数，叫auto，它会使控制的元素在父级元素中始终处于中间位置（宽度的中间），同时也可以让元素相对与浏览器处于中间位置，同时会随着浏览器或者父级元素的增大或者缩小自动匹配与周围的左右外间距，始终保持居中
下面是实例：
<!DOCTYPE html>
<html>
<head>
<title>margin外边距</title>
<style type="text/css">
/*margin四个方向间距*/
.box1,.box2,.box3{width: 300px;height: 300px;background-color: #ff6700;}
/*为box2设置外边距*/
.box2{margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;}
/*margin的简写方式与padding相同*/
/*margin的auto方法，使得子级元素始终在父级元素宽度上的中间*/
/*1、元素与浏览器*/
.box4,.box5,.box6{width: 1000px;height: 300px;background-color: #ccc;}
.box5{margin: 20px auto;}
/*2、子级元素与父级元素*/
.block{width: 100px;height: 100px;background-color: red;
margin:0 auto;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<hr>
<div class="box4"></div>
<div class="box5">
<div class="block"></div>
</div>
<div class="box6"></div>
</body>
</html>4、外边距margin简写方式
外边距margin的简写方式与内边距padding的简写方式一致，请参考内边距padding简写方式
四、使用padding与margin需要注意的事项
第一、在我们进行网页设计时，body是自带了外边距与内边距的，所以我们需要先利用css将body的内外边距设置为0
body{padding:0px;margin:0px;}
第二、同时我们在使用标签时，也会自带padding和margin，如果有需要的话，可以设置内外边距为0px
第三、如上情况，可以使用通用选择器*{padding:0px;margin:0px;}来初始化所有标签的内外边距
第四、padding会增大元素的大小，若一个元素设置宽为200px，高为200px，假如设置了padding为20px，那么元素的大小为220px*220px，所以如果需要控制元素大小只能是200px*200px的话，那么在设置宽和高的时候，就只能设置180px、180px，需要将padding部分计算在内
第五、margin不会影响元素的大小
五、边框border
1、边框border属性介绍
边框的组成部分包含以下三个属性：
border-width：边框宽度，单位为number
border-color：边框颜色，可以是颜色值也可以设置为透明色（transparent）
border-style：边框样式，solid –实线/ dotted-点线 / dashed-虚线段
2、边框border简写格式
2.1、基本简写格式：
border：边框宽度 边框颜色 边框样式
border-top:1px solid red
2.2、如果只需要修改四个方向中某一个方向的border，可以如下写法：
border-top：1px solid red
border-bottom：1px solid red
border-left：1px solid red
border-right：1px solid red
2.3、如果需要改某个边的某一个值，可以如下写法：
border-top-color：red
以下是具体实例：代码中有写如何利用border实现绘制不同方向箭头的方法
<!DOCTYPE html>
<html>
<head>
<title>border边框</title>
<style type="text/css">
.box{width: 300px;height: 300px;background-color: #ccc;
/*border边框*/
/*border-width:边框宽度*/
border-width: 3px;
/*border-color:边框颜色*/
border-color: #ff6700;
/*border-style:边框样式:solid –实线/ dotted-点线 / dashed-虚线段*/
border-style: solid;}
/*border简写*/
.box1{width: 300px;height: 300px;background-color: #fff;
border: 5px #ff6700 dashed;}
/*border可以控制四个方向任意一个方向的border*/
.box2{width: 300px;height: 300px;background-color: #ff6700;
border-top:3px solid red;
border-right: 4px dotted blue;
border-bottom: 5px dashed yellow;
border-left: 6px solid green;}
/*border只修改四个方向任意一个方向的某一个值*/
.box3{width: 300px;height: 300px;background-color: #ff6700;
border: 10px red solid;
border-top-color: yellow;}
/*小诀窍：制作四个方向的小箭头,需要将边框颜色设置成透明色transparent*/
/*上-箭头*/
.arrow-top{width: 0px;height: 0px;border: 20px solid transparent;border-top-color: #000;}
/*下-箭头*/
.arrow-bottom{width: 0px;height: 0px;border: 20px solid transparent;border-bottom-color: yellow;}
/*左-箭头*/
.arrow-left{width: 0px;height: 0px;border: 20px solid transparent;border-left-color: #ff6700;}
/*右-箭头*/
.arrow-right{width: 0px;height: 0px;border: 20px solid transparent;border-right-color: red;}
</style>
</head>
<body>
<div class="box"></div>
<hr>
<div class="box1"></div>
<hr>
<div class="box2"></div>
<hr>
<div class="box3"></div>
<hr>
<div class="arrow-top"></div>
<hr>
<div class="arrow-bottom"></div>
<hr>
<div class="arrow-left"></div>
<hr>
<div class="arrow-right"></div>
</body>
</html>六、添加浮动float
1、float添加浮动介绍
当我们在使用div进行嵌套布局时，如果div嵌套了div，那么一个嵌套的div就会占据一整行，如果我们想要实现多个嵌套的div能够在一行显示，那么就需要使用浮动功能float
2、float属性介绍
float添加浮动具有三个属性：
float：left 向左浮动
float：right 向右浮动
float：none（默认值，元素不浮动）
以下是实例：
<!DOCTYPE html>
<html>
<head>
<title>float添加浮动</title>
<style type="text/css">
.box001{width: 500px;height: 500px;border: 3px solid red;}
/*在进行div嵌套div时，想要多个div在一行显示，需要进行float浮动控制*/
/*左浮动*/
.box001 .box1{width: 100px;height: 100px;background-color: green;float: left;}
.box001 .box2{width: 200px;height: 200px;background-color: blue;float: left;}
.box002{width: 500px;height: 500px;border: 3px solid red;}
/*右浮动*/
.box002 .box1{width: 100px;height: 100px;background-color: green;float: right;}
.box002 .box2{width: 200px;height: 200px;background-color: blue;float:right;}
</style>
</head>
<body>
<div class="box001">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<hr>
<div class="box002">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>
以下是实例：包含利用float来布局行布局元素以及列表的方法
<!DOCTYPE html>
<html>
<head>
<title>float具体使用实例</title>
<style type="text/css">
/*清除body的内外边距*/
*{padding: 0px;margin: 0px;}
.out{width: 1000px;height: 400px;border: 2px #ff6700 solid;}
/*同一行左右分栏布局*/
.box1{width: 525px;height: 350px;background-color: green;float: left;}
.box2{width: 425px;height: 350px;background-color: blue;float: right;}
/*列表实现多层同行显示布局,list-style是清除列表样式*/
.list{width: 360px;height: 360px;border: 2px #ff6700 solid;list-style: none;}
/*利用左浮动同一行显示3个元素，实现3*3显示内容，元素之间用margin间隔开*/
.list li{width: 100px;height:100px;background-color: yellow;float: left;margin: 10px;}
</style>
</head>
<body>
<!-- 同一行分栏布局 -->
<div class="out">
<div class="box1">左浮动布局</div>
<div class="box2">右浮动布局</div>
</div>
<hr>
<!-- 列表实现多层同行显示布局 -->
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
七、清除浮动clear
1、clear清除浮动介绍
clear：left 在指定元素的左侧不允许浮动元素或存在左浮动的元素（即指定的元素左侧不能被浮动元素压着）
clear：right 在指定元素的右侧不允许浮动元素或存在右浮动的元素（即指定的元素右侧不能被浮动元素压着）
clear：both 在指定元素的左右两侧均不允许浮动元素或存在左右浮动的元素（即指定的元素左右两侧不能被浮动元素压着）
注意：清除浮动clear方法不是给已经浮动的元素添加使用的，而是给没有进行浮动控制的元素使用的
以下是实例：
<!DOCTYPE html>
<html>
<head>
<title>clear清除浮动</title>
<style type="text/css">
.box001{width: 500px;height: 500px;border: 3px solid red;}
.box001 .box1{width: 100px;height: 100px;background-color: green;float: left;}
.box001 .box2{width: 200px;height: 200px;background-color: blue;float: right;}
/*注意：清除浮动clear方法不是给已经浮动的元素添加使用的，而是给没有进行浮动控制的元素使用的*/
/*在指定元素的左侧不允许浮动元素或存在左浮动的元素*/
.box001 .box3{width: 350px;height: 150px;background-color: #ff6700;clear:left;}
.box002{width: 500px;height: 500px;border: 3px solid red;}
.box002 .box1{width: 100px;height: 100px;background-color: green;float: left;}
.box002 .box2{width: 200px;height: 200px;background-color: blue;float: right;}
/*在指定元素的右侧不允许浮动元素或存在左浮动的元素*/
.box002 .box3{width: 350px;height: 150px;background-color: #ff6700;clear:right;}
.box003{width: 500px;height: 500px;border: 3px solid red;}
.box003 .box1{width: 100px;height: 100px;background-color: green;float: left;}
.box003 .box2{width: 200px;height: 200px;background-color: blue;float: right;}
/*在指定元素的左右侧不允许浮动元素或存在左浮动的元素*/
.box003 .box3{width: 350px;height: 150px;background-color: #ff6700;clear:both;}
</style>
</head>
<body>
<div class="box001">
<!-- 浮动元素 -->
<div class="box1">box1</div>
<div class="box2">box2</div>
<!-- 非浮动元素 -->
<div class="box3"></div>
</div>
<hr>
<div class="box002">
<!-- 浮动元素 -->
<div class="box1">box1</div>
<div class="box2">box2</div>
<!-- 非浮动元素 -->
<div class="box3"></div>
</div>
<hr>
<div class="box003">
<!-- 浮动元素 -->
<div class="box1">box1</div>
<div class="box2">box2</div>
<!-- 非浮动元素 -->
<div class="box3"></div>
</div>
</body>
</html>
2、clear的重要使用
当我们给子级设定为了浮动，那么我们一定要设置父级的高度height，如果没有设置的话， 父级无法装载浮动元素，会导致浮动元素脱离文档流，导致整个页面显示出现问题。
但如果我们想要父级在不设置高度的情况下，又能够自动装载子级的浮动元素，那么就需要在子级浮动元素的后面添加一个div，写法如下：
首先在style中定义一个选择器.clear{clear:both;}
其次在浮动子级元素后添加<div class=“clear”></div>
<!DOCTYPE html>
<html>
<head>
<title>clear清除浮动具体实例</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
/*父级没有定义高度*/
.list{width: 360px;border: 2px #ff6700 solid;list-style: none;}
/*若需要父级div自动装载子级浮动元素，需要在浮动元素后面添加div并清除浮动*/
.list li{width: 100px;height:100px;background-color: yellow;float: left;margin: 10px;}
/*定义清除浮动，方便调用*/
.clear{clear: both;}
</style>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<!-- 在浮动子级后面添加div并清除浮动 -->
<div class="clear"></div>
</ul>
</body>
</html>