寒假提升｜ Day6 CSS 第四部分 #635

2022-12-19T09:49:55Z

giscus[bot]
bot Dec 19, 2022

寒假提升｜ Day6 CSS 第四部分

Coding Blog

https://icodeq.com/2022/6fce06b057b4/

Aueve · 2022-12-19T16:56:19Z

Aueve
Dec 19, 2022 — with giscus

Day06 作业布置

一. 完成课堂所有的代码

二. 写出盒子模型包含的内容以及如何设置

盒子模型的四边
内容-高度和宽度
边框
- 外边框(marign)
- 内边框(padding)
边框样式的设计

三. 说说你对margin的传递和折叠的理解

左右不会折叠

上下会进行折叠

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

五. 整理box-sizing的作用，以及content-box和border-box的区别

box-sizing用来设置盒子模型中宽高的行为
content-box
- padding、border都布置在width、height外边
border-box
- padding、border都布置在width、height里边

content-box:内容盒子

border-box：边框盒子

一个是width的实际设置宽度=content的宽度+border的宽度+padding的宽度

一个是width的实际设置宽度=你设置的width的宽度不会因为内容而被撑大

六. 说出元素水平居中的方案以及对应的场景

需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）

七. 练习background-position和background-size（为精灵图做准备）

八. 找出三个盒子模型的综合案例进行练习

案例一：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    .btn{
      display: inline-block;
      width: 70px;
      height: 25px;
      font-size: 12px;
     
      text-align: center;
      border-radius: 13px;
      line-height: 25px;
      
    }
    .new{
      color: #fff;
      background-color: #e1251b;
    }
    .vip{
      color: #e5d790;
      background-color: #363634;
    }
  </style>
</head>
<body>
  <a class="btn new" href="https://xinren.jd.com/?channel=99#/home" target="_blank">新人福利</a>
  <a class="btn vip" href="https://passport.jd.com/new/login.aspx" target="_blank">PLUS会员</a>
</body>
</html>

案例二：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/demo02.css">
  <style>
    body{
      text-align: center;
    }
  </style>
</head>
<body>
  <a class="album" href="https://www.mi.com/redminote11">
    <div class="item">
      <img src="../图片资源/mi1.webp" alt="">
      <h3 class="title">Rendmi Note 11 5G</h3>
      <p class="desc">三星 OLED 护眼屏｜骁龙 5G 芯｜5000mAh 电量</p>
      <div class="price">
        <span class="new-price">9.9元起</span>
        <span class="old-price">1199元</span>
      </div>
    </div>

  </a>
</body>
</html>

案例三：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    a{
      display: inline-block;
      color: #888;
    }
    .item{
      width: 300px;
      margin: 0 auto;

    }
    .item .album img{
      border-radius: 8px;
      width: 100%;

    }

    .item .info p{
      font-size: 18px;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .item .anchor{
      color: #888;
      margin-top: 20px;
    }

    .item .info .anchor::before{
      content: url(../图片资源/widget-up.svg);
      display: inline-block;
      width: 18px;
      height: 18px;
      position: relative;
      top: 1px;
    }

  </style>
</head>
<body>
  
<div class="item">
  <div class="album">
    <a href="https://www.bilibili.com/video/BV1SP411A7Lv/?spm_id_from=333.1007.tianma.4-3-14.click"><img src="../图片资源/法外狂徒张三.webp" alt=""></a>
  </div>
  <div class="info">
    <p>"我肯定在几百年前判过你的刑""我肯定在几百年前判过你的刑""我肯定在几百年前判过你的刑""我肯定在几百年前判过你的刑"</p>
    <div class="anchor">
      <a href="https://space.bilibili.com/16054375?spm_id_from=333.1007.tianma.4-3-14.click">
        <span class="nickname">自动鬼畜的WZ</span>
        <span class="time">11-1</span>
      </a>
    </div>
  </div>

</div>
</body>
</html>

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

好棒啊，好详细每天都有在认真坚持好厉害

Future330 · 2022-12-20T07:23:19Z

Future330
Dec 20, 2022

一.

二. 写出盒子模型包含的内容以及如何设置

盒子模型里包含

内容
- 通过宽度和高度设置
内边距
- 通过padding设置
- padding: padding-top padding-right padding-bottom padding-left;
边框
- 通过border设置
- border: border-width border-style border-color
外边距
- 通过margin设置
- margin: margin-top margin-right margin-bottom margin-left

三. 说说你对margin的传递和折叠的理解

margin的传递一般是父子块元素之间,有margin-top传递,margin-bottom传递.

margin-top传递: 当块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递:当块级元素的底部线和父元素的底部线重叠，那么这个块级元素的margin-bottom值会传递给父元素

折叠: 指的是垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin.

它有两个兄弟块级元素之间的上下margin的折叠,也有父子块元素之间的margin折叠

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

上下会被撑起来,但是不占空间

五. 整理box-sizing的作用，以及content-box和border-box的区别

box-sizing用来设置盒子模型中宽高的行为
content-box: padding、border都布置在width、height外边
border-box: padding、border都布置在width、height里边

六. 说出元素水平居中的方案以及对应的场景

行内块元素(包括inline-block元素)
- 水平居中：在父元素中设置text-align: center
块级元素
- 水平居中:margin: 0 auto;

七.案例.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    .all {
      display: inline-block;
      width: 70px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 13px;
    }
    .new {
      background-color: #f00;
      color: #fff;
    }
    .vip {
      background-color: #363634;
      color: #e5d790;
    }
  </style>
</head>
<body>
  <a class=" all new" href="https://xinren.jd.com/?channel=99#/home" target="_blank">新人登陆</a>
  <a class=" all vip" href="https://passport.jd.com/new/login.aspx?" target="_blank">PLUS会员</a>
</body>
</html>

2.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <style>
    .item {
      display: inline-block;
      width: 240px;
      height: 250px;
      background-color: #fff;
      text-align: center;
      box-sizing: border-box;
    }
    .item img {
      width: 160px;
      height: 160px;
    }
    .desc {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #999;
      margin-top: 5px;
    }
    .title {
      margin-top: 5px;
    }
    .price {
      margin-right:75px;
    }
    .new-price {
      color: red;
      font-size: 18px;
    }
    .old-price {
      color: #999;
      text-decoration: line-through;
    }
    .speak {
      color: blue;
      margin-right: 180px;
    }
  </style>
</head>
<body>
  <a class="item" href="https://item.jd.com/100028056854.html">
    <img src="images\mac.jpg" alt="">
    <h3 class="title">MacBook pro</h3>
    <div class="price">
      <span class="new-price">￥11499.00</span>
      <span class="old-price">￥14999.00</span>
    </div>
    <p class="desc">
      Apple MacBook Pro 14英寸 M1 Pro芯片(8核中央处理器 14核图形处理器) 16G 512G 深空灰 笔记本 MKGP3CH/A
    </p>
    <span class="speak">10万+评论</span>
  </a>
</body>
</html>

3.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a {
      text-decoration:none;
      display: block;
    }
    .ball {
      width: 300px;
      margin: 0 auto;
    }
    .ball .kun img {
      width: 100%;
      border-radius: 10px;
    }
    .desc .ikun {
      font-size: 12px;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: #000;
    }
    .desc .author .name {
      color: #999;
      font-size: 2px;
      margin-top: 1px;
    }
    .author .name::before {
      content: url(./images/widget-up.svg);
      display: inline-block;
      width: 16px;
      height: 16px;
      position: relative;
      top: 2px;
    }
  </style>
</head>
<body>
  <div class="ball">
    <div class="kun">
      <a href="https://www.bilibili.com/video/BV1QG411N7Bt/?spm_id_from=333.1073.sub_channel.latest_video.click">
      <img src="./images/kun.webp" alt="">
      </a>
    </div>
      <div class="desc">
        <a class="ikun" href="https://www.bilibili.com/video/BV1QG411N7Bt/?spm_id_from=333.1073.sub_channel.latest_video.click">
        解说坤坤对阵普洱！仅仅几个集锦坤坤得分已经上双解说坤坤对阵普洱！仅仅几个集锦坤坤得分已经上双解说坤坤对阵普洱！仅仅几个集锦坤坤得分已经上双解说坤坤对阵普洱！仅仅几个集锦坤坤得分已经上双
        </a>
      <a class="author" href="https://www.bilibili.com/video/BV1QG411N7Bt/?spm_id_from=333.1073.sub_channel.latest_video.click">
        <span class="name">篮球体育之家 · 12-13</span>
      </a>
      </div>
  </div>
</body>
</html>

0 replies

penndu · 2022-12-20T17:15:01Z

penndu
Dec 20, 2022 — with giscus

日常来访！

0 replies

wslsy12 · 2022-12-21T04:55:25Z

wslsy12
Dec 21, 2022 — with giscus

第六天简答

二. 写出盒子模型包含的内容以及如何设置

盒子模型里包含

内容

通过宽度和高度设置

内边距

通过padding设置
padding: padding-top padding-right padding-bottom padding-left;

边框

通过border设置
border: border-width border-style border-color

外边距

通过margin设置
margin: margin-top margin-right margin-bottom margin-left

三. 说说你对margin的传递和折叠的理解

margin的传递一般是父子块元素之间,有margin-top传递,margin-bottom传递.

margin-top传递: 当块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递:当块级元素的底部线和父元素的底部线重叠，那么这个块级元素的margin-bottom值会传递给父元素

折叠: 指的是垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin.

它有两个兄弟块级元素之间的上下margin的折叠,也有父子块元素之间的margin折叠

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

上下会被撑起来,但是不占空间

五. 整理box-sizing的作用，以及content-box和border-box的区别

box-sizing用来设置盒子模型中宽高的行为

content-box: padding、border都布置在width、height外边

border-box: padding、border都布置在width、height里边

六. 说出元素水平居中的方案以及对应的场景

行内块元素(包括inline-block元素)

水平居中：在父元素中设置text-align: center

块级元素

水平居中:margin:0 auto;

0 replies

W-princess · 2022-12-22T01:04:40Z

W-princess
Dec 22, 2022 — with giscus

一. 完成课堂所有的代码

二. 写出盒子模型包含的内容以及如何设置

盒子模型的四边

盒子模型里包含

内容
- 通过宽度和高度设置
内边距
- 通过padding设置
- padding: padding-top padding-right padding-bottom padding-left;
边框
- 通过border设置
- border: border-width border-style border-color
外边距
- 通过margin设置
- margin: margin-top margin-right margin-bottom margin-left
  
  三. 说说你对margin的传递和折叠的理解
  
  margin的传递一般是父子块元素之间,有margin-top传递,margin-bottom传递.
  - margin-top传递: 当块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
  - margin-bottom传递:当块级元素的底部线和父元素的底部线重叠，那么这个块级元素的margin-bottom值会传递给父元素
  折叠: 指的是垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin.
  
  它有两个兄弟块级元素之间的上下margin的折叠,也有父子块元素之间的margin折叠
  
  四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？
  
  上下会被撑起来,但是不占空间
  
  五. 整理box-sizing的作用，以及content-box和border-box的区别
  
  box-sizing用来设置盒子模型中宽高的行为
  
  content-box: padding、border都布置在width、height外边
  
  border-box: padding、border都布置在width、height里边
  
  六. 说出元素水平居中的方案以及对应的场景
  
  行内块元素(包括inline-block元素)
  - 水平居中：在父元素中设置text-align: center
  块级元素
  - 水平居中:margin:0 auto;

0 replies

Wanderlus · 2022-12-23T07:15:08Z

Wanderlus
Dec 23, 2022 — with giscus

二. 写出盒子模型包含的内容以及如何设置

盒子模型里包含

内容

通过宽度和高度设置

内边距

通过padding设置
padding: padding-top padding-right padding-bottom padding-left;

边框

通过border设置
border: border-width border-style border-color

外边距

通过margin设置
margin: margin-top margin-right margin-bottom margin-left

三. 说说你对margin的传递和折叠的理解

margin的传递一般是父子块元素之间,有margin-top传递,margin-bottom传递.

margin-top传递: 当块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递:当块级元素的底部线和父元素的底部线重叠，那么这个块级元素的margin-bottom值会传递给父元素

折叠: 指的是垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin.

它有两个兄弟块级元素之间的上下margin的折叠,也有父子块元素之间的margin折叠

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

上下会被撑起来,但是不占空间

五. 整理box-sizing的作用，以及content-box和border-box的区别

box-sizing用来设置盒子模型中宽高的行为

content-box: padding、border都布置在width、height外边

border-box: padding、border都布置在width、height里边

六. 说出元素水平居中的方案以及对应的场景

行内块元素(包括inline-block元素)

水平居中：在父元素中设置text-align: center

块级元素

水平居中:margin:0 auto;

0 replies

Beeyll · 2022-12-23T14:35:11Z

Beeyll
Dec 23, 2022 — with giscus

一. 完成课堂所有的代码

二. 写出盒子模型包含的内容以及如何设置

1.宽度，高度->width,height

2.内边距padding-->padding-top padding-right padding-bottom padding-left

3.外边距margin-->margin-top margin-right margin-bottom margin-left

4.边框border

例如：border:2px soild blue;

三. 说说你对margin的传递和折叠的理解

margin的传递指的是父盒子和子盒子在上边缘或下边缘重合时，父盒子会随着子盒子设置的外边距移动(传递只出现在上下，没有左右；底部有固定条件：高为auto，底部重合)

margin的折叠设置上下两个盒子时，两者之间的间距不会向左右一样设置多大就多大，而是只显示较大的那个数值

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

上下会被撑起来，但是不会占用空间

五. 整理box-sizing的作用，以及content-box和border-box的区别

box-sizing用来设置盒子的宽高；

content-box：

可以说是内容盒子，设置的padding和border均在外面（会让盒子看上去比设置的宽高更大）。

border-box:

可以说是边框盒子，设置的padding和border均在里面（让盒子看上去和设置的宽高一样，不会被设置的内容撑大）。

六. 说出元素水平居中的方案以及对应的场景

行内级元素

水平居中：text-align:center
块级元素

水平居中：margin：0 auto；

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

寒假提升｜ Day6 CSS 第四部分 #635

Uh oh!

{{title}}

Uh oh!

Replies: 6 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

三. 说说你对margin的传递和折叠的理解

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

五. 整理box-sizing的作用，以及content-box和border-box的区别

六. 说出元素水平居中的方案以及对应的场景

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

寒假提升 ｜ Day6 CSS 第四部分 #635

Uh oh!

giscus[bot] bot Dec 19, 2022

寒假提升 ｜ Day6 CSS 第四部分

Replies: 6 comments · 1 reply

Uh oh!

Aueve Dec 19, 2022 — with giscus

Day06 作业布置

一. 完成课堂所有的代码

二. 写出盒子模型包含的内容以及如何设置

三. 说说你对margin的传递和折叠的理解

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

五. 整理box-sizing的作用，以及content-box和border-box的区别

六. 说出元素水平居中的方案以及对应的场景

七. 练习background-position和background-size（为精灵图做准备）

八. 找出三个盒子模型的综合案例进行练习

Uh oh!

zkeq Dec 20, 2022 — with giscus Maintainer

Uh oh!

Future330 Dec 20, 2022

一.

二. 写出盒子模型包含的内容以及如何设置

三. 说说你对margin的传递和折叠的理解

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

五. 整理box-sizing的作用，以及content-box和border-box的区别

六. 说出元素水平居中的方案以及对应的场景

七.案例.

Uh oh!

penndu Dec 20, 2022 — with giscus

Uh oh!

wslsy12 Dec 21, 2022 — with giscus

第六天简答

二. 写出盒子模型包含的内容以及如何设置

三. 说说你对margin的传递和折叠的理解

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

五. 整理box-sizing的作用，以及content-box和border-box的区别

六. 说出元素水平居中的方案以及对应的场景

Uh oh!

W-princess Dec 22, 2022 — with giscus

一. 完成课堂所有的代码

二. 写出盒子模型包含的内容以及如何设置

三. 说说你对margin的传递和折叠的理解

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

五. 整理box-sizing的作用，以及content-box和border-box的区别

六. 说出元素水平居中的方案以及对应的场景

Uh oh!

Wanderlus Dec 23, 2022 — with giscus

二. 写出盒子模型包含的内容以及如何设置

三. 说说你对margin的传递和折叠的理解

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

五. 整理box-sizing的作用，以及content-box和border-box的区别

六. 说出元素水平居中的方案以及对应的场景

Uh oh!

Beeyll Dec 23, 2022 — with giscus

一. 完成课堂所有的代码

二. 写出盒子模型包含的内容以及如何设置

三. 说说你对margin的传递和折叠的理解

四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？

五. 整理box-sizing的作用，以及content-box和border-box的区别

六. 说出元素水平居中的方案以及对应的场景

寒假提升｜ Day6 CSS 第四部分 #635

giscus[bot]
bot Dec 19, 2022

寒假提升｜ Day6 CSS 第四部分

Replies: 6 comments 1 reply

Aueve
Dec 19, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

Future330
Dec 20, 2022

penndu
Dec 20, 2022 — with giscus

wslsy12
Dec 21, 2022 — with giscus

W-princess
Dec 22, 2022 — with giscus

Wanderlus
Dec 23, 2022 — with giscus

Beeyll
Dec 23, 2022 — with giscus