css（5）

字体引入

@font-face{} css3中一个模块，主要把自定义的web字体嵌入到你的网页之中

font-family: ;下载的字体名称

src:url( );字体文件

怪异盒模型

box-sizing:

border-box;怪异盒模型

content-box;标准

弹性盒

display: flex;

子元素默认横向排列

如果子元素是行内元素，行内元素会变成块元素

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

flex-direction:弹性盒方向

row水平排列

column垂直排列

row-reverse反向水平排列

column-reverse反向垂直排列

主轴侧轴对齐方式

justify-content：；调整主轴对齐方向

flex-staet主轴靠左

flex-end主轴靠右

center主轴靠中间

space-between两端对齐方式

space-around自身左右两边相等

调整主轴水平垂直，justify-content:；也跟着调整

align-items：；调整侧轴对齐方式

flex-staet主轴靠左

flex-end主轴靠右

center主轴靠中间

折行与行间距

flex-wrap: wrap  ;折行

align-content:；行间距

flex-staet主轴靠左

flex-end主轴靠右

center主轴靠中间

space-between两端对齐方式

space-around自身左右两边相等

项目对齐方式

align-self: ；

flex-start上

flex-end下

center中间

baseline

stretch拉伸（不设置高度）

项目调整顺序

order：；默认为零（数值越小越靠前支持负数）

项目剩余宽高

flex：1；占满剩余空间

滚动条消失

::-webkit-scrollbar{display: none;}

横向滚动

flex-shrink: 0;（可以让文字横着排)

加入其他css属性就可以实现横向滚动

多列布局

column-count:  ;（填数值）显示的列数

column-gap:      ;（填数值）调整列间距

column-rule:      ;（和边框差不多）列边框

column-fill:        ;（auto）列内容高度统一

column-width:    ;（和宽度差不多）调整列宽度

column-span:    ;（all）横跨所有列（一般写标题的时候用）

瀑布流

break-inside: avoid;（禁止盒子内部折行）

响应式布局-媒体查询

含义

媒体查询可以让我们根据设备显示器的特征（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定css样式

媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、hright

和color……使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

@media all and （min-width：320px）{

body {background-color：blue；}

}

设备类型（默认为all）

media_type          设备类型说明

all                  所有设备

aural              听觉设备

braille              点字触觉设备

handled            便携设备，如手机，平板电脑

print                打印预览图

projection          投影设备

screen              显示器，笔记本，移动端等设备

tty                  如打字机或终端等设备

tv                  电视机等设备类型

embossed            盲文打印机

screen是媒体类型里的一种，css2.1定义了10种媒体类型

and被称为关键字，其他关键字还包括not（排除某种设备），only（限定某种设备）

（min-width：400px）就是媒体特性，其被放置在一对圆括号中。

pc客户端或大屏幕设备：1028px 至更大

@media only screen and （min-width：1029px）{}

竖屏

@media screen and （orientation：portrait)  ant（max-width：720px）（对应样式）

横屏

@media screen and（orientation：landscape）（对应样式）

em与rem

em：相对单位，相对于父元素的字体大小。div width：10em；

rem：相对单位，相对单位，相对于根元素（heml）字体大小，div width：10rem