HTML5学习日记 －－－ 4.5日

Posted 2020-07-04 小蚂蚁222

5，Css3响应式布局

媒体类型
　　all 所有媒体
　　braille 盲文触觉设备
　　embossed 盲文打印机
　　print 手持设备
　　projection 打印预览
　　screen 彩屏设备
　　speech ‘听觉‘类似的媒体类型
　　tty 不适用像素的设备
　　tv  电视

关键字
　　and
　　not      not关键字是用来排除某种制定的媒体类型
　　only     only用来定某种特定的媒体类型

 

媒体特性
　　(max-width:600px)
　　(max-device-width: 480px)  设备输出宽度
　　(orientation:portrait)  竖屏
　　(orientation:landscape)    横屏
　　 (-webkit-min-device-pixel-ratio: 2) 像素比
　　devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips

样式引入
　　<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
 　　@import url("css/reset.css") screen;
　　@media screen{
   　　   选择器{
    　　 属性：属性值；
    　　 }
  　　 }

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”>
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}

 

<link rel="stylesheet" type="text/css" href="styleA.css"  media="screen and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleC.css"    media="screen and (max-width: 600px)">

 

    移动端meta

<meta name="viewport" content="" />
width [pixel_value | device-height]
height [pixel_value | device-height]
user-scalable 是否允许缩放 （no||yes）
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

 

1，弹性盒模型

注意在使用弹性盒模型的时候 父元素必须要加display:box 或 display:inline-box
Box-orient 定义盒模型的布局方向
　　Horizontal 水平显示
　　vertical 垂直方向
box-direction 元素排列顺序
　　Normal 正序
　　Reverse 反序
box-ordinal-group 设置元素的具体位置

Box-flex 定义盒子的弹性空间
　　子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
box-pack 对盒子富裕的空间进行管理
　　Start 所有子元素在盒子左侧显示，富裕空间在右侧
　　End 所有子元素在盒子右侧显示，富裕空间在左侧
　　Center 所有子元素居中
　　Justify 富余空间在子元素之间平均分布

box-align 在垂直方向上对元素的位置进行管理
　　Star 所有子元素在据顶
　　End 所有子元素在据底
　　Center 所有子元素居中

2，盒模型阴影

用法
box-shadow:[inset] x y blur [spread] color
参数
　　inset：投影方式
　　inset：内投影
　　不给：外投影
　　x、y：阴影偏移
　　blur：模糊半径
　　spread：扩展阴影半径
　　先扩展原有形状，再开始画阴影
　　color

 

3，其他盒模型新增属性

box-reflect 倒影
　　direction  方向     above|below|left|right;　　
　　距离
　　渐变（可选）
resize 自由缩放
　　Both 水平垂直都可以缩放
　　Horizontal 只有水平方向可以缩放
　　Vertical 只有垂直方向可以缩放
　　注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放

box-sizing 盒模型解析模式
　　Content-box  标准盒模型 width/height=border+padding+content
　　Border-box 怪异盒模型 width/height=content

 

 

4，Css3分栏布局

column-width 栏目宽度
column-count 栏目列数
column-gap   栏目距离
column-rule  栏目间隔线