二、浮动定位与背景样式

一、浮动与定位

1. 使用浮动要注意什么？浮动有哪些性质？

【注意】

• 使用浮动，父盒子必须有足够的空间容纳子盒子，不然子盒子会掉下来
• 要浮动就一起浮动，只要有一个兄弟盒子浮动了，其他所有的兄弟元素都要一起浮动

【性质】

• 顺序贴靠性，三个盒子都左浮动，三号盒子会优先贴靠二号盒子，如果父盒子空间不够，则二号盒子会掉下来，贴靠一号盒子的边；如果贴不到一号盒子的边，则回贴靠父盒子
• 浮动会使盒子脱离标准文档流，无论是块级元素还是行内元素，只要设计了浮动，他就可以设置宽和高

2.如何清除浮动

【清除浮动】

• 清除浮动是指，该盒子内的浮动不会影响其他元素，别的盒子的浮动也不要追上来
• 如果一个盒子有over高度，他就不涉及清除浮动的相关话题

【方法】**

• 使用overflow:hidden让盒子形成BFC
• 清除浮动对自己的影响clear:both
• 在每个盒子后加::after，并且给:after:添加clear：both属性
• 在两个父盒子中间加一个盒子，并给中间的盒子赋予clear:both

3. 定位有哪几种？分别有什么功能？

【种类】
1、相对定位position:relative

• 功能：微调元素位置/成为绝对定位的参考盒子（即子绝父相）
• 位置描述词：left right top bottom
• 性质：老家留坑、形影分离（就是说该盒子还是在原来的位置，只不过渲染到了新地方而已）

2、绝对定位position:absolute

• 功能：压盖、遮罩 / 结合CSS精灵使用 / 结合JS动画使用
• 位置描述词：left right top bottom
• 脱离标准文档流（释放自己的位置，对其他元素不会起到干扰作用，而是对他们进行压盖）
• 子绝父相：绝对定位会在 祖先盒子 中寻找 最近的 带有定位属性的 盒子 当作基准点，这个盒子通常是相对定位的
• 垂直居中：position:absolute; top:50%; margin-top: - 自己高度的一半

这里的top:50%表示将盒子放置于中间，可是此时只是盒子上边界处于大盒子的中间，所以这里将margin-top设置为负的自己高度的一半，就可以把盒子拉上去从而真正的实现了居中

• 水平居中：position:absolute; left:50%; margin-left:50%;(和垂直居中同理)

这里不使用margin:0 auto;，原因绝对定位脱离了标准文档流，margin属性不能再用于水平居中

• 堆叠顺序z-index属性：数值大的能够压住数值小的（一般使用几个重复的数字，比如999、9999）

3、固定定位position:fixed

• 返回顶部/楼层导航（无论网页怎么滚动都会呆在那里）
• 只能以页面为参考点
• 脱离标准文档流

二、边框与圆角

1. 边框有哪三个要素？如何分别设置三个要素？常用线型有哪几种？

【三要素】

• 一起设置：border:1px solid red
• border-style:分为solid（实线型） dotted（点状） dashed（点线状）
• border-width
• border-color

2. 圆角如何设置？正圆形如何设置？

【圆角】

• border-radius:30%
  【正圆形】
• border-radius:50%

3. 阴影如何设置？

• box-shadow:1px 1px 1px 1px rgba(1,1,1,0.4)

第一个参数表示x轴方向的平移，第二个参数代表y轴上的平移，第三个参数表示模糊程度，第四个参数表示延展度

• 内阴影：box-shadow:inset 10px 20px 30px 40px rgba(1)

4.如何用盒子制作三角形?

• 利用边框的性质，将盒子大小设置为零，设置边框大小，只将想要的那边三角形的border-color设一个颜色值，其他的border-color都设为transparent(透明色)

        .gbox {
            width: 0px;
            height: 0px;
            border: 90px solid transparent;
            border-left-color: gold;
        }

三、背景与渐变

1. 透彻理解每一个background系列属性，你能不重不漏的说出它们吗？

1 .background-color
2. background-img:url(../images/bgi.jpg);：背景图片
3. background-repeat

• repeat:：x,y均平铺
• repeat-x：沿x轴方向平铺
• repeat-y：沿y轴方向平铺
• no-repeat：不平铺

4.background-size：设置图片的尺寸

• 可以用px
• 也可以用百分数表示盒子宽和高的百分之多少
• 需要等比例设置的值写auto
• contain：目的让用户看完整这个图片，所以图片在盒子中是完全展示出来的
• cover：图片在盒子中不留白，图片完全占满整个盒子

5.background-clip（背景裁切）：用来设置元素的背景裁切到哪个盒子里

• border-box：背景延伸到边框
• padding-box :背景只在内部，padding处（也就是dotted和dashed边框线的下面没有背景图）
• cotent-box:背景只在内容区

6.background-attachment(图片固定)，决定背景图像是在自己的小滚动框中固定，还是包含他的大滚动框中固定

• fixed：背景图像是嵌入在大的滚动框下，无论滚动小滚动框还是大滚动框，背景图都不动
• local：图片平铺在小滚动框中，当滚动小滚动框时，字体和背景图片一起滚动
• scroll：图片就像是固定在小的滚动框中，但是背景图片不随字一起滚动，背景固定在小滚动框中。

overflow: scroll;表示溢出的内容用滚动条显示

7.background-position:设置背景图片出现在盒子的什么位置

8.background综合属性
background:white url(image/photo.png) no-repeat center center;
背景：背景颜色 背景图片 背景重复 背景位置（水平 垂直）

2. 如何实现渐变背景？

1.线性渐变：

• background-img:liner-gradient(to right,blue,red);//(渐变方向，开始颜色结束颜色)
• background-img:liner-gradient(45deg,blue,red);//也可以写成度数的方向
• background-img:liner-gradient(to bottom, blue, yellow 20%, red);可以有多个颜色值，也可以用百分数代表该颜色起始出现的位置
  【浏览器的私有前缀】
• chrome浏览器：-webkit-
• Firefox:-moz-
• IE、Edge：-ms-
• 欧朋：-o-

2.径向渐变：background-img:radical-grdient

• background-img:liner-gradient(50% 50%, red, blue);

3.使用background-position属性实现CSS精灵

• 将多个小图标合并至做到一张图片上，使用background-position属性单独显示其中一个
• CSS精灵可以减少HTTP请求数，加快网页显示速度，但是不方便测量，后期改动比较麻烦
• 【方法】首先选取一张带有多个小图标的图片作为背景图片，通过ps选取需要的图片，其中的x，y为相对定位，比如他在（42，31），则此时需要向左拉42再向上拉31，所以这里取负号。w、h分别为它的宽和高

    background: url(../images/icons.png) -42px -31px;/*CSS精灵*/

四、2D与3D转换

1. 2D变形有哪些？3D变形有哪些？每种变形的参数意义是什么？正方向是什么？？

1.【2D】

• transform:rotate(45deg)旋转45度
• transform:origin()设置自定义的变换点
• transform:scale(a)缩放（a为数字，a>1表示放大，a<1表示缩小）
• transform:skew(10deg,20deg):斜切变形括号内（x斜切角度，y斜切角度）
• transform:translate(100px,200px)：位移变形（与左边的距离，与右边的距离）（向右移动，向下移动）——和相对定位非常像，位移变形也会“老家留坑”，”形影分离“
  2.【3D】
• transform:rotateX(30deg) transform:rotatey(30deg) 绕横轴旋转/绕纵轴旋转
• perspective:300px：人眼到舞台的距离
• translateX() translateY() translateZ()让元素在空间内沿着x/y/z轴进行移动
  【注意】空间移动要添加到3D旋转之后，例：transform:rottateX(30deg) translateX() translateY()

2.必须准确理解空间移动的意义

translate图像一旦旋转他的坐标轴也就旋转了，在旋转之后，图像会按照他新的坐标轴进行移动

3.必须掌握perspective

我们可以将图像看作人，盒子看作舞台，在进行translate操作时，舞台一定要添加perspective属性，表示透视的强度，决定了渲染的力度，也可以看作人眼到透视的距离