HTML5学习日记 --- 4.5日

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  栏目间隔线

时间: 2024-10-28 10:49:24

HTML5学习日记 --- 4.5日的相关文章

小白Html5学习日记01

前言 大概是在14年的10月就开始加入前端开发的大军,当时对于前端开发的感觉就是几个词  “网页设计” “酷” “入门门槛低” “成就感”.于是乎自己半路出家的去学校图书馆找了基本html的书,开始学习了起来. 一开始学习html确实是毫不费劲,配合着w3cschool网站的文档很顺利的看完了整个教程,但是在真正开始实践写网页的时候却走了不少弯路.还深刻记得当时跟着一个已经很久没有更新的教程网站用 表格布局的方式 去写网页的样式,现在想起来真是觉得好笑.那时确实是一没人带,二没有耐心,恒心,一段

html5学习日记2-表格

<html><head>    <meta charset="UTF-8">    <title>lala</title>    <meta name="keywords" content="hahaha"/>    <meta name="description" content="来来我是一颗菠菜" /><styl

html5学习日记1

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>lala</title><style>    .stl{        background:#f0f;    }    #imag{        background:#ccc;    }    </style>    </head>    <

HTML5 学习

1.details元素 details元素标识用户要求得到并且可以得到的细节信息,用于描述文档或文档某个部分的细节.它可以与summary元素配合使用.summary元素提供标题或图例.标题是可见的,用户点击标题时,会显示出细节信息,也就是details里面定义的信息. <details> <summary>HTML 5</summary> This document teaches you how to learn about HTML 5 </details&

html5学习(一)--canvas画时钟

利用空余时间学习一下html5. 1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <canvas id="clock" width="500" height="500"></canvas> 6 <script> 7 var clock=document.getElementById('cloc

HTML5 学习总结(四)——canvas绘图、WebGL、SVG

HTML5 学习总结(四)--canvas绘图.WebGL.SVG 目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML5游戏开发 2.2.1.Cocos2D-HTML5 2.2.2.Egret(白鹭引擎) 三.SVG 3.1.SVG Hello Wrold 3.2.多种引入SVG的方法 3.3.画直线 3.4.画椭圆 3.5.文本与矩形 3.6.向

canvas学习日记一

由于工作的需求,促进我学习html5 canvas技术,canvas是html5最强大的元素之一.使用它可以在浏览器中做一番奇妙的事情.大家或多或少都听过canvas的强大用处,我这里就不再赘述了. canvas的强大功能是通过canvas的context对象表现出来的,该环境变量是可以从canvas元素身上获取. 下面先看一个canvas的例子方便讲解:在canvas上显示一个字符串,该字符串大致与canvas水平垂直居中.代码如下: <!DOCTYPE HTML> <html lan

HTML5学习总结——HTML5入门与新增标签

一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序(RIA)对 Flash, Silverlight, JavaFX 一类浏览器插件的依赖. 1991年HTML1.0标准出现1997年HTML4.0发布,4.0标准下的浏览器局限性Flash (安全与稳定堪忧.耗电.触摸.不开放)SilverlightJavaApplet2008年HTML5出现, W

学习日记之状态模式和Effective C++

状态模式(State):当一个对象内在状态改变时,允许改变其行为,这个对象看起来像是改变了其类. (1),状态模式主要负责解决的是当控制一个对象转换的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同状态的一系列类中,可以把复杂的判断逻辑简化. (2),状态模式的好处是将与特定状态相关的行为局部化,并且将不同状态的行为分割开来. (3),将特定的状态相关的行为都放入一个对象中,由于所有与状态相关的代码都存在于某个ConcreteState中,所以通过定义新的子类可以很容易地增加新的状态和