前端与CSS(下)|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第四天

一.Flex 布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex 是 Flexible Box 的缩写，意为"弹性布局",用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。 简单的分为容器属性和元素属性。

1. 容器的属性：

• flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
• flex-flow： .box { flex-flow: || ; }
• justify-content：对其方式，水平主轴对齐方式
• align-items：对齐方式，竖直轴线方向
• align-content

2. 项目的属性（元素的属性）：

• order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
• flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
• flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小
• flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
• flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
• align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖
• align-items，默认属 性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

二.Rem 布局

首先 Rem 相对于根(html)的 font-size 大小来计算。简单的说它就是一个相对单例 如:font-size:10px;,那么（1rem = 10px）了解计算原理后首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem 布局的本质是等比缩放，一般是基于宽度。

优点：可以快速适用移动端布局，字体，图片高度

缺点：

• 目前 ie 不支持，对 pc 页面来讲使用次数不多；
• 数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；
• 在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

三.百分比布局

通过百分比单位 " % " 来实现响应式的效果。通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。 直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height 百分比相 对于 height，width 百分比相对于 width。 padding、border、margin 等等不论是垂直方向还是水平方向，都相对于直接父元素的 width。 除了 border-radius 外，还有比如 translate、background-size 等都是相对于自身的。

缺点：

• 计算困难
• 各个属性中如果使用百分比，相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。

四.浮动布局

浮动布局:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变的好像浮动元素不存在一样。

优点： 这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

缺点： 最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

五.元素的显示于隐藏

1. dispaly属性

• dispaly属性用于设置一个属性应如何显示
• dispaly:none;隐藏对象
• dispaly:block;除了转换为块级元素之外，同时还有显示元素的意思
• dispaly隐藏元素后，不再占有原来的位置

2. bisibility可见性

• bisibility属性用于指定一个元素应可见还是隐藏
• visibility:sisible;元素可视
• visibility:hidden;元素隐藏
• visibility隐藏元素后，继续占有原来的位置

3. overflow溢出

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么

属性值	描述
visible	不剪贴内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

六.CSS用户界面样式

鼠标样式cursor

 li{cursor:pointer}

设置或检索在对象上移动的鼠标指针采集何种系统预定的光标形状

属性值	描述
default	默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线outline：

给表单添加outline:0;或者 outline:none;样式之后，就可以去掉默认的蓝色边框

nput{outline:none;}

防止拖拽文本域resize

 textarea{resize:none;}

vertical-align属性应用

使用场景：经常用于设置图片或者表单(行内块元素)和文字垂直对齐

语法：
        vertical-align:baseline|top|middle|bottom

值	描述
baseline	默认。元素放置父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

溢出的文字省略号显示

1. 单行文本溢出显示省略号--必须满足三个条件

先强制一行内显示文本

white-space:nowrap;(默认normal自动换行)

超出部分隐藏

overflow:hidden;

文字用省略号替代超出的部分

 text-overflow:ellipsis;

2. 多行文本溢出显示省略号(有兼容性)

overflow:hidden;
text-overflow:ellipsis;

弹性布局显示

dispaly:-webkit-box;

限制在一个块元素显示的文本的行数

-webkit-line-clamp:2;

设置或检索伸缩盒对象的子元素的排列方式

-webkit-box-orient:vertical;

七.HTML5的新特性

<header>:头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

新增的多媒体标签：

音频：<audio src="文件地址" controls="controls"></audio>
    视频：<video src="文件地址" controls="controls"></video>
    

八.CSS新特性（css新增选择器）

结构伪类选择器

nth-child（n）选择某个父元素的一个或多个特定的子元素
n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始。。。
n可以是关键字，even偶数，odd奇书
公式        取值
2n          偶数
2n+1        奇书
5n          5 10 15 .。。。
n+5         从第5个开始（包含第5个）到最后
-n+5        前5个（包含第5个）
 

伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTMP标签，从而简化HTML结构

        选择器          简介
        ::before        在元素内部的前面插入内容
        ::after         在元素内部的后面插入
        

注意：

• before和after创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• 语法：elemnt::before{}
• before和after必须有content属性
• before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为1

九.CSS3盒子模型（补充）

CSS3中可以通过box-sizing来指定盒模型，有两个值：即指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变 可以分为两种情况：

         1.box-sizing:content-box盒子大小为width+padding+border（以前默认的）
        2.box-sizing:border-box盒子大小为width
        
        

box-sizing属性

    box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit
    content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。【标准盒子模型】
    border-box：为元素设定的宽度和高度决定了元素的边框盒。【IE 盒子模型】
    inherit：继承父元素的 box-sizing 值。
    

CSS滤镜filter：

   filter CSS属性将模糊或颜色偏移等图形效果应用于元素
        filter:blur(5px); 数值越大越模糊
        

CSS3 calc函数：

      width:calc(100%-30px)
      

CSS3过度(重点)

过度 transition 过度动画 搭配 :hover 一起使用

transition：要过度的属性 花费时间 运动曲线 何时开始

• 1.属性：想要变化的CSS属性，宽度高度 背景颜色 你外边距 如果想要所有的属性都变化过度写一个all就可以
• 2.花费时间：单位是 秒（必须写单位） 列：0.5S
• 3.运动曲线：默认是ease（可以省略）
• 4.何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0S（可以省略）

十.CSS3 2D转换

2D转换： 转换（transform） 移动：translate 旋转：rotate 缩放：scale

         语法：translate
            transfrom:translate(x,y)
            transfrom:translatexX(n)
            transfrom:translateY(n)
            

重点：

• 定义2D转换中的移动，沿着X，Y轴移动元素
• translate最大的优点：不会影响到其他元素的位置
• translate中百分比单位是相对于自身的元素translate：（50%,50%）
• 对行内标签没有效果

rotate:

            transform:rotate（度数）
            

重点：

• rotate里面跟度数，单位是deg比如rotate(45deg)
• 角度为正时，顺时针，负时，为逆时针
• 默认旋转的中心点时元素的中心点

2D转换中心点transform-origin：设置元素旋转的中心点

 语法:transform-origin:x y;

重点:

• x y 用空格隔开
• 默认转换的中心点是元素的中心点(50% 50%)
• 可以设置像素或者方位名词(top bottom left right center)

2D转换之缩放scale：

  语法:transform:scale(x,y);

注意:

• 用逗号分隔 写的是数字不跟单位
• transform:scale(1,1) 宽和高都放大一倍,相当于没有放大
• transform:scale(2) 只写一个参数,第二个参数则和第一个参数一样,相当于scale(2,2)
• transform:scale(0.5,0.5) 缩小
• 优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子

十一.动画

动画的基本使用

用keyframes定义动画(类似定义类选择器)

@keyframes动画名称{
     0%[//from]{
         //开始
     }
     100%[//to]{
         //结束
     }
 }
 

动画的使用

  div{
         //调用动画
         animation-name:动画名称;
         //持续时间
         animation-duration:持续时间
     }
     
     
     

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

animation:myfirst 5s linear 2s infinite alternate;

注意:

• 简写属性里面不包含animation-play-state
• 暂停动画:animation-play-state:puased;经常和鼠标经过配合使用
• 想要动画走回来,而不是直接跳回来:animation-direction:alternate
• 盒子动画结束后,停在结束位置:animation-fill-mode:forwards

速度曲线细节： animation-timing-function:规定动画的速度曲线,默认是ease

值	描述
linear	动画从头到尾的速度是相同的 匀速
ease	默认 动画以低速开始 然后加快 在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
teps()	指定了时间函数中的间隔数量(步长)

十二.3D转换

transform:translate3d(x,y,z);

透视perspective（透视写在被观察元素的父盒子上面的）

• d:就是视距
• z:就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大

3D旋转rotate3d

transform:rotateX(45deg)
transform:rotateY(45deg)
transform:rotateZ(45deg)
transform:rotate3d(x,y,z,deg)

以上是结合课程和自己所学总结的所有CSS笔记 加油！！！