(2) 元素溢出

子元素的内容超过了父元素的内容，也叫做溢出，它是元素溢出。

2. 溢出属性和值

• overflow:visible;默认超出依然显示

• overflow:hidden;溢出不显示

• overflow:scroll;溢出出现滚动条，不溢出滚动条轨道也默认存在

• overflow:auto;溢出出现滚动条，不溢出滚动条不存在

• overflow-x x轴方向滚动条 overflow-x:hidden/auto

• overflow-y y轴方向滚动条overflow-y:hidden/auto

div{
 width:200px;
 height:200px;
 background-color:yellow;
 /*溢出不显示*/
 overflow:hidden;
 /*溢出出现滚动条，不溢出滚动条轨道也默认存在*/
 overflow:scroll;
 /*溢出出现滚动条，不溢出滚动条不存在*/
 overflow:auto;
}

八、圆角

网页圆角按钮，圆角的效果可以提高用户体验，尖角感觉不友好，因此css3出现了元素圆角的属性

1. 圆角的属性

例子：radius.html整体圆角，分别设置1，2，3，4个值，长方形的百分比圆角为什么会不规则

• boder-radius 圆角-半径

• 圆角半径的值是一个长度值，可以使用px、pt、em、rem、%等

• 长度值越大圆角半径越大

• 值的分配

  • 1个值代表：四个角

  • 2个值代表：左上、右下

  • 3个值代表：左上、右上左下、右下

  • 4个值代表：左上、右上、右下、左下顺时针

  • 两组值,共8个值，x轴/y轴

div {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 10px;
  border-radius: 20px;
  border-radius: 20px 50px;
  border-radius: 20px 50px 40px;
  border-radius: 20px 30px 140px 50px; 
  border-radius: 10px/40px;
}

2. 元素的四个角

• border-top-left-radius 左上角

• border-top-right-radius 右上角

• border-bottom-right-radius 右下角

• border-bottom-left-radius 左下角

div {
  width: 200px;
  height: 200px;
  background-color: red;
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

3. 圆角的极限

圆角的值是从顶点向当前轴方向延展多少像素，然后画出水平和垂直的轴，轴心是原点画一条弧线连接两个点。

最大值是边的一半，当值大于边长度50%的时候就不会有变化了。设置一个角的时候，最大值是当前边的100%。

/* 圆形 */
.div1{
 width:200px;
 height:200px;
 background-color:red;
 border-radius:50%;
}
/* 椭圆 */
.div2{
 width:400px;
 height:200px;
 background-color:blue;
 border-radius:50%;
}

九、盒子阴影

1.盒子阴影的属性

使用空格分隔每个值，先有x轴和y轴的偏移（必写），再有模糊程度，阴影的扩展大小，颜色，内外阴影（默认外阴影）

• 第一个值和第二个值代表： x轴上的偏移量 和y轴上的偏移量（正负值）。

• 第三个值代表：模糊半径的大小（羽化）不允许负值。

• 第四个值代表：扩展半径的大小，向四周扩散相等的大小,正值放大，负值缩小。

• 第五个值代表：颜色值。

• 第六个值（可选）代表：阴影向内inset：默认阴影向外扩散。

box-shadow:
取值：h-shadow  v-shadow  blur spread color
h-shadow  水平方向的阴影偏移
v-shadow  垂直方向的阴影偏移
blur      阴影模糊距离
spread    阴影尺寸
color     阴影颜色
outset    默认值

2. 多阴影

多个阴影以逗号分隔列出的时候，他们从前到后依次被覆盖，定义越前面的阴影有越高的层级，会覆盖在后面定义的阴影之上。

.d2 {
   /*多层*/
  box-shadow: 0 0 0 10px red, 0 0 0 20px blue, 0 0 0 30px green;
}
.d3 {
  /*双色括号*/
  box-shadow: -40px -40px 0 -20px red, 40px 40px 0 -20px blue;
}

• 盒子阴影可以设置多层

• 每一个阴影效果为一组，中间用逗号分隔阴影组

十、轮廓

轮廓常出现在表单输入或者选择的部分，提醒用户你正在与它交互，位于边框边缘的外围，可起到突出元素的作用。 outline 与 border相似同样可以分成三个属性宽度，样式，颜色，但常用的用法是需要将原有的轮廓线去除，因此使用简写即可。

• outline属性

• 简写outline:width style color;（属性值和边框一样的写法）

• input标签有默认的轮廓线，清空轮廓线input {outline: none;} 或 {outline: 0;}

在边框的外围的一圈线条，被称为边框的边框
去除轮廓：{outline: none;}或 {outline: 0;}
去除边框：boder：none/0 

十一、盒子模型(框模型)

1. 盒尺寸四大家族

每个元素的盒模型都包括四个部分。包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。

• 一个元素实际占地宽度： 左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

• 一个元素实际占地高度： 上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

2. 元素内容

元素的内容可以是元素内的文字，也可以是元素的宽度和高度，大部分内联元素设置宽高无效，只能依靠内容撑开，因此内容就是内联元素中的文字。

(1) 内联元素盒模型

内联元素的宽高是auto，宽度高度只会一直随内容的宽度高度在同步变化。设置上下内边距和外边距无效。

• 宽度高度是auto，靠内容撑开

• 设置宽度高度无效

• 设置上下内外边距无效

• 排列方式，从左至右

(2) 块级元素盒模型

• 块级元素就可以设置宽度和高度，

• 只有文字内容不设置宽度高度，宽度为父元素的一行，高度为内容撑开的高度。

• 宽度高度可以设置

• 内外边距设置均有效果

• 排列方式，从上至下

3. 内边距

(1) 内边距的属性

• padding指盒子的“内补间”，宽高之外到边框以内的距离。

• 可以设置长度，如px、em、rem等,且不支持负值

• padding有四个方向分别是上、右、下、左

  • padding-top 上内边距

  • padding-right 右内边距

  • padding-bottom 下内边距

  • padding-left 左内边距

(2) 内边距的值

• padding:长度值;

• 1个值，将用于全部的四边。

• 2个值，第一个用于上、下，第二个用于左、右。

• 3个值，第一个用于上，第二个用于左、右，第三个用于下。

• 4个值，将按上、右、下、左的顺序作用于四边。

• 取值：以px的

4.外边距

(1) 外边距的属性

• margin指盒子的外边距，外边距是当前元素和其他元素之间的距离。

• 可以设置长度，如px、em、rem，%等,%取值都是父元素宽度的百分比取值。

• 1. %  是父元素的%
  2.取值auto:对上下外边距无效；自动计算块级元素的左右外边距，让块级元素水平居中
    (只对设置了宽度的会计元素生效)

• 正值时是增大该方向外边距，负值时是缩小该方向外边距。

• margin有四个方向分别是上、右、下、左

  • margin-top 上外边距

  • margin-right 右外边距

  • margin-bottom 下外边距

  • margin-left 左外边距

(2) 内边距的值

和内边距一样，外边距可以简写1～4个值，下和右不会产生效果的原因，是因为外边距其实是当前元素与同级元素之间的距离。

• 1个值，将用于全部的四边。

• 2个值，第一个用于上、下，第二个用于左、右。

• 3个值，第一个用于上，第二个用于左、右，第三个用于下。

• 4个值，将按上、右、下、左的顺序作用于四边。

(3) margin的无效情形

行内元素设置上下外边距无效，设置宽高无效

外边距可以让元素发生位移效果，但只有左和上外边距会移动当前元素。下和右外边距，只能让当前元素和周围的元素保持距离。当旁边没有其他元素时，它只是看上去无效。因为，margin是设置同级元素间的间隔，并不是设置它在父元素中的位置。如果右侧和下面并没有元素，就不会出现效果。

(4) margin的auto取值

margin有一个特殊的取值是auto，auto对上下外边距无效，左右取相同的值，使当前元素在父元素内左右居中。

• 块级元素在父元素中水平居中margin:上下距离 auto;

• 上下距离在没有的时候可以写0

• 内联素使用margin：auto，不能完成居中效果

.tou {
width: 400px;height: 430px;
border-radius: 50%;
border:5px solid black;
}
.jian {
width: 60px;height: 200px;
border:5px solid black;
background-color: red;
border-radius: 25% 25% 50% 50%;
}

(5) 自带外边距的元素

因不同浏览器对元素的默认渲染样式不同，所以默认的内外边距也可能不同。因此要在编写样式之前使用

• css reset 进行样式统一 * {margin：0；padding：0;}

• body : 四个方向各8px

• ul ： 上下16px外边距，“左内边距”40px

(6) 外边距合并现象

• 兄弟元素之外边距合并

• 两个在文档流中（垂直相邻）兄弟之间外边距，同时存在的时候，取最大的值。

(7) 外边距溢出

• 外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界产生合并现象。

• 原因是外边距其实设置的是元素与同级兄弟元素之间的距离。因此第一个和最后一个子元素的外边距力浏览器会认为你定义的是父级。

• 解决方案

  • 父元素增加padding-top缺点：增加了父元素实际高度

  • 增加父元素的边框，缺点：增加了父元素实际高度

  • 父元素增加overflow: hidden/auto;，缺点，父元素就不能溢出显示内容了

  • 使用空

    放在第一个子元素前和最后一个子元素后，作用是分隔与父级的粘连

  • 使用CSS3伪元素::before给父元素添加内容,源于增加空

.box::before{
  content:"";
  display:table;
}  

（8）关于会计元素，行内元素，行内块的总结（必须特别熟悉）

行内元素特点：
设置宽高无效，宽高根据内容自动撑开
上下外边距无效，左右外边距有效
可以去其他行内元素和行内块元素共用一行，一行放不下，再折行

块级元素的特点：
设置宽高有效，如果不设置，宽度是父级元素宽度的100%
如果不设置高度，高度靠内容撑开
4个方向的外边距都有效，独占一行

行内块元素：
设置宽高有效，但是自带一个默认宽高
4个外边距都有效，当时同一行修改一个行内块的垂直外边距，整行都会跟着一个发生位置改变
可以和其他行内块元素公用一行

十二、盒子模型的运用

1. 外边距的使用场合

• 元素的位置微调

• 元素之间的距离调整

2. 内边距的使用场合

• 改变边框内到内容之间的范围，用户“感觉”元素变大

• 文本与边框增加距离，把元素撑开

• 某些时候内边距也可以增加元素的距离

• padding没有auto

3. 盒子模型的计算方式

• box-sizing: content-box; 标准盒子模型

  • 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

  • 元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

• box-sizing:border-box 改变盒子模型计算方式

  • 设置的宽度width = 左右border + 左右padding + 内容的宽度

  • 设置的高度height = 上下border + 上下padding + 内容的高度

  • 注意：可能会导致内容溢出，需要时再使用

十三、背景

1. 背景颜色

• background-color: 颜色色值;

• 色值可以使用英文、十六进制、rgba()等

2. 背景图片

（1）背景图

• background-image: url(路径);

• 路径可以是绝对路径或者相对路径,注意外部css的路径

• 背景图必须要求元素具有宽度和高度

（2）背景图和img的区别

• 尺寸角度

  • img具有自己的尺寸，不设置宽度高度，可以直接显示 （如同照片）

  • 背景图必须设置宽度和高度 （如同打印）

• 增加内容角度

  • img图片上不可以直接写文字，除非在img盒子外部定位

  • 背景图是可以在图片上写文字的，图其实和颜色一样

• 功能角度

  • img一般用于产品展示，可以根据素材更新

  • 背景图一般左大背景或者更新小图标icon

3. 背景图平铺

背景平铺属性的前提是需要有 background-image属性，否则没有背景图片没有图片的平铺效果。 背景图较小，背景区域较大的时候，图片会重复显示，默认情况下x轴y轴都会重复。

• background-repeat:repeat; 默认值 横向纵向都

• background-repeat:no-repeat; 不平铺

• background-repeat:repeat-x; x轴平铺

• background-repeat:repeat-y; y轴平铺

•