标准盒模型和怪异盒模型

怪异盒模型

怪异盒模型又称IE盒子模型，其中怪异盒子模型的 width 等于 content + padding + border 的宽度，怪异盒子模型的 height 等于 content + padding + border 的高度。

标准盒模型

标准盒模型又称W3C标准盒模型，其中标准盒模型的 width 等于 content 的宽度，标准盒模型的 height 等于 content 的高度。

css样式

在 css3 中添加了对盒模型设置的属性 box-sizing，可以根据需要自由调整。浏览器支持：IE8+

content-box：默认值，盒子宽度高度等于content（标准盒模型）。

border-box：盒子宽度高度等于content + padding + border（怪异盒模型）。

padding-box：盒子宽度高度等于content + padding。

inherit：从父元素中继承 box-sizing 属性的值。

bfc 是什么

Bfc 是块级格式上下文，就是一个独立的渲染区。

Bfc 触发条件

Float 属性不为 none

Position 为 absolute 或 fixed

Display 为 inline-block，flex，inline-flex

Overflow 不为 visible

css3 新增哪些属性

css3 的新选择器

E:nth-child(n) 选择器匹配其父元素的第 n 个子元素，不论元素类型，n 可以使数字， 关键字，或公式

E:nth-of-type(n) 选择与之其匹配的父元素的第 N 个子元素

E:frist-child 相对于父级做参考，“所有”子元素的第一个子元素，并且“位置” 要对应

E:frist-of-type 相对于父级做参考，“特定类型”（E）的第一个子元素

E:empty 选择没有子元素的每个 E 元素

E:target 选择当前活动的 E 元素

::selection 选择被用户选取的元素部分

属性选择器 E[abc*=”def”] 选择 adc 属性值中包含子串”def”的所有元素

文本

text-shadow:2px 2px 8px #000;参数 1 为向右的偏移量，参数 2 为向左的偏移量， 参数 3 为渐变的像素，参数 4 为渐变的颜色

text-overflow：规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省 略)

text-wrap：规定文本换行的规则

word-break 规定非中日韩文本的换行规则

word-wrap：对长的不可分割的单词进行分割并换行到下一行

white-space：规定如何处理元素中的空白

white-space:nowrap 规定段落中的文 本不进行换行

边框

border-raduis 边框的圆角

border-image 边框图片

背景

rgba：background-color：rgba(xxx,xxx,xxx,0.x) 可以用来设置背景颜色，最后一位表示设置的背景颜色的透明度

backgrounnd-size:cover/contain，其中 background-size：cover，会使“最大” 边进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。background-size: contain，会使“最小”边进行缩放，另一边同比缩放，不一定铺满容器，会完整 显示图片

背景渐变

linear-gradient：线性渐变，background-image:linear-gradient(方向，颜色1，颜色2，颜色3)

方向：方法一：默认从上到下；例如：

to top 从下到

to left top 右下角到左上角

方法二：通过调节角度改变渐变方向，系统默认的方向为180deg，例如：

0deg +为顺时针 -为逆时针

radial-gradient：径向渐变，background-image:radial-gradient(方向，颜色1 停止位置，颜色2 停止位置，颜色3 停止位置)

方向包含以下参数

shape size at position

shape 渐变的形状

ellipse 椭圆 默认

circle 圆形

size 渐变半径大小

farthest-corner 最远角（默认）

farthest-side 最远角

closest-corner 最近角

closest-side 最近边

（ps：改变渐变半径为起始点到哪个点为半径例如起始点到最远角为半径）

at position 渐变的起始点，默认第一个值是水平方向，第二个值是垂直方向，默认值是中心点，数值和百分比只写一个值默认为水平方向偏移；

数值

百分比 参考的是容器的宽高

方位 left right center (水平方位) top bottom center(垂直方位)

以上两个渐变在前面加个repeat就变成了平铺对应的渐变

文字渐变

和背景图片的渐变一个操作，先写一个背景颜色渐变然后在后面再加一个：

-webkit-background-clip:text;

background-clip：背景图片裁剪；

text：只有文本的地方显示背景图片；

多列布局

column-count

column-width

column-gap

column-rule

过渡

transition transition-property:width //property 为定义过渡的 css 属性列表，列表以逗号分隔

transition-duration:2s; //过渡持续的时间，持续2s

transition-timing-function:ease; //过渡的运动曲线

transition-delay:5s //过渡延迟时间， 5s后进行

动画、旋转、平移、缩放、倾斜

animation:动画

transform ：translate（x,y) rotate(deg) scale(x,y)

可以分开单独写某一个，也可以把某一个的xy单独拿出来用，在单词和括号中间加大写的X、Y就行了

transform:translateX(x);

flex 布局

弹性盒布局

弹性盒布局有哪些属性？

改变主轴的排列方式：flex-direction

属性值：row（默认 x 为主轴） row-reverse（横向反向排列） Column（y 轴为主轴） column-reverse（纵向反向排列）

子元素在弹性盒子里面的主轴的对齐方式：justify-content：

属性值：flex-start（默认从开始地方排列） flex-end（从末端开始） Center（居中） space-between（两端对齐，中间自动分配） space-around（完全自动分配空间）

子元素在弹性盒子里面的侧轴的对齐方式：align-items：

定位方式有哪些？区别是什么？

@media 媒体查询