视频资源：​​https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425​​

视频记录 136-161

网页布局过程

HTML5+CSS3 学习笔记 06_块元素

盒子模型组成

HTML5+CSS3 学习笔记 06_css3_02

HTML5+CSS3 学习笔记 06_内边距_03

边框 border

/* 实线边框 */
border-style: solid;
/* 虚线边框 */
border-style: dashed;
/* 点线边框 */
border-style: dotted;
border-color: blue;

边框复合型写法

border:5px solid blue

/*效果等同于下*/

border : 5px;
border-style: solid;
border-color: blue;
border-top: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;

//效果等同于上
border: 1px solid blue;;
border-top: 1px solid red;

表格细线边框

border-collapse: collapse;

#重叠的框会自动去取消重叠

边框会影响盒子大小

HTML5+CSS3 学习笔记 06_块元素_04

Padding: 盒子内容与边框的距离。

padding也会影响盒子实际大小。

HTML5+CSS3 学习笔记 06_html5_05

盒子如果已经有了宽度和高度，再指定内边框会撑大盒子。可以让weight/height减去内边距大小即可。

如果盒子本身没有指定weigh/height属性，此时padding不会撑开盒子大小。

HTML5+CSS3 学习笔记 06_内边距_06

div {
    height: 200px;
    width: 200px;
    background-color: blue;
}
div p {
    padding: 30px;
    background-color: skyblue;
}

<div><p></p></div>

#没有指定weigh/height属性，

h1 {
    /* 不指定宽度，默认与父亲一样宽。h1的父亲为body,宽度为body宽度。 */
    height: 200px;
    background-color: pink;
}

<body>
<h1></h1>
</body>
h1 {
    /* 不指定宽度，默认与父亲一样宽。h1的父亲为body,宽度为body宽度。 */
    height: 200px;
    background-color: pink;
    padding: 30px;
}

<body>
<h1></h1>
</body>

# 宽度没有变化，高度增加30px。宽度没有改变，仍然为1904px。

HTML5+CSS3 学习笔记 06_内边距_07

指定width属性之后，长度发生变化。1904px变成了1964px。

<style>
h1 {
    width: 100%;
    height: 200px;
    background-color: pink;
    padding: 30px;
}
</style>

<body>
<h1></h1>
</body>

HTML5+CSS3 学习笔记 06_css3_08

div {
    width: 300px;
    height: 100px;
    background-color: purple;
}
div p {
    padding: 30px;
    background-color: red;
}

<div>
    <p></p>
</div>

# p作为div的孩子，没有指定width/weight时，默认为父亲宽度，且高度不会撑开盒子。

HTML5+CSS3 学习笔记 06_html5_09

外边距 margin:控制盒子与盒子之间距离。

HTML5+CSS3 学习笔记 06_css3_10


外边距可以让盒子水平居中，需要满足2个条件


  • 盒子必须指定宽度width
  • 盒子左右外边距必须设置为auto
  • 对于行内元素、行内块元素无效。


span {
    margin: 0 auto;
}

<span></span> //无效
  • 针对于块元素


/* 第一种写法 */
margin-left: auto; margin-right: auto;
/* 第二种写法 */
margin: auto;
/* 开发常用写法 */
margin: 0 auto;
  • 行内或行内块元素水平居中，给其父亲添加text-align:center即可。
/* 行内元素或者行内块元素水平居中给其父元素添加 text-align: center;即可 */
div {
    width: 300px;
    height: 100px;
    background-color: purple;
    text-align: center;
}

<div>
    <img src="img/1.jpg" alt="Jack" />
</div>

外边距合并

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，则父元素会塌陷较大的外边距值。

HTML5+CSS3 学习笔记 06_块元素_11


解决方案


  • 方案一： 为父元素定义上边框

HTML5+CSS3 学习笔记 06_块元素_12


  • 方案二：为父元素定义上内边距

HTML5+CSS3 学习笔记 06_内边距_13

  • 方案三：为父元素添加overflow:hidden

HTML5+CSS3 学习笔记 06_内边距_14


清除内外边距

  网页元素很多都带有默认的内外边距，不同浏览器默认的也不一致。在布局之前，首先需要清除网页元素的内外边距。   

/*CSS的第一行代码*/
* {
    padding: 0; /*清除内边距*/
    margin: 0; /*清除外边距*/
}

注：行内元素尽量只设置左右的内外边距，上下内外边距一般不起效果。但是转换块级元素和行内块元素就可以了。

PS学习

HTML5+CSS3 学习笔记 06_块元素_15

HTML5+CSS3 学习笔记 06_外边距_16

实战练习

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        padding: 0; /*清除内边距*/
        margin: 0; /*清除外边距*/
    }
    body {
        background-color: #f5f5f5; /*页面背景颜色为灰色*/
    }
    a {
        color: #333; /*统一网页链接颜色*/
        text-decoration: none; /*取消链接下划线*/
    }
    .box {
        width: 298px;
        height: 415px;
        background-color: #fff; /*白色*/
        /* 让块级盒子水平居中对齐 */
        margin: 100px auto;
    }
    .box img {
        width: 100%; /*图片宽度超出盒子宽度，无法完全显示。*/
    }
    .review {
        height: 70px;
        font-size: 14px;
        margin-top: 30px;
        /* 没有指定width属性，padding不会撑开盒子宽度。指定了高度，所以不能指定padding的top值。 */
        padding: 0 28px;
       
    }
    .appraise {
        font-size: 12px;
        color: #b0b0b0;
        margin-top: 20px;
        padding: 0 28px;
    }
    .info {
        font-size: 14px;
        margin-top: 15px;
        padding: 0 28px;
    }
    .info h4 {
        display: inline-block; /*转换为行内块*/
        font-weight: 400; /*取消字体加粗*/
    }
    .info span {
        color: #ff6700;
    }
    .info em {
        font-style: normal; /*斜线改为竖线*/
        color: #ebe4e0;
        margin: 0 6px 0 15px;
    }
</style>
</head>
<body>
    <div class="box">
        <img src="1.jpg" alt="">
        <p class="review">米家飞行员太阳镜 Pro 椭圆框 渐变灰</p>
        <div class="appraise">不错不错</div>
        <div class="info">
            <!--h4属于块元素，自成1行-->
            <h4><a href="#">尼龙偏光，轻巧佩戴</a></h4>
            <em>|</em><!--倾斜的竖线-->
            <span>169元</span>
        </div>
    </div>
</body>
</html>

HTML5+CSS3 学习笔记 06_html5_17

HTML5+CSS3 学习笔记 06_外边距_18