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

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

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

5.自测代码

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

2.课堂笔记

外边距样式
1.外边距设置
①设置两个嵌套的div,分别是div1和div2,用id
div1设置高宽500,背景白色
边框3d凹陷 30像素,然后
②div2,300*300,背景黄色,边框都 是一样的.
③移开100,设置左边,100px
margin-top:100px;
margin-left:100px;
(4)设置和下端的距离
margin-bottom:100px,这个不能设置字块与夫块的距离.
在写个div3
可以看到这个意思是底块和底块之间的距离变成了50px
(5)不用一个一个去设置,可以一次设置四个方向的间距,margin
margin

 四个参数：上、右、下、左
 三个参数：上、左右、下
 两个参数  上下、左右
第一个框,上下左右距离是100
margin: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;
}