前端基础笔记5

# 二、CSS 盒模型

## 1.边框

围绕着内容和内填充区域的线

```html

        1.border-width:边框的宽度

        单位：像素

        注意：只写一个border-width设置不上边框的宽的，得写上边框的线型

        2.border-style：边框的线型

          1.solid 单实线

          2.double 双实线

          3.dashed 条状虚线

          4.dotted 点状边框

          5.none  没有边框

        3.border-color:边框的颜色

          1.关键词

          2.十六进制色值

          3.rgb()

          4.rgba()

          默认边框的颜色为元素本身的前景色

          4.复合写法

          例子：

          border-color: pink； 一个值：四个边框

          border-color: pink gold; 两个值：上下边框  左右边框

          border-color: pink gold greenyellow; 三个值：上边框 左右边框  下边框

          border-color: pink gold greenyellow purple;上边框 右边框 下边框 左边框(顺时针方向)

          border-width和border-style同样效果

        5.单独设置

        例子：

         /* 上边框 */

        border-top-width: 50px;

        border-top-style: solid;

        border-top-color: yellow;

         /* 下边框 */

        border-bottom-width: 50px;

        border-bottom-style: dashed;

        border-bottom-color: brown;

        单边框复合写法：

        border-left: 50px solid cyan;

        边框的宽度 边框的线型 边框的颜色

        6.边框的复合写法

        border:边框的宽度 边框的线型 边框的颜色

        border: 100px solid purple;

        7.去掉边框

        border:0;

        border:none;

```

利用边框实现三角形

```html

 用边框实现三角形的规律:

 盒子大小宽高为0

 要那个三角形，他的对边为none，他相邻的边框的颜色为透明色，transparent

 /* 上三角形

       实现上边三角形，对边为none，也就是下边框为none，左右边框的颜色为透明色

       

         */

        .box1 {

            width: 0;

            height: 0;

            /* border: 100px solid tomato;

            border-bottom: none;

            border-left-color: transparent;

            border-right-color: transparent; */

            border-top: 100px solid tomato;

            border-left: 100px solid transparent;

            border-right: 100px solid transparent;

        }

```

利用边框实现梯形

```html

 /* 用边框实现梯形的规律

        盒子大小不能为零

         要那个梯形，他的对边为none，他相邻的边框的颜色为透明色，transparent */

        /* 上梯形

       

        实现上梯形，对边为none，也就是下边框为none，左右边框的颜色为透明色 */

        .box1 {

            width: 100px;

            height: 100px;

            /* background-color: brown; */

            /* border: 100px solid red;

            border-color: tomato purple blue olivedrab;

            border-bottom: none;

            border-left-color: transparent;

            border-right-color: transparent; */

            border-top: 100px solid tomato;

            border-left: 100px solid transparent;

            border-right: 100px solid transparent;

 

        }

        /* 左梯形

        实现左梯形，对边为none，也就是右边框为none，上下边框的颜色为透明色

         */

        .box2 {

            width: 100px;

            height: 100px;

            /* background-color: brown; */

            /* border: 100px solid red;

            border-color: tomato purple blue olivedrab;

            border-right: none;

            border-top-color: transparent;

            border-bottom-color: transparent; */

            border-left: 100px solid olivedrab;

            border-top: 100px solid transparent;

            border-bottom: 100px solid transparent;

        }

```

## 2.外边距问题及解决方法

#### 1、兄弟关系外间距塌陷问题


```html

兄弟关系外间距塌陷问题

        现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；

        两个值一样大，取当前值

        两个值不同，取较大值

        原因：并列关系的两个元素共用了一个外间距区域

        解决办法：

        分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden'

         .box1 {

            width: 100px;

            height: 100px;

            background-color: yellow;

            margin-bottom: 50px;

        }

        .box2 {

            width: 100px;

            height: 100px;

            background-color: red;

            margin-top: 100px;

 

        }

        .father1,

        .father2 {

            overflow: hidden;

        }

     <div class="father1">

        <div class="box1"></div>

    </div>

    <div class="father2">

        <div class="box2"></div>

    </div>

```

#### 2、父子关系外间距塌陷


```html

父子关系外间距塌陷

       现象：

       1.元素嵌套关系，子元素的margin-top值会叠加给父元素；

       2.如果父元素也有margin-top值，会与子元素的margin-top值合并，取两者较大值；

       原因：

       父元素和子元素公用一个上外边距区域

       解决方法：

       1.为父元素设置上边框或者上填充

       2.为父元素设置overflo：hidden；

       3.转换思路，巧用padding，规避margin

        .father {

            width: 200px;

            height: 200px;

            background-color: tomato;

            margin-top: 100px;

            /* border-top: 2px solid royalblue;

            padding-top: 1px; */

            overflow: hidden;

        }

        .son {

            width: 100px;

            height: 100px;

            background: blue;

            margin-top: 50px;

        }

        .father1 {

            width: 200px;

            height: 200px;

            background-color: purple;

            padding-top: 20px;

        }

        .son1 {

            width: 100px;

            height: 100px;

            background: pink;

            /* padding-top: 10px; */

        }

   <div class="father">

        <div class="son"></div>

    </div>

    <hr>

    <div class="father1">

        <div class="son1"></div>

    </div>

```

# 三、overflow详解

概述：溢出元素内容区的内容会如何处理

## 取值

  overflow: visible;溢出显示，默认值

  overflow: hidden;溢出隐藏

  overflow: scroll;溢出显示滚动条，横向和纵向滚动条都显示

  overflow: auto;自动，内容溢出时，显示滚动条

​     overflow-x 只包括水平方向。

​    overflow-y 只包括垂直方向

```html

 body{

            /* overflow:hidden ; */

            /* overflow-x 只包括水平方向。

                overflow-y 只包括垂直方向。 */

            overflow-x: hidden;

            overflow-x: visible;

            overflow-x: scroll;

            overflow-x: auto;

            overflow-y: hidden;

            overflow-y: visible;

            overflow-y: scroll;

            overflow-y: auto;

        }

<img src="./images/yk.png" alt="">

```

## 应用

- 产品描述的溢出隐藏


- 模块溢出显示滚动条


# 四、CSS背景

CSS 背景属性用于定义 HTML 元素的背景，通过背景属性我们可以定义元素的背景颜

色、背景图片、背景图片的平铺方式和显示位置等。

### 1、background-color

background-color 属性，设置元素的背景颜色。

#### 常用的值

- color_name 规定颜色值为颜色名称的背景颜色（比如 red）

- hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。

- rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。

- transparent 默认。背景颜色为透明。

> 提示：背景应用于由内容和内边距、边框组成的区域

### 2、background -image

background-image 属性，为元素设置背景图像。

> background-image:url(" 图片资源路径 ");

#### 常用的值

- url(‘URL’) 指向图像的路径。

- none 默认值。不显示背景图像。

> 元素的背景默认绘制区域包括内容，内边距和边框。

>

> 背景图片的占位区域：content + padding + border

>

> 默认值，背景图像位于元素的左上角，并在水平和垂直方向上重复。

>

> 我们也可以通过 background-repeat 属性可以改变背景图像的平铺方式。

###  3、background -repeat

background-repeat 属性，设置是否或如何重复背景图像。

#### 常用的值

- repeat 默认。背景图像将在垂直方向和水平方向重复。

- repeat-x 背景图像将在水平方向重复。

- repeat-y 背景图像将在垂直方向重复。

- no-repeat 背景图像将仅显示一次。

### 4、background -position

background-position 属性，设置背景图像（由 background-image 定义）的起始位置。

> 语法：background-position: xpos  ypos;

​ 一般来说它有两个值：第一个值表示水平位置，第二个值表示垂直位置。如果仅规定

了一个值，另一个值将是 50%。

#### 取值

- 关键字：top、bottom、left、right 和 center ;

  指定图像放置于元素内边距区域的位置，一个对应水平方向，另一个对应垂直方向。

  左上角为：left top;

- 长度值

  指定图像相对于元素内边距区的偏移量。

固定的px值,可以为负值 正值向右向下 负值向左向上

- 百分比

- 指定图像相对于元素内边距区的偏移量。

- 百分比，是以父元素宽高度为参考的

- 左上角是 0% 0%；右下角是 100% 100%。

  如果设置为 50% 50%，图像的中心点将与元素的中心点对齐显示。

### background简写

background是背景复合属性，在一个声明中设置所有背景属性。

> 语法：background:bg-color bg-image bg-repeat bg-position;

```

background: red url(“bgimage.jpg”) no-repeat left top;

```

- 当使用简写属性时，属性值的顺序为：:

  - background-color

  - background-image

  - background-repeat

  - background-position

如果某个属性不需要设置，可以省略。