前端学历历程8

CSS3

文本阴影

text-shadow：10px 10px 1px  red
-------------------------------------
第一个10px表示水平方向位移
第二个10ox表示垂直方向位移
第三个1px表示模糊程度
red 阴影颜色

属性值

h-shadow	必须的。水平阴影的位置，允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

圆角边框

div{border-radius：10px 10px...；}
----------------------------
单位可以是px或百分比
v1，四个角一样
v1，v2，左上右下，左下右上一致
四个角从左上按顺时针转

div{border-radius：30px/60ppx；}
--------------------------------
30px/60px 水平/垂直方向

正方形变圆形：border-radius设置为盒子的一半50%

长方形设置圆角：不常用百分比，50%变为椭圆；常使用具体的值。

div{border-radius：50% 50% 0 0；}
----------------------------------------
长方形变为半圆

div{border-radius：200px 0 0 0;}
-----------------------------------
width:为200px
height：为200px
则图形为1/4扇形

字体引入

字体模块：@font-face

@font-face是CSS3中的一个模块，他主要把自己定义的web字体嵌入到你的网页中，随着@font-face模块的出现，我们在web的开发中使用字体不怕只能使用web安全字体（@font-face这个功能早在IE4就支持）

@font-face{
font-family:<yourWebFontname>
src:<source>[<form>][<source>[<form>]]*;
[font-weight:<weight>];
[font-style:<style>];
}
----------------------------------------------
@font-face语法说明：

1.yourWebFontname:此值指的就是你自定义字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。

2.source：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝对路径。

怪异盒模型（{box-sizing：border-box；}）：

更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改。

属性：box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。

属性值：content-box，这是由CSS2.1规定的宽度高度行为。宽度和高度分别应用到元素内容框。在宽度和高度之外绘制元素的内边距和边框。

属性值：border-box，为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

{box-sizing：border-box；}

弹性盒模型（一种新的布局方式，特别适合移动端布局{display：flex；}）

{display：flex；}

{margin：auto；}--------只有一个元素时，自动居中了

影响：

1.子元素默认横向排列

2.行内元素，变成块级元素

3.只有一个元素的时候，margin：auto 自动居中

修改主轴方向：

{flex-direction：row/column/row-reverse/column-reverse;}

主轴侧轴对齐方式

{justify-content：flex-start/center/end;}------调整主轴对齐方式
{justify-content：space-between/space-around;}-----两端对齐、距离环绕

{align-items：flex-start/center/end;}--------调整侧轴对齐方式

折行与行间距

{flex-wrap:wrap}-------折行等间距排列
{align-content：flex-start/end/center/space-around/space-between}------控制折行后的行间距

项目对齐方式

{align-self：flex-start/flex-end/center/baseline/stretch}
-------------------------------------------------------------
baseline=flex-start
stretch:高度/宽度拉伸（没有设置高度/宽度默认拉伸）

项目调整顺序

{order：0}---------默认值

项目剩余宽高

{flex：数值}--------占满空间