Web - CSS3浮动定位与背景样式

概述

这篇文章主要介绍了 CSS3 中的浮动定位、背景样式、变形效果等内容。包括 BFC 规范与创建方法、浮动的功能与使用要点、定位的多种方式及特点、边框与圆角的设置、背景的颜色、图片等属性、多种变形效果及 3D 旋转等，还提到了浏览器私有前缀。

BFC规范与浏览器差异

BFC,(Box Formatting Content 块级格式化上下文)是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

一个盒子不设置height，当内容子元素都浮动时，无法撑起自身，原因是这个盒子没有行成BFC。

创建BFC

1、float的值不是none

2、position的值不是static 就是relative

3、display的值是inline-block、flex、inline-flex

4、overflow: hidden

浏览器差异

IE6、7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器可以使用zoom:1属性，让盒子拥有layout

浮动

浮动的最本质功能，用来实现并排。

浮动的使用要点：

1、要浮动，并排的盒子都要设置浮动。
2、父盒子要有足够的宽度，否则子盒子会掉下去。
3、子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素。

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能设置宽度和高度，即使他是span、a标签。

使用浮动布局网页

注意事项：

1、垂直显示的盒子不需要浮动，不要设置浮动，只有并排显示的盒子才需要浮动！

2、大盒子带着小盒子跑，一个大盒子中，又是一个小天地，内部可以继续使用浮动。

定位

脱离标准文档流的方法：浮动、绝对定位、固定定位。相对定位是不会脱离文档流的。

固定定位

固定定位只能以页面为参考点，没有子固父相这个性质，固定定位脱离标准文档流。

p {
    position: fixed;
    top: 100px;
}

绝对定位

盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置。

p {
    position: absolute;
    top: 100px;
}

位置描述词:left到左边的距离，right是到右边的距离，top是到上边的距离，bottom是到下面的距离。

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖。

绝对定位的盒子并不是永远以浏览器作为基准点，会以自己的祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子通常是相对定位的，所以这个性质也叫做子绝父相。

绝对定位的盒子垂直居中：

p {
    position: absolute;
    top: 50%;
    margin-top: "自己高度的一半";
}

z-index属性是一个没有单位的正整数，数值大的能够压住数值小的。

相对定位

盒子可以相对自己原来的位置进行调整，成为相对定位。

位置描述词:left向左边移动的距离，right向右边移动的距离，top向上边移动的距离，bottom向下面移动的距离，值可以为负数，既往相反方向移动。

p {
    position: relative;
    top: 100px;
    left: 100px;
}

相对定位的元素，会在老家留坑，本质上仍然是在原来的位置，只不过渲染在新的位置而已，渲染的图行可以比喻成影子，不会对其他元素产生任何影响。

相对定位的用途:相对定位用来微调元素的位置，相对定位的元素，可以当做绝对定位的参考盒子。

边框与圆角

边框

border属性的三要素:线宽度、线型、线颜色。

div {
    border: 1px solid red;
}

p {
    border-width: 10px;   /**线宽*/
    border-style: dotted; /**线型*/
    border-color:red;     /**线颜色*/
}

边框三要素可以拆分为小属性：

border-left:none;属性即可去掉左边框，以此类推。

盒子阴影

css中使用box-shadow属性值来设置阴影，默认是外部阴影，添加inset属性是内部阴影。

 /**外部阴影*/
 .box2 {
    width: 200px;
    height: 200px;
    background-color: white;
    border: 1px solid #000;
    box-shadow: 2px 2px 10px 10px rgba(0,0,0,.4);
    margin-bottom: 10px;
}

/**内部阴影*/
.box3 {
    width: 200px;
    height: 200px;
    background-color: white;
    border: 1px solid #000;
    box-shadow: inset 0px 0px 10px red;
    margin-bottom: 10px;
}

使用box-shadow属性值可以用逗号隔开多个，表示携带多个阴影,包括内外阴影都可以。

 .box4 {
    width: 200px;
    height: 200px;
    background-color: white;
    border: 1px solid #000;
    box-shadow: 2px 2px 30px red, 4px 4px 40px blue, 6px 6px 50px green, inset 0px 0px 6px orange;
    margin-bottom: 10px;
}

圆角

css3中使用border-radius属性设置圆角。

.box2 {
   width: 200px;
   height: 200px;
   border: 1px solid #000;
   border-radius: 20px;
}

背景

背景颜色

background-color属性表示背景颜色，背景颜色可以使用十六进制、rgb()、rgba()表示法表示，padding区域是有背景颜色的。

背景图片

css中使用background-image属性用来设置背景图片，图片路径要写到url圆括号中，可以是相对路径，也可以是http://开头的绝对路径。

如果样式表是外链的，那么要书写从css出发到图片的路径，而不是从html出发。

.box2 {
    background-image: url("images/bg.jpg");
}

背景图片位置

background-position属性可以设置背景图片出现在盒子的什么位置。

css精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫做css精灵技术，也叫作css雪碧图。

css精灵可以减少Http请求数，加快网页显示速度。缺点也很明显：不方便测量、后期改动麻烦。

背景尺寸

background-size属性用来设置背景图片的尺寸，兼容到IE9，值也可以用百分数来设置，表示为盒子宽、高的百分之多少，需要等比例设置的值，写auto。

contain和cover是两个特殊的属性，contain表示将背景图片智能改变尺寸以容纳到盒子里，cover表示将背景图片智能改变尺寸以撑满盒子。

背景裁切

background-clip属性用来设置元素的背景裁切到那个盒子，兼容到IE9。

背景固定

background-attachment属性决定背景图像的位置是在视口内固定，或者随着包含他的区块滚动。

背景重复

background-repeat属性用来设置背景的重复模式

背景线性渐变

盒子的背景图片可以使用属性linear-gradient形式创建线性渐变背景。

.box {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to right,blue,red);
}

渐变方向也可以写成度数。

.box {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(45deg,blue,red);
}

背景径直渐变

盒子的背景图片可以使用属性linear-gradient形式创建线性渐变背景,第一个参数指定的是圆心坐标。

.box {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(50% 50%,red,blue);
}

浏览器私有前缀

不同浏览器有不同的私有前缀，用来对试验性质的css属性加以标识。

2D效果

旋转变形

css3样式中使用transform属性的值设置为rotate,即可实现旋转变形，若角度为正，则顺时针方向旋转，否则逆时针方向旋转,deg是旋转角度单位不能省略。

.box {
    width: 200px;
    height: 200px;
    background-color: #1b77cc;
    transform: rotate(45deg);
}

可以使用transform-origin属性设置自己的自定义变换原点，默认是绕着自己位置的中心点。

.box {
    width: 200px;
    height: 200px;
    transform: rotate(45deg);
    transform-origin: 0 0 ;
}

缩放变形

css3样式中使用transform属性的值设置为scale,即可实现缩放变形，当数值大于1，表示放大元素，当元素小于1，表示缩小元素。

斜切变形

css3样式中使用transform属性的值设置为skew,即可实现缩放变形，skew有两个参数，分别是x斜切角度，y斜切角度。

.box {
    width: 200px;
    height: 200px;
    background-color: #6f42c1;
    transform: skew(10deg,20deg);
}

位移变形

css3样式中使用transform属性的值设置为translate,即可实现位移变形,和相对定位非常像，位移变形也会老家留坑，形影分离。

.box {
    width: 200px;
    height: 200px;
    background-color: #6f42c1;
    transform: translate(100px,200px);
}

3D旋转

css3样式中使用transform属性的值设置为rotateX、rotateY,即可实现绕横轴、纵轴旋转，rotateZ(10deg)是平面旋转。

3D旋转虽然简单，但是3D效果存在舞台概念，必须设置perspective属性，用来定义透视强度，可以理解为人眼到舞台的距离，单位是px。

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

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

    <div class="box3">
        <p></p>
    </div>
</body>

/**旋转X轴*/
.box1 {
    width: 202px;
    height: 202px;
    border: 1px solid #000;
    margin: 50px auto;
    perspective: 300px;
}

.box1 p {
    transform: rotateX(30deg);
}


/**旋转Y轴*/
.box2 {
    width: 202px;
    height: 202px;
    border: 1px solid #000;
    margin: 50px auto;
    perspective: 300px;
}

.box2 p {
    transform: rotateY(30deg);
}

/**同时旋转X轴、Y轴*/
.box3 {
    width: 202px;
    height: 202px;
    border: 1px solid #000;
    margin: 50px auto;
    perspective: 300px;
}

.box3 p {
    transform: rotateX(30deg) rotateY(30deg);
}