css 商城 两列_前端 css 下 - 谢佩琪

11：浮动及应用

1：如何把盒子放在合适的位置

css3的定位机制有3种：普通流，浮动，定位

2：文档流

一个网页内标签元素正常的从上到下，或从左到右排列你的意思

3：浮动

1：浮动是指浮动属性的元素会脱离普通控制流的控制，移动到器父元素指定位置的过程

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动

2:浮动详解

3：吧块及元素转换成行内块元素，也可以实现放在一行上，但是元素之间有空隙，不方便处理。

4：浮动元素的内幕特性：

浮动的元素总是找他最近的父及元素对齐。但是不会超出内边距的范围。

特别注意：浮动的盒子需要和标准流的父亲搭配使用。

4：版心和布局流程

版心就是网页中主题内容所在的区域，常见的宽度有 960px ,980px, 1000px, 1200px.

布局流程：

1：确定页面的版心

2：分析每个页面中的行模块，以及每个行模块中的列模块

3：制作HTML页面和css文件

4：css初始化，通过用盒子模型的原理，哦谈过div+css  布局来控制网页中各个模块

案例：

1：一列固定宽度居中

2：两列左窄右宽性

3：通栏平均分布性

12：清除浮动

1：清除浮动的本质：

为了解决父级元素因为子集浮动引起内部高度为0 的问题。

给父盒子不指定高度，子盒子在文档流的情况下会把父盒子自动撑开。如果给子盒子设置浮动，就会引起父盒子高度为0的情况。

很多情况下，我们不方便给父亲高度，比如新闻，不知道里面的文字有多少，一般情况下，让里面的内容自动撑开盒子，不写死高度。

2：清除浮动的方法：

1：基本语法：

选择器 {clear:属性值}    属性值一般为both，同时清除两侧浮动的影响

2额外标签法：

是w3c推荐的语法是 通过在浮动元素末尾添加一个空标签。

结构比较差，不推荐使用

3：父级元素添加overflow属性

4：使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签

5：使用before 和after  双尾元素清除浮动

推荐大家使用

 

 

15：CSS四种定位及其应用

1：定位的属性

元素的定位主要包括定位模式和边偏移两部分

1：边偏移

top  bottom   left  right

2：定位模式(position)

position常用的属性值：

值	描述
static	自动定位(默认的定位方式)
relative	相对定位，相对于起源文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

2：静态定位

静态定位就是元素默认的定位方式，起始就是标准流的特性

静态定位下，无法通过边偏移属性来改变元素的位置。

一般是用它来清除定位的，一个原来有定位的盒子，不想加定位了，就写这句话。

3：相对定位(relative，自恋型)

注意：

1. 相对定位最主要的一点是：他可以通过通过边偏移位置，但是原来所占有的位置，继续占有
2. 其次：每次移动的位置，是以自己左上角为基点进行移动。

4：绝对定位(absolute，拼爹型)

5：何为子绝父相

1：

父级没有定位，则以浏览器为准对齐。

父级有定位，则以父级的定位为准  父亲可以是相对定位，亦可以是绝对定位*/，

2：子绝父相

子级是绝对定位，不会占有位置，可以放到盒子里面的任何位置。

父盒子布局时，需要占有位置，因此父亲只能是相对定位。

6：哈根达斯 案例

7：绝对定位水平垂直居中

算法：

水平：父盒子宽度的一般，自己盒子宽度的一般。

垂直： 父盒子高度的一般，自己盒子高度的一般。

8：淘宝焦点图案例

9：防新浪头部和广告

10：叠加次序

多个元素同时设置定位时，定位元素之间可能会发生重叠，

要想调整元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，z-index值月高，月在上面。

注意：

1. z-index默认值是0；值越大，定位元素在层叠元素中月居上。
2. 后面的数字没有单位。
3. 只有相对定位，绝对定位，固定定位有此属性。

11：定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态	不脱标，正常模式	不可以	正常模式
相对	不脱标，占有位置	可以	相对于自身位置移动
绝对	脱标，不占有位置	可以	相对于定位的父级元素移动
固定	脱标，不占有位置	可以	相对浏览器移动

12：固定绝对定位模式总结

13：定位盒子的模式转换。

跟浮动一样，元素添加了  绝对定位和固定定位之后  ，  元素模式发生转换，都转换成  行内块模式，

16：学成网案例

/* css初始化
 */
 * {  /* 清除内外边距 */
     margin: 0;
     padding: 0;
 }
 ul {  /* 去掉列表的样式小点 */
     list-style: none;
 }
 .clearfix:before, .clearfix:after {   /* 清除浮动 */
                display: table;
                content: "";
            }
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
a {
     color: #050505;
     text-decoration: none;/* 取消下滑线 */
 }
 input {
     border: 0; /* 所有的表单边框为0 */
     box-sizing: border-box;  /* css3盒子模型border和padding都包含到withe r里面去*/
 }
 .container {  /* 因为我们的版心宽度都是1200 都要居中对齐 我们就声明一个公共类 */
    width: 1200px;
    margin: 0 auto;
            }
            /* css初始化结束 *//* 页面头部分 */
body {
    background-color: #f3f5f7;  /* 整个页面的背景色 */
            }
header {
    height: 100px; 
    /* background-color: pink; */ 
    overflow: hidden;
            }
nav {
    width: 1366px;
    height: 42px;
    margin: 26px auto;
}
.logo {
     float:  left; 
}
/* 导航栏部分 */
.navbar {
    float: left;
    height: 42px;
    line-height: 42px; /* 行高等于高，垂直居中 */
    margin-left: 50px;
    /* background-color: purple; */


}
.navbar ul li {
    float: left;  /* 让课程  首页  职业规划一行显示 */
}
.navbar ul li a {
    display: block;
    height: 42px;
    padding: 0 10px; /* 上下0， 左右10 像素 */
}
.navbar ul li a:hover {
    border-bottom: 2px solid #7acdfb;
}
/* 搜索框部分 */
.search {
    width: 410px;
    height: 38px;
    border: 1px solid #b6e1f9;
    float: left;
    margin-left: 165px;
}
.search input[type=text] {/* 属性选择器  type 为 text 的文本框 */
    width: 360px;
    height: 38px;
    padding-left: 20px;  /* 做内边距，目的是将文字往后以。 */
    float: left;

}
.search input[type=submit] {
    width: 50px;
    height: 38px;
    float: left;
    background: #00a4ff url(images/) center  center no-repeat;

}
/* 个人中心部分 */
.personal {
    float: left;
    height: 42px;
    line-height: 42px;
    margin: 0 15px 0 35px;
}
.personal img {
    margin: 0 15px;
}
/* banner部分 */
.banner {
    height: 420px;
    background-color: #1c036c;
}
.banner-in {/* 版心 */
    height: 420px;
    background:  url(images/) 0 0 no-repeat;
    position: relative; /* 父亲相对定位 */
}
.banner .slidebar { /* 左侧边侧栏 */
    width: 190px;
    height: 420px;
    float: left;
    /* background-color: pink; */
    background: rgba(0, 0, 0, );
}
.slidebar li a {/*  左侧边侧栏中的连接元素 */
    color: #fff;
    font-size: 14px;
    padding: 0 20px;
    display: block; /* a是行内元素，没有大小，需要转换 */
    line-height: 45px;  /* 单行垂直居中，个人经验，有了行高，可以不给高度 */
}
.slidebar li a:hover {/*  左侧边侧栏中的连接元素 */
    color: #00a4ff;
}
.slidebar a span {/*  左侧边侧栏中的符号元素 */
    float: right;
    font-family: arial; /* 一般情况下，我们符号都用 这个字体 */
}
.timetable {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #fff;
    margin-top: 50px;

}
.timetable dt {
    height: 50px;
    line-height: 50px; /* 注意 */
    background-color: #9bceea;
    text-align: center; /* 文字水平居中 */
    color: #fff;     /* 字体颜色 */
    font-weight: 700;  /*  字体加粗 */
    letter-spacing: 2px;  /* 字间距 */
    margin-bottom: 5px;   /* 外边距 */

}
.timetable dd {
    width: 193px;
    height: 60px;
    margin: 0 auto;
    border-bottom: 1px solid  #ccc;
    padding-top: 12px;
    box-sizing: border-box;  /* css3盒子模型border和padding都包含到withe r里面去*/

}
.timetable dd:last-child { 结构伪类选择器
    border: 0;
}
.timetable dd h4 {
    font-size: 16px;
    font-weight: none;
    color: #4e4e4e;

}
.timetable dd p {
    color: #a5a5a5;
    font-size: 14px;

}
.timetable dd a {
    display: block;
    border: 1px solid #ccedff;
    color: #ccedff;
    text-align: center;
    /* width: 193px; */
    height: 38px;
    line-height: 38px;
    font-weight: 700;
    color: #00a4ff;
}

.circle {
    width: 180px;
    height: 22px;
    /* background-color: pink; */
    position: absolute;
    left: 50%;
    margin-left: -80px;
    bottom: 10px;
}
.circle li {
    float: left;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, );
    margin: 6px 8px;
    border-radius: 50%;
}
.circle .current {
    width: 19px;
    border-radius: 5px;
    background-color: #fff;
}
.recommend {
    height: 60px;
     background-color: #fff;
    margin-top: 10px;
    line-height: 60px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, );
    /* 盒子阴影 水平位置  垂直位置  模糊距离  影子颜色 */

}
.recommend a {
    padding: 0 35px;
    border-right: 1px solid #ccc;

}
.recommend a:hover {
    color: #00a4ff;
}
.recommend a:first-child {
    color: #00a4ff;

}
.recommend a:last-child {
    color: #00a4ff;
    border: 0;
    float: right;
    font-size: 14px;
}

style.css

1：元素的显示和隐藏

1：display显示

• display 设置检索对象是否及如何显示；
• display：none 是隐藏对象。
• display：block 除了转换换成块及元素之外，同时还有显示元素的意思。

特点：隐藏只管后不再保留位置。

2：visibility  可见性

设置或检索是否显示对象

visible： 对象可显示

hidden：对象隐藏

特点：隐藏之后保留愿所有的位置，

3：overflow  溢出

检索或设置 当对象的内容超过其指定的高度及宽度时如何管理内容

visible：不见贴内容也不添加滚动条

auto：超出自动显示滚动条，不超出不显示滚动条。

hidden：不显示超出对象尺寸的内容，超出的部分隐藏掉。

scroll: 不管超出的内容，总是显示滚动条。

17：CSS溢出文字隐藏

1:鼠标样式  cursor

设置或检索在对象上移动的鼠标采用何种系统定义的光标形状。

cursou: default 小白|  pointer 小手 | move移动 | text 文本

2：取消轮廓线    outline

是绘制元素周围的一条线，位于边框边缘的外围，

直接写法是： outline： 0；

3：防止拖缀文本域 resize

resize: none; 可设置防止文本域托追问题

4：行内块和文字对齐

带有宽度的块级元素 居中对齐 ： margin：0 auto；

文字的居中对齐：text-align：center;

vertical-align 设置或检索对象内容的垂直对齐方式。

不影响块及元素的内容对齐，也就说对于块及元素无效；他只对于行内元素和行内块元素设置垂直对齐。

我们可以通过vertical-align 设置文字和图片，表单的垂直对齐了。

5：去除图片底侧缝隙

图片或表单等行内块元素，他们的底线会和父盒子的极限对齐，会造成图片的底侧会有一个缝隙。

解决办法：

1：转换成块及元素，

2：给img设置顶端对齐就好了。

6：溢出的文字隐藏

1：word-break

• normal  使用浏览器默认的换行规则
• break-all   允许在单词内换行
• keep-all  只能在半角空格或连字符出换行。

2：white-space

设置或检索 对象内 文本的显示方式  ，通常在浏览器内一行显示。

• normal  默认处理方式
• nowrap   强制在一行内显示所有文本，直到文本结束后用br标记 对象才能换行。

3：超出的部分省略号显示 text-overflow

• clip 不显示省略标记，而是简单的裁剪
• ellipsis  超出的部分，省略号代替。

 

18：CSS精灵技术

1：css精灵技术的背景及本质

1：背景：为了减少服务器接收和发送的次数，提高页面的加载速度，

2：本质：是一种处理网页背景图骗的方式，

2：css精灵技术的使用

使用css的background-images，background-repeat和background-position属性进行背景定位。

div {
        width: 15px;
        height: 20px;
        border: 1px solid pink;
        margin: 50px auto;
        background:  url(images/) 0 -100px no-repeat;
        /* 根据浏览器中的坐标轴，图片向上移动，准确定位 */

    }

3：拼出自己的名字

4：王者荣耀导航栏

5：ps制作精灵图

新建文件(北京内容透明)——选中图层(右键，复制图层，到新建的图层)

保存——先保存一份psd文件，再保存一份png文件。

6：运用制作精灵图

19：字体图标

1：字体图标的优点

• 可以做跟图片一样可以做的事情，改变透明度，旋转度等
• 但本质其实还是文字，可以随意改变颜色，产生隐隐，透明效果等等。
• 本身的体积更小，但携带的信息并没有减弱
• 几乎支持所有的浏览器
• 移动端必备良药

2：svg格式上传转换字体格式

UI设计人员给我们svg文件，我们需要转换成我们页面能使用的字体文件。推荐网站：

上传流程：

icomoon APP——> import icons——> generate fonts——>左上角(new set from selection)——>把图片上传到 UNtitled Set

3：下载字体图标

下载流程：

4：复制需要的字体文件

复制fonts文件夹，

1：第一步：在样式里面声明，告诉别人，我们自己定义的字体。

    @font-face {  /* 电脑中没有的字体，我们需要声明 */
      font-family: 'icomoon';
      src:  url('fonts/');
      src:  url('fonts/#iefix') format('embedded-opentype'),
        url('fonts/') format('truetype'),
        url('fonts/') format('woff'),
        url('fonts/') format('svg');
      font-weight: normal;
      font-style: normal;
    }

2：给盒子使用字体：

span {
        font-family: "icomoon";  /* 一定保证和上面的  font-family相同。 */
    }

3：盒子里面添加结构

span {
        font-family: "icomoon";   /* 一定保证和上面的  font-family相同。 */
        font-size: 100px;
        color: pink; 
        
    }

5：追加新图标字体的方法

    div::before {
        font-family: "icomoon";  /*  一定保证和上面的  font-family相同。 */
        font-size: 100px;
        color: pink;
        content: "\e900";
        /* height: 100px;
        width: 100px;
        background-color: purple; */
    }

20：滑动门技术及应用

1：滑动门技术的原因

为了是各种特殊形状的背景能够适应元素中文本内容的多少，出现了css滑动门技术。

2：滑动门实现的原理

核心技术就是利用css精灵技术(主要是背景位置)和padding值撑开宽度，以便能使适应不同数字的导航栏。

<li><a href=""><span>导航栏</span></a></li>

总结：

• a设置背景左侧，padding撑开合适宽度
• span设置背景右侧，padding撑开合适宽度，(剩下的又文字撑开盒子宽度)
• 之所以a包含span，是因为整个导航栏都可以点击

3：滑动门技术的实现

4：微信导航栏

5：伪元素的本质

伪元素选择器，本质是插入一个元素，只不过是行内元素。

6：鼠标经过显示边框

7：认识过度效果

过度(transition)是css3中觉有颠覆性的特征之一，不用任何，能从一中样式转换成另一种样式。

css3里使用补间动画(过度效果)，并且只有当属性发生变化时，存在两种效果，既可以实现平滑的过度。

语法格式：

属性	描述
transitin	简写属性，用于在一个属性中设置四个过度属性
transition-property	规定应用的css属性的名臣
transition-durperty	定义过度效果话费的时间。默认是0
transition-timing-function	规定过度效果的时间曲线，默认是“ease” linear  匀速 ease    逐渐慢下来 ease-in  加速 ease-out  减速 ease-in-out   先加速后减速
transition-delay	规定过渡效果何时开始，默认是“0”

过度效果：

8：防小米效果

21：CSS新增2D和3D属性及应用

1：2D 变形移动

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;/* transform: translateX(x,y);
        变形  移动  */
        transition: all 0.5s;}
    div:active {/* div:actice 鼠标点击没有松开鼠标的时候触发的状态; *//* transform: translate(50px);默认x轴移动
        transform: translateX(50px);  x轴移动
        transform: translateY(50px); Y轴移动 */
        transform: translate(50px,50px);/* x,y轴移动 */}</style>

2：让定位的盒子居中对齐

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;/*transform: translate(100px);  水平移动100像素 *//*transform: translate(50%); translate 如果平移的是%
        不是一父级的盒子为准，而是以自己的盒子为准。 *//* 让我们定位的盒子居中对齐: 先走浏览器的一般，再走自己盒子的
        一般; */
        position: absolute;
        left: 50%;/* 一父级的宽度为准 */
        top: 50%;
        transform: translate(-50%, -50%);/* 再走自己盒子的一般 */}</style>

3：2D变形缩放

transform: scale(2); /* X 水平缩放  Y垂直缩放  如果只写一个，
        两边都缩放都缩放 */

4:2D变形旋转

transform: rotate(45deg); /*  deg  度数    旋转45度*/

5：变形中心点

 transform-origin: 可以调整元素转换变化的原点 
transform-origin: top left;  以左上角旋转，
如果精确一些，就可以用像素；
transform-origin: 20px 30px;

6：旋转的我的家

7：2D变形切斜

倾斜：skew(deg,deg)

transform:skew(30deg,0deg);

该实例通过skew方法把元素水平方向上倾斜30度，竖直方向保持不变。

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0

3D变形：

2d x y

3d x y z

左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

简单记住他们的坐标：

x左边是负的，右边是正的

y 上面是负的， 下面是正的

z 里面是负的， 外面是正的

8：rotateX： 就是沿着 x 立体旋转

9：rotateY：沿着y轴进行旋转

10：rotateZ：沿着z轴进行旋转

11：体会透视 

透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感(3D效果)，其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

理解透视距离原理： 

### translateX(x)

仅水平方向移动**(X轴移动) 

主要目的实现移动效果

### translateY(y)

仅垂直方向移动(Y轴移动)

### translateZ(z) 

transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化(说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性)。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。

### translate3d(x,y,z)

[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

12：3D变形移动

13：translate3D

 /*transform: translate3d(x, y, z); x 和 y 可以是 px 可以是 %  但是z 只能是px*/
           transform: translate3d(100px, 100px, 300px);

14: 开门见媳妇

15：两面翻转的图片

transform-style: preserve-3d

保留当前空间位置；是图片扁平化

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见

16：体会动画

动画(CSS3) animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}

animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画"

div {
        width: 100px;
        height: 100px;
        background-color: pink;
        animation: go 2s ease 0s infinite alternate;  引用动画
        /*animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;*/
            /*动画名称是自己定义的 go google*/
            /*infinite 无限循环*/
            /*一般情况下，我们就用前2个 animation: go */
    }
    @keyframes go{  /* 定义动画 */
        from {
            transition: translateX(0);
        }
        to {
            transform: translateX(600px);
        }
    }
    </style>

17：多组动画

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        animation: go 2s infinite;/* 引用动画 */}
    @keyframes go {
        0% {  /* 起始位置 from*/
            transform: translate3d(0, 0, 0);}
        25% {  
            transform: translate3d(800px, 0, 0);}
        50% {  
            transform: translate3d(800px, 400px, 0);}
        75% {  
            transform: translate3d(0, 400px, 0);}
        100% {/* 结束位置 t0 */
            transform: translate3d(0, 0, 0);}

    }
    </style></head><body><div></div></body></html>

View Code

18：奔跑吧，汽车

19：无缝滚动效果

22：CSS3伸缩布局及应用

0：传统三等份

1：伸缩布局三等份

 伸缩布局(CSS3)

        CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

<style>
        section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;/*  父级盒子添加 flex  */
           display: flex;/*  伸缩布局模式 */}
        section div {/* 给子盒子不加浮动，取消宽度，添加份数不加单位 */
            height: 100%;}
        section div:nth-child(1) {
            background-color: pink;
             flex: 1;}
        section div:nth-child(2) {
            background-color: purple;
            margin: 0 5px;
             flex: 2;}
        section div:nth-child(3) {
            background-color: pink;
             flex: 1;}</style>

2：伸缩布局固定宽度

如果给一个子盒子固定宽度，其他子盒子会根据所剩的父盒子伸缩布局。

　　主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

　　侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

　　方向：默认主轴从左向右，侧轴默认从上到下

　　主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

　　Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多

flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度 不能小于 280

max-width: 1280px 最大宽度 不能大于 1280

3：伸缩布局排列方式

.flex-direction调整主轴方向(默认为水平方向  父级添加)

flex-direction: column 垂直排列

flex-direction: row 水平排列

/*  父级盒子添加 flex 最小/最大宽度  排列方式   */
           display: flex; /*  伸缩布局模式 */
           min-width: 500px;
           flex-direction: column;

4：携程

各属性详解******

子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度 不能小于 280

max-width: 1280px 最大宽度 不能大于 1280

2.flex-direction调整主轴方向(默认为水平方向)

flex-direction: column 垂直排列

flex-direction: row 水平排列

携程网手机端地址

3、justify-content调整主轴对齐(水平对齐)

子盒子如何在父盒子里面水平对齐

| 值 | 描述 | 白话文 |
| ------------- | ------------------------ | ----------------------- |
| flex-start | 默认值。项目位于容器的开头。 | 让子元素从父容器的开头开始排序但是盒子顺序不变 |
| flex-end | 项目位于容器的结尾。 | 让子元素从父容器的后面开始排序但是盒子顺序不变 |
| center | 项目位于容器的中心。 | 让子元素在父容器中间显示 |
| space-between | 项目位于各行之间留有空白的容器内。 | 左右的盒子贴近父盒子，中间的平均分布空白间距 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 相当于给每个盒子添加了左右margin外边距 |

4、align-items调整侧轴对齐(垂直对齐)

子盒子如何在父盒子里面垂直对齐(单行)

| 值 | 描述 | 白话文 |
| ---------- | --------------- | --------------------------- |
| stretch | 默认值。项目被拉伸以适应容器。 | 让子元素的高度拉伸适用父容器(子元素不给高度的前提下) |
| center | 项目位于容器的中心。 | 垂直居中 |
| flex-start | 项目位于容器的开头。 | 垂直对齐开始位置 上对齐 |
| flex-end | 项目位于容器的结尾。 | 垂直对齐结束位置 底对齐 |
| | | |

5、flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子的时候如何处理

| 值 | 描述 |
| ------------ | ---------------------------------------- |
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩(压缩) 显示 强制一行内显示 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 |
| | |
| | |

6、flex-flow是flex-direction、flex-wrap的简写形式

~~~css
flex-flow: flex-direction flex-wrap;
~~~

白话记： flex-flow: 排列方向 换不换行;

两个中间用空格

例如：

~~~css
display: flex;
/* flex-direction: row;
flex-wrap: wrap; 这两句话等价于下面的这句话*/
flex-flow: column wrap; /* 两者的综合 */
~~~

7、align-content堆栈(由flex-wrap产生的独立行)多行垂直对齐方式齐

align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。

必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

| 值 | 描述 | 测试 |
| ------------- | ------------------------ | ---- |
| stretch | 默认值。项目被拉伸以适应容器。 | |
| center | 项目位于容器的中心。 | |
| flex-start | 项目位于容器的开头。 | |
| flex-end | 项目位于容器的结尾。 | |
| space-between | 项目位于各行之间留有空白的容器内。 | |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | |

8、order控制子项目的排列顺序，正序方式排序，从小到大

用css 来控制盒子的前后顺序。 用order 就可以

用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0

~~~css
order: 1;
~~~

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值

 

23：BFC

1：认识BFC

BFC(块级格式化上下文)

BFC(Block formatting context)

直译为"块级格式化上下文"。

BFC是一个独立的渲染区域，它规定了整个盒子内部如何布局，并且与这个盒子外部毫不相干。

2：块级元素具有BFC的条件

1：元素的显示模式

我们前面讲过 元素的显示模式 display。

分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。

2：那些元素会具有BFC的条件

不是所有的元素模式都能产生BFC，w3c 规范：

display 属性为 block, list-item, table 的元素，会产生BFC.

3：块级元素触发BFC的属性

1：要给这些元素添加如下属性就可以触发BFC。

-float属性不为none

-position为absolute或fixed

-display为inline-block, table-cell, table-caption, flex, inline-flex

-overflow不为visible。

2：BFC布局规则特性：

1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.

2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

3.在BFC中，每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说，则触碰到右边缘)。

4. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
5. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

4：BFC的作用：清除浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。

计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

5：BFC作用：解决外边距合并

```
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
```

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。

6：BFC的作用：制作右侧自适应的盒子问题

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

24：CSS补充知识

1：优雅降级和渐进增强

什么是渐进增强(progressive enhancement)、优雅降级(graceful degradation)呢？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

类似 爬山，由低出往高处爬

<img src="media/" />

<b>优雅降级 graceful degradation：</b>

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

类似蹦极，由高处往低处下落

<img src="media/" />

　　区别：渐进增强是向上兼容，优雅降级是向下兼容。

个人建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。

:2： 浏览器前缀

| 浏览器前缀 | 浏览器 |
| -------- | -------------------------------------- |
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |

后面我们会有 常用的解决H5和C3 的兼容解决文件， 我们这里暂且不涉及。

3：背景渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。

兼容性问题很严重，我们这里之讲解线性渐变

语法格式：

~~~css
background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；
~~~

~~~css
background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；
~~~

4：CSS W3C 统一验证工具

CssStats 是一个在线的 CSS 代码分析工具

```
网址是：
```

如果你想要更全面的，这个神奇，你值得拥有：

W3C 统一验证工具： ☆☆☆☆☆

因为它可以检测本地文件哦！！

5：CSS 压缩

通过上面的检测没有错误，为了提高加载速度和节约空间(相对来说，css量很少的情况下，几乎没啥区别)，可以通过css压缩工具把css进行压缩。

w3c css压缩 网速比较慢

还可以去站长之家进行快速压缩。

25：CSS布局案例

26：CSS3小黄人案例

27：文本溢出

28：盒子水平和垂直居中