HTML&CSS3(3)

盒子尺寸

为什么要学习盒子尺寸

回顾盒子模型

盒子尺寸介绍

  • box-sizing: content-box; 盒子的总尺寸= CSS中写的尺寸(height或width)+padding+border
  • box-sizing: border-box; 盒子的总尺寸 = CSS中写的尺寸(height或width)

总结

在用的时候,把下面的代码写在reset.css中

1
2
3
*,*:after,*:before {
box-sizing: border-box
}

多背景

为什么需要多背景

多背景的语法

background-image: url() 位置, url() 位置, url() 位置

总结

多背景是为旧属性赋予了新功能,可以使得一个元素中添加多个背景图片

背景尺寸

为什么需要背景尺寸

背景尺寸的语法

background-size: numberX numberY numberX 代表设置图片的宽 numberY代表图片的高

background-size: percentage percentage

background-size: cover 覆盖整个div,不关心图片是否显示完整

background-size: contain 图片显示完整 不关心是否覆盖整个div

过渡效果

为什么要学习过渡效果

查看迅雷首页侧栏: http://www.xunlei.com/

过渡效果怎么实现

transition: 过渡属性 过渡过程需要的总时间 过渡速度控制 过渡延迟

过渡属性: transition-property : all 代表所有属性 如果你想指定属性

总时间: transition-duration 时间可以是秒

过渡速度控制: transition-timing-function: ease ease-in ease-in-out ease-out linear

过渡延迟: transition-delay

总结

  • 要实现过渡 一定要声明开始和结束状态属性

知识点五: 2D转换

为什么需要2D

平移转换

transform: translateX()

transform: translateY();

transform: translate(X,Y)

缩放转换

transform: scale(number) number>1 放大

transform: scale(number) number>0&&number<1 缩小

旋转转换

transform: rotate(deg) deg变大 沿着顺时针 deg变小 沿着逆时针旋转

3D转换

1.1 3D坐标系

1.2 3D平移

1.3 3D旋转变换

|

1.4 视角

1.5 3D呈现并实现

flex布局

2.1 定义:

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

2.2 为什么要学习flex布局

1
2
3
更多的布局在移动端,但是很多布局如果用传统的display float position来布局非常的麻烦
元素水平垂直居中, 两列布局也比较难
flex布局其实就是为了解决传统布局不灵活的状态

2.3 flex布局的基本的术语

1
2
3
4
5
主轴: 任何伸缩容器都有两个轴  主轴一般是水平的  主轴的方向是可以变的

侧轴: 永远垂直于主轴的

伸缩容器:只要有display:flex属性的盒子 都是伸缩容器
1
伸缩项目:只要在伸缩容器中的直接子元素都是伸缩项目

2.4 属性

  • 给伸缩容器添加的属性

    1.让元素变成伸缩容器
    display:flex
    2.如何去改变主轴的方向
    flex-direction:

    row  水平(从左往右 默认的)
    row-reverse 水平反向
    column 竖直的
    column-reverse 竖直反向
    

    3.调整伸缩项目在主轴方向上的对其方式
    justify-content

    flex-start 起始点对齐
    flex-end  终止点对齐
    center 居中
    space-between 两端对齐
    space-around  空间环绕  元素两边的距离是一样的
    

    4.调整伸缩项目是否换行
    flex-wrap

    nowrap 不换行
    wrap    换行
    

    5.调整换行后的结果
    align-content(只适用于换行后)

    flex-start 起始点对齐
    flex-end   终止点对齐
    center     居中
    space-between 两端对齐
    space-around  空间环绕
    stretch    拉伸(默认的)
    

    6.调整不换行的结果(侧轴对齐)
    align-items(用在调整不换行的结果比较多)

    flex-start 起始点对齐
    flex-end   终止点对齐
    center     居中
    stretch    拉伸
    
  • 给伸缩项目的属性

    1.设置伸缩项目在伸缩容器中所占的剩余空间
    flex 数字代表份数
    2.设置某个伸缩项目自己的对齐方式

    align-self:
    flex-start 起始点对齐
    flex-end   终止点对齐
    center     居中
    

    3.伸缩项目的排列顺序
    order 值随便写 只要值越小 排列越靠前