Html Css笔记 - sunshinegirl_7(4)_H5之家 - 中国HTML5教程资源分享第一站

document.write('<meta name="viewport" content="width=device-width,initial-scale='+iScale+',minimum-scale='+iScale+',maximum-scale='+iScale+'" />');

</script>

处理设备高度固定屏幕高度：

document.body.style.height=document.documentElement.clientHeight+"px";

</script> 加入body第一个

响应式（媒询media）

媒体类型

all 所有的媒体类型

screen 彩屏设备

print 打印设备

handheld 手持设备

braille 盲文触觉设备

embossed 盲文打印机

projection 投影

speech 听觉设备

TTY

TV 电视

关键字

and

not

only

媒询三种引入方式

1.<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />

2.@import url("css/style.css");

3.直接写入style里面。

@media all

{

.box{

width:100px;

}

弹性盒模型（需要加前缀）

display：flex == display：inline-flex 类似浮动，不用清浮动

在改类型的元素内子元素可以设置margin：auto auto；

设置主轴方向（flex-direction：）

row 从左向右排列（默认值）

row-reverse 从右向左

column 从上到下

column-reverse 向下到上

主轴内元素对齐方式（justify-content：）

flex-start 元素在开始位置富裕空间在另一侧（默认）

flex-end 元素在末尾位置富裕空间在起始处

center 元素居中富裕空间平分左右两侧

space-between 富裕空间在元素之间平分

space-around 富裕空间在元素两侧平分

侧轴对齐（align-items：为对齐元素的父集设置）

flex-start 元素在开始位置富裕空间在另一侧（默认）

flex-end 元素在末尾位置富裕空间在起始处

center 元素居中富裕空间平分左右两侧

注意：align-self 也是侧轴对齐但是用来写在对齐元素的样式内！！！

换行（flex-wrap：）

nowrap（默认）

wrap 换行

wrap-reverse 反向换行

其中主轴对齐方式与换行可以写集合

flex-flow：row（主轴对齐方式） wrap（换行）

堆栈伸缩行（algin-content：）

algin-content 会更改 flex-wrap 的行为

它和 align-items 相似，但是不是对齐伸缩项目，它对齐的是伸缩行。

flex-start

flex-end

center

space-between

space-around

oder（在元素的排列位置，给子元素加人） oder=0（默认）

遮罩（mask）

-webkit-mask：url（img）

mask：用背景图片来覆盖掉图片。

删栏（columns）加浏览器前缀

column-width 栏目宽度

column-cunt 栏目列数

column-gap 栏目距离

column-rule 栏目间隔线

column-fill 栏目高度是否统一

外联框架

ioc 网页小标

<head>

<title>无标题文档</title>

</head>

热区

</map>

shape="rect" 矩形

coords="左上角X,左上角Y,右下角X,右下角Y"

shape="circle" 圆形

coords="圆心的X,圆心的Y,半径"

shape="poly" 多边形

coords="第1个点X,第1个点y,第2个点X,第2个点y,第3个点X,第3个点y......"

视频（优酷视频）:

来源于同学培训html/css基础的一份笔记,信息量很大