[第五季]12.CSS内外边距样式

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

①这个很简单,搞个大div1,两个小div,分别是div2和div3
小的div分别设置,左边距右边距上边距下边距.
注意这里设置的是div2和div3
②这个也一样的,搞个大的div,里面单元格内部的左边距,右边距,上边距和下边距.

5.自测代码

这个基本不用自测,太简单了.

2.课堂笔记

外边距样式1.外边距设置①设置两个嵌套的div,分别是div1和div2,用iddiv1设置高宽500,背景白色边框3d凹陷 30像素,然后②div2,300*300,背景黄色,边框都 是一样的.③移开100,设置左边,100pxmargin-top:100px;margin-left:100px;(4)设置和下端的距离margin-bottom:100px,这个不能设置字块与夫块的距离.在写个div3可以看到这个意思是底块和底块之间的距离变成了50px(5)不用一个一个去设置,可以一次设置四个方向的间距,marginmargin 四个参数：上、右、下、左 三个参数：上、左右、下 两个参数  上下、左右第一个框,上下左右距离是100margin:100px 100px;两个参数.#div1{    width:1000px;    height:1000px;    background-color:white;    border:groove 30px red;}#div2{    width:300px;    height:300px;    background-color:yellow;    border:groove 30px red;    /*margin-top:100px;    margin-left:100px;*/    margin:100px 100px;}#div3{    width:100px;    height:100px;    background-color:yellow;    border:groove 30px red;}2.内边距设置(1)设置文字上边距为100px.padding-top:100px;(2)设置左边距    padding-top:100px;    padding-left:30px;    padding-right:30px;(3)和外边距设置是一样的,可以有2,3,4个参数的区别.#div1{    width:1000px;    height:1000px;    background-color:white;    border:groove 30px red;    padding-top:100px;    padding-left:30px;    padding-right:30px;}padding四个参数 上 右 下 左三个参数 上 左右 下两个参数 上下 左右  

3.课程效果图

1.代码

外边距代码

#div1{    width:1000px;    height:1000px;    background-color:white;    border:groove 30px red;}#div2{    width:300px;    height:300px;    background-color:yellow;    border:groove 30px red;    /*margin-top:100px;    margin-left:100px;*/    margin:100px 100px;}#div3{    width:100px;    height:100px;    background-color:yellow;    border:groove 30px red;}

内边距代码

#div1{    width:1000px;    height:1000px;    background-color:white;    border:groove 30px red;    padding-top:100px;    padding-left:30px;    padding-right:30px;}