✊总有人要成为第一，为什么不是你

2021年07月13日

工作重点

1 工作重点事项 进度 已完成
2 早上 (讲盒子模型) 已完成
- [x]

| | 3 | 下午 (讲盒子模型+练习) | 已完成 |
- [x]

| | 4 | 晚上(完成所有练习) | 已完成 |
- [x]

|

遇到的问题和解决思路

遇到的问题

  1. 在做练习时,遇见li前面的小图标


  2. 解决思路


/在每个li面前加载图片/
ul>li:not(:first-child)::before {
content: url(./dian.jpg);
/*用定位 设置位置/
position: relative;
left: -10px;
top: -5px;
}


  1. 今日总结

    (1)盒子的边框

    <!DOCTYPE html>











    (2)三角形例子

    <!DOCTYPE html>











    (3)圆角

    <!DOCTYPE html>





















    (4)内外边距

    <!DOCTYPE html>









    Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi ullam praesentium ipsam velit
    iusto in, officiis
    accusantium labore explicabo provident id reprehenderit amet commodi fugiat tempora atque, nostrum, esse quidem.

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem praesentium laudantium exercitationem
    fugit placeat, labore culpa maiores. Cumque praesentium exercitationem molestiae, aut excepturi molestias
    aspernatur maiores. Ratione soluta voluptatem dolorem!


    (5)外边距叠加

    <!DOCTYPE html>
















    (6)盒子模型

    <!DOCTYPE html>












盒子模型（CSS重点)

3盒子边框（border）

语法：
border : border-width || border-style || border-color

属性 作用
border-width 定义边框粗细，单位是px
border-style 边框的样式
border-color 边框颜色

边框属性—设置边框样式（border-style）
边框样式用于定义页面中边框的风格，常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

小提示：我们在开发中，经常把表单原本的边框去掉，然后添加任意的样式。（border: 0）

1.1 边框综合设置

border : border-width || border-style || border-color
例如：
border: 1px solid red; 没有顺序

1.2 盒子边框写法总结表

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

上边框 下边框 左边框 右边框
border-top-style:样式; border-bottom-style:样式; border-left-style:样式; border-right-style:样式;
border-top-width:宽度; border- bottom-width:宽度; border-left-width:宽度; border-right-width:宽度;
border-top-color:颜色; border- bottom-color:颜色; border-left-color:颜色; border-right-color:颜色;
border-top:宽度 样式 颜色; border-bottom:宽度 样式 颜色; border-left:宽度 样式 颜色; border-right:宽度 样式 颜色;

1.3 圆角边框(CSS3)

从此以后，我们的世界不只有矩形。radius 半径（距离）
语法格式：
border-radius: 左上角 右上角 右下角 左下角;

  • 其中每一个值可以为 数值或百分比的形式。
  • 技巧： 让一个正方形 变成圆圈 border-radius: 50%;
  • 以上效果图矩形的圆角， 就不要用 百分比了，因为百分比会是表示高度和宽度的一半。
  • 而我们这里矩形就只用 用 高度的一半就好了。精确单位。

1.4 border的三角形原理

当我们加大边框并且各个颜色不一样时，我们先来看看border的表现形式。
#box{
width:100px;
height:100px;
background:yellow;
border-top: 20px solid red;
border-right:20px solid black;
border-bottom:20px solid green;
border-left:20px solid blue;
}
border1.png
观察上图可以发现，border表现为梯形。当减小box的宽高时，会发生如下变化：
border2.png
从上图很容易看出，当box宽度降低到很小，也就是border的梯形的上边降到很小。所以想一想，当这一值降到0时，border就变成了三角形。如下图：
four.png
所以我们就可以通过将元素宽高设置为0，而通过控制border来得到想要的三角形了。

实现

将不需要方向的border设置为透明（transparent），就可以用来实现三角形了。比如想实现下三角形，就将border-left，border-bottom，border-right设置为transparent即可。
#box{
width:0px;
height:0px;
border-top: 20px solid red;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid transparent;
}
sanjiao.png

2. 内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

2.1 属性值设置

温馨提示： 后面跟几个数值表示的意思是不一样的。

值的个数 表达意思
1个值 padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值 padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值 padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值 padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

2.2 内盒尺寸计算（元素实际大小）

使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
/外盒尺寸计算（元素空间尺寸）/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/内盒尺寸计算（元素实际大小）/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）

注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3、如果一个盒子没有给定宽度或者说是继承了父亲的宽度，则padding 不会影响本盒子大小。

3. 外边距（margin）

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。

3.1 外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

  1. 必须是块级元素。
  2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;}

3.2 文字盒子居中区别

  1. 文字水平居中是 text-align: center
  2. 盒子水平居中 左右margin 改为 auto

text-align: center; / 文字居中水平 /
margin: 10px auto; / 盒子水平居中 左右margin 改为 auto 就阔以了 /

3.3 清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：
{
padding:0; / 清除内边距 /
margin:0; / 清除外边距 */
}
注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。
我们尽量不要给行内元素指定上下的内外边距就好了。

3.4 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

3.4.1 相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
www.png

解决方案： 避免就好了。

3.4.2 嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
n.png
解决方案：

  1. 可以为父元素定义1像素的上边框或上内边距。

  2. 可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。

    4. 插入图片和背景图片区别

  3. 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin

  4. 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

    img {
    width: 200px;/ 插入图片更改大小 width 和 height /
    height: 210px;
    margin-top: 30px; / 插入图片更改位置 可以用margin 或padding 盒模型 /
    margin-left: 50px; / 插入当图片也是一个盒子 /
    }

    div {
    width: 400px;
    height: 400px;
    border: 1px solid purple;
    background: #fff url(images/sun.jpg) no-repeat;
    background-position: 30px 50px; / 背景图片更改位置 我用 background-position /
    }

    5. 盒子模型布局稳定性

    开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？
    答案是： 其实他们大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。
    但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：
    按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
    width > padding > margin

原因：

  1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
  2. padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
  3. width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。

    6. CSS盒模型大小计算

    CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
    可以分成两种情况：
  • 1、box-sizing: content-box 盒子大小为 content (width/heigth)+ padding + border, content-box:此值为其默认值，其让元素维持W3C的标准Box Mode。

  • 2、box-sizing: border-box 盒子大小为 width/heigth 就是说 padding 和 border 是包含到width里面的。

    *我可以

    谈谈你对盒子模型的理解

  • 盒子模型的概念就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

  • 盒子模型的组成一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），内容与边框之间的距离元素的边框（border），元素的外边距（margin），边框与外部元素之间的距离四个部分，这四个部分一起构成了盒子模型。
  • 盒子模型的分类盒模型的分类（最重要的部分）盒模型分为 ： W3C标准盒子 、IE盒子

1.W3C标准盒子（content-box）：在这种盒模型下，我们所说的元素的 width ，实际上只包含 content
盒子总宽度 = margin + border + padding + width
2.IE盒子（border-box）：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。
在这种盒模型下，我们所说的元素的width ，实际上包含了 content + padding + border
盒子总宽度= margin + width

7. 盒子阴影

语法格式：
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
1498467567011.png

  1. 前两个属性是必须写的。其余的可以省略。
  2. 默认是外阴影 (outset) ，不用设置， 想要内阴影设为 inset 。
  3. X轴与Y轴如果有值，就改变了（正值 向右 向下）

div {
width: 200px;
height: 200px;
border: 10px solid red;
/ box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); /
/ box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； /
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}

自己总结

三角形案例:设置宽高为零 设置边框 然后将不需要的边框颜色设置为transparent

设置一个圆角边框时，先写垂直方向的属性(top/bottom),再写水平方向的属性(left/right)

元素的水平方向的布局：
元素在其父元素中水平方向的位置由以下几个属性共同决定“
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须要满足以下的等式
子元素
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）
- 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
- 如果将三个值都设置为auto，则外边距都是0，宽度最大
- 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
示例：
width:xxxpx;
margin:0 auto;

解决父子关系的外边距合并
（1） border: 1px aquamarine solid; (有弊端)
（2）padding: 1px; (有弊端)
（3）overflow: hidden; (有弊端)
（4）/* clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可
（给其父元素添加）
*/

.clearfix::before,
.clearfix::after{
content: ‘’;
display: table;
clear: both;
}

  1.      **标准盒子模型 **<br />**                box-sizing: content-box(默认值);**<br />**/*自己理解  内盒子 内容的width会加上padding和border的值，为总内盒子*/**<br />**                内盒子:width+padding+border**<br />**                 外盒子:width+padding+border+margin**<br />**                **<br />**          怪异盒子模型(IE盒子模型)**<br />** box-sizing: border-box;**<br />**/*自己理解  内盒子 width减去padding和border的值，其余的值为内容width的，为总内盒子*/**<br />**                    内盒子大小:width: content(width)+padding+border**<br />**                    外盒子大小:width+margin**

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
content-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框的大小
width 和 height 指的是内容区 和 内边距 和 边框的总大小