html-css

目录

• Day01
  • 标签
  • 行元素
• Day02
  • 表单元素
  • css选择器
  • 伪类选择符
  • 行内元素
  • 块元素
  • 表格
• Day03
  • 文本相关属性
  • 列表相关属性
  • 背景相关属性
  • 浮动属性
• Day04
  • 边框-border
  • 内边距-padding
  • 外边距-margin
  • 坑1 坑2 坑3
• Day05
• Day06
• Day07
• Day08
• Day09
• Day10
  • seo,sem
  • 高级表单
    • input
  • 高级表格
• Day11
  • 新增的HTML5标签
    • datalist
    • video
  • 智能表单的使用和规范
• Day12
  • 属性选择器
  • 结构性伪类选择器(层级选择器)
    • first-child
    • last-child
    • nth-child
    • nth-last-child
    • last-child
    • nth-child(odd)奇数
    • nth-child(even)偶数
    • nth-of-type,nth-last-of-type
    • n元算
  • UI状态性伪类选择器
    • :focus
    • ::selection
    • :focus
  • 相邻兄弟选择器
    • +选择符
    • ~选择符
    • >选择符
  • 文本与字体的相关属性
    • 文本阴影属性
    • 显示服务端字体
    • 颜色值
  • 盒子阴影
    • box-shadow:5px 5px 10px #f80;
  • background-size
  • 圆角属性border-radius
• Day13
  • 怪异盒模型
  • 弹性盒子
  • 弹性盒流向(设置父元素上)
    • flex-direction:
  • 主轴横向对齐 (设置在父类容器上)
    • justify-content:
    • justify-:
    • justify-content:
  • 响应式设计布局概念
• Day14
  • 新单位rem
• Day16
  • [CSS3 渐变的语法及应用](#CSS3 渐变的语法及应用)
  • 动画过渡
  • [2D 转换的应用](#2D 转换的应用)

Day16

背

  //空格网页实体 
>      >
<      <
©     @
    
有序列表

    
有序
    
有序
    
有序


自定义列表

    
标题
    
内容
    
内容

 overflow:hidden; 自动检索子元素高度。     
 clear:both; 清除浮动  (在最后一个浮动元素之后添加一个块元素 来清浮动)

• 万能清除法：配合第二种方式通过伪元素实现

clear:after { content:""; clear:both; display:block; visibility:hidden;}

visibility:visible/hidden; (可见/隐藏)

• 浏览器内核：

  • Trident IE
  • Gecko 火狐
  • Webkit 原谷歌现苹果（Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）
  • Blink 现在opera和谷歌 (由Google和Opera 开发的浏览器排版引擎)
  • Presto 原opera （ 迅速的）

• 图片整合

  • 通过图片整合来减少对服务器的请求次数，从而提高页面加载速度。
  • 通过整合图片来减小图片的体积。
  • 增加了开发人员的负担。

• hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;

背背背背背背背背背背

BUg
行内块元素换行会产生4px空隙
BUg

*** #三个星号即以上 可以显示 虚横线效果

Day01

• 标签

• 双标记
  • <标记 属性=“属性值” 属性=“属性值”>
• 单标记
  • <标记 属性=“属性值” />

**写在<>中的第一个单词叫做标记，标签，元素。
标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。
一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
空标记没有结束标签，用“/”代替。

• 块状元素(天生能换行的元素)

• 行内元素(天生不能换行的元素)

• 行内块元素(天生不能换行但能设置宽高的元素)

• 表格元素

• 行元素

         加粗的标签
         倾斜的标签
         下划线标签
       加重语气的加粗标签
           加重语气的倾斜标签
         删除线
    
       文本标签
         超链接标签
    href        超链接属性
    target=“_blank” 新窗口打开
  

Day02

• 行内元素

a b strong span img label button input select textarea

• 块元素

header form ul ol table article div hr aside figure
canvas video audio footer

• 表格

    

 表格
width=“500” 表格宽度
height=“300”  表格高度
border=“1”  表格边框
bgcolor=“red” 表格背景颜色
cellspacing=“10” 单元格与单元格之间的距离
cellpadding=“10” 单元格与内容之间的距离
 表格行
align=“left/center/right” 水平对齐方式
 表格列
colspan=“2” 合并列   rowspan=“2” 合并行

• 表单元素

    
  表单
    name=“定义表单名”
    method=“get/post” 传输方式
    action=“请求地址”
    
    表单元素
    text 单行文本框
    password 密码输入框
    submit 提交按钮
    reset 重置按钮
  

• css选择器

  • 元素选择符(类型选择符)
  • 通配符
  • id选择符
  • class选择符
  • 群组选择符
  • 后代选择符
  • 伪类选择符

• 伪类选择符

  • a:link {属性:属性值;} 初始化状态
  • a:visited {属性:属性值;} 被点击后的状态
  • a:hover {属性:属性值;} 当鼠标滑过时候的状态
  • a:active {属性:属性值;} 当鼠标按下时候的状态

margin:0 auto; width:数值px;
能让块元素居中的属性

Day03

• 文本相关属性
  • font-size:12px; `3pt=4px,em是根据自身的字体大小来决定多少像素
  • font-style:normal/ italic [设置文本为斜体]
  • font-weight:normal(100-500)/ bold(600-900) [设置文本为粗体]
  • font-family: “文本字体1”,”文本字体2”; [文本类型]
  • text-align:left/center/right [文本水平对齐方式]
  • vertical-align:top/middle/bottom[垂直对齐方式]
  • line-height:数字px;[设置文本在一行内的高度]
  • 设置文本简写方式
    • font:加粗 倾斜 文本大小/行高 “字体”;
    • 最简方式 font:文本大小 “字体”;
    • 如果没有设置到的视为缺省值还原默认

text-decoration 文本修饰

none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
text-indent 首行缩进

文本大小写

text-transform:

uppercase 单词都大写
lowercase 单字都小写
capitalize 每个单词首字母大写

字间距{letter-spacing:value;} 控制英文字母和汉字的字距。
词间距{word-spacing:value;} 控制英文单词词距。

列表相关属性

• 列表 li 独有的属性
  • list-style-type[设置列表符号]
  • disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；
  • list-style-image:url(路径); [自定义图片列表符号]
  • list-style-position:outside(默认外边)/inside(里边)；[定义符号所在位置]

list-style:none;去掉列表符号

说明：通常我们都清空列表符号 因为列表符号在各浏览器显示无法统一 并且无法随心所欲的控制符号离文本内容的距离。

背景相关属性

• 背景颜色

  • background-color:#f00;

• 背景图片

  • background-image:url(图片路径);

• 背景图片平铺属性

  • background-repeat:
  • repeat 默认平铺
  • repeat-x 横向平铺
  • repeat-y 纵向平铺
  • no-repeat 不平铺

• 背景图位置

  • background-position:值1(水平) 值2(垂直)
  • left/center/right/数值 top/center/bottom/数值
  • 数值可以设置负值

• 背景简写：

  • background:颜色 图片路径 是否平铺 位置;

浮动属性

• 浮动属性
  • float:
    • none 默认不浮动
    • left 左浮动
    • right 右浮动

说明：页面出现上下布局时都用2个兄弟块元素来实现 而左右布局时 行元素因无法设置宽高这一点 无法实现我们经常想要的效果 所以有了浮动属性 浮动属性就是让 所有元素能够实现左右结构而存在 但是浮动元素也有很多不敬人意的地方。

如果父框未设置高度 则会出现“高度塌陷”的问题
原因是浮动元素不占“文档流”

阻止高度塌陷的方式(清除浮动)
给最后一个浮动元素添加块元素 设置
clear:both;

Day04

盒子模型

• 边框-border

  • 边框线型
    • (solid实线/dashed虚线/dotted点线/double双线)
  • 单边框设置
    • border-left: 单独设置左边框
    • border-right: 单独设置右边框
    • border-top: 单独设置上边框
    • border-bottom: 单独设置下边框
      简写： border:1px solid #f00;

• 内边距-padding

  • padding 内边距(填充)
  • 在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。

• 用法：

  • 1）用来调整内容在容器中的位置关系
  • 2）用来调整子元素在父元素中的位置关系。
  • 注：padding属性需要添加在父元素上。
  • 3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需
  • 从元素宽或高上减掉后添加的padding属性值。

• 属性值的4种方式：

  • 四个值：上 右 下 左 {padding:10px 20px 30px 40px;}
  • 三个值：上 左右 下 {padding:10px 20px 30px ;}
  • 二个值：上下 左右 {padding:10px 20px ;}
  • 一个值：四个方向 padding:20px

• 外边距-margin

  • 在设定页面中一个元素离另一个元素之间的距离。

• 1）浮动元素出现高度塌陷问题可以通过overflow:hidden;方式来解决

• 2）margin-top向父元素传递效果也可以被overflow:hidden; 来解决

    >      >
    <      <
  

overflow 除默认值visible以外其他值都居然自动检索子元素内容高度的功能。

• 坑1

两个元素上下都设置margin会重叠，左右不会

• 解：不要给上面的元素设置margin-bottom,一般都给下面的元素设置margin-top

• 坑2

第一个块状子元素的margin-top 会“无限”的像父元素传递

• 解：
  • 1.给父元素设置border-top
  • 2.给父元素设置padding-top
  • 3.给父元素设置浮动float
  • 4.给子元素设置浮动float
  • 5.给父元素设置一条神奇的属性overflow:hidden;//溢出隐藏

• 坑3

行元素 上下盒模型会穿透其他元素

• 解：不要给行元素设置上下盒模型

voerflow:hidden;

可以解决float高度塌陷问题,overflow:hidden;
会自动检索子元素高度给父元素设置；

• 还原网页
  • border:0;//清除边框
  • background:none//清除背景
  • 数字和小写字母会小于实际图片3像素；
  • 行元素换行会出现5px的空格
  • vertical-align:top/middle/botoom图片设置

DAY05

文本溢出

首先需要4个属性配合使用：

• width:200px; //文本超出多少才隐藏

• white-space:nowrap; //强制不换行

• overflow:hidden; //溢出隐藏属性

• text-overflow:ellipsis; //文本溢出隐藏时出现省略号

overflow 溢出属性

• visible 默认值

• hidden 溢出隐藏

• scroll 滚动条

• auto 超出时出现滚条 (body 的默认属性)

white-space:nowrap; 文本强制不换行

• 一般字母和数字没有空格不会换行 但中文会以文字为单位自动换行 这样在一行内文本是不会溢出
  text-overflow:ellipsis; 文本溢出时出现省略号的效果

• 扩展 如何让字母和数字没有空格的情况下自动换行 word-wrap:break-word; 自动换行属性

  • 行元素换行有6px距离

DAY06

块元素 (block)

默认宽度和父框一样宽 强制换行 能设置宽高
div p h1-h6 form dl dt dd ul ol 等

Day07

• 块元素 (block)

  • div p h1-h6 form dl dt dd ul ol 等

  默认宽度和父框一样宽 强制换行 能设置宽高

• 行元素 (inline)(内联元素)

  • a span b strong i em u s del 等

  元素不能设置宽高 在一行显示 宽高由内容撑大

• 行内块元素(inline-block)

  • 在一行显示 并且能设置宽高 能设置宽高的行内元素
  • img input select textarea 等

• 不显示元素(none)

  • 该类型是特点是元素隐藏不占文档流 有点类似备注的效果
  • 没有元素默认是这个类型

• 扩展 其实元素类型有18种之多但常用的类型只有4种

  • block inline inline-block none

p标签内禁止放天生的块元素

h标签内部禁止放h标签

• display:(元素类型)

  • block
  • inline
  • inline-block
  • none
    [可以转换元素类型的属性]

• display:none;消失类型

图片垂直居中

• 1

  • 设置父元素line-height:(行高)
  • 设置高度height
  • 设置图片vertical-align:middle;

• 2

  • 设置div父
  • 子 img i
  • div设置height
  • div-->text-align=center;
  • img-->vertical-align=middle;
  • i-->vertical-align=middle;height=100%;display=inline-block;

有满屏背景的用两个div,没有满屏背景的用一个div

DAY07

定位属性及应用

• position:(定位属性)

  • static 默认值

    • 所有元素默认的定位属性就是static 一般不用

  • absolute 绝对定位 (完全脱离文档流)

    • 绝度定位不会永远固定在浏览器某处
    • 自动向上检索 以最近的定位元素作为父元素 若检索不到就以html为父元素 来定位

  • relative 相对定位

    • 根据自身初始所在位置来定位

  • fixed 固定定位(完全脱离文档流)

    • 根据html来定位永远根据浏览器定位

  • sticky 粘性定位（css3属性）

    • relative和fixed合体 根据overflow来定位

只有定位元素可以使用left right top bottom z-index 属性

透明属性

透明属性opacity:0.5; 透明取值范围0-1 IE 678不支持

只支持IE fliter:alpha(opacity=50)

DAY08

子元素的盒模型总和等于父元素的width

• 最小高度自适应 min-height

  • min-height：最小高度；(IE6浏览器不识别该属性)
  • IE6 7兼容 *height

• 过滤器:

  • _(只有ie6能识别) _height:value;
  • (只有ie6、7识别) *height:value;
  • !important 优先级最高 (ie6识别不了)height:value !important;

• 伪元素选择符：

  • :after 最后一个子元素之后添加一个类似span的伪元素
  • :before 第一个子元素之前添加一个类似span的伪元素
    注：这两个伪元素必须添加 content 属性否则伪元素无效

:first-letter 定义内容区第一个字符的样式。(设置第一个文字)
:first-line:定义内容区第一行的样式。(设置第一行文字)
ie8以下不支持伪元素

元素隐藏方法

• display:none;//不占文档流
• opacity:0;//占文档流
• visibility:hideen;占文档流
• position:absolute/relative;left:-9999px;//absolute不占/relative占文档流

DAY09

• 图片间隙

  • div中的图片间隙
  • 描述：在div中插入图片时，图片会将div下方撑大三像素。
  • hack:将转为块状元素，给添加声明：display:block;

• 表单元素在一行高度不一致

  • 给表单元素添加声明：float:left;//一行表单加浮动

• 按钮元素默认大小不一致

  • 按钮元素的padding和border 大小会算在width,height里面

• 鼠标指针bug

  • 描述：cursor属性的hand属性值只有IE浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
  • hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;

• IE图片边框bug

  • a标签里的img会产生边框 解决给img添加border:0;

Day10

• seo

  • 网页三剑客 title,keyword,description
  • 图片优化(alt属性，title属性)
  • PageRank（pr值,友情链接）

• css规范

  • 命名方法（语义化命名，结构化命名）
  • ID:结构化: #header #footer
  • class: .border0 . red .font12 .clear

• CSS命名规则

  • 建议使用小写字母
  • 以英文字母开头，后面可以连接数字、字母、下划线、连接线，建议尽量使用英文字母，适当使用下划线和连接线；
  • 词必达意，名称要反映用途和相关信息，同时也要简短。

• 高级表单

  • 表单字段集
  • 字段级标题
  • 文本内容多行文本框

下拉框
    下拉框内容
    默认内容

//选中selected="selected"

• input

  • 表单元素
  • radio 单选框
    • checked=checked 默认选中
  • checkbox 复选框
    • checked=checked 默认选中
  • file 上传文件
  • button 自定义按钮
  • Image 图片按钮
  • hidden 隐藏
  • 提示信息标签

• 高级表格

  • 单元格间距(该属性必须给table添加)

    • border-spacing:value;

  • 合并相邻单元格边框table添加

    • border-collapse:separate(边框分开)/collapse(边框合并)；

  • 无内容单元格显示、隐藏

    • empty-cells:show/hide;

  • 表格布局算法

    • table-layout:auto/fixed(固定宽度，不会随内容多少改变单元格宽度）

  • 自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。

    • 缺点：较慢（因为它需要在确定最终的布局前访问表格中的所有内容）。
    • 优点：灵活

  • 固定表格布局

    • 优点：加快运行的速度,允许浏览器更快的对表格进行布局。
    • 缺点:不太灵活

• 表格标题

  • 标题内容

• `表格布局元素

  • th:表格列标题（放在tr里）
  • valign="top/bottom/middle/baseline" 垂直对齐方式(th td便签内属性)
  • rules="groups/rows/cols/all/none" 添加组分隔线

• 表格行分组

  • 表头
  • 表体
  • 表尾

Day11

新增的HTML5标签

• 语义化标签
  • 头标签
  • 导航标签
  • 表示文档的结构、栏目
  • 页脚
  • 文章标签
  • 侧边栏导航
  • 凸显文字

扩展：

• figure

  • 用来表示网页上一块独立的内容。

• figcaption

  • 用来表示figure的标题
  • 作为第一个或最后一个元素

• output

  • 显示表单元素结果。(对应input表单)

• datalist

  • 提供表单选项列表
  • datalist.html

• hgroup

• dialog

  • 会话框 默认隐藏绝对定位居中
  • Open 属性 非隐藏

• embed 嵌入插件标签

• video

  • 定义视频，比如电影片段或其他视频流
  • *.mp4 *.ogg *.webM

1.

2.

• audio

  • 定义音频，比如音乐或其他音频流

• canvas

  • 画布

• 智能表单的使用和规范

• 地址栏

输入无效地址会自动提示

• 输入数字

  • step 跳跃数
  • min 最小值
  • max 最大值

• 输入电子邮件

  • required 判断是否为空
  • multiple 可用逗号分隔邮件地址

提示信息 placeholder
关闭智能表单验证 ： novalidate=“false”
火狐关闭缓存：autocomplete=“off”

requires="requires"必填不能为空，通用属性

Day12

CSS3 选择器

• 属性选择器

  • 权重为10

  • [title] 选择所有title属性的元素

  • [title=a] 选择所有title=a的元素

  • [title=“1”] 值为数字或特殊字符必须加双引号

  • [class=“a b”] 值为多个必须加双引号

  • [class~=“a”] 选择用所有单词为a的元素

  • [class|=a] 选择要么a要么a-开头的完整单词的元素

  • [class^=a] 选择所有a开头的元素

  • [class$=a] 选择所有a结尾的元素

  • [class*=a] 选择所有带有a的元素

• 结构性伪类选择器(层级选择器)

  • :root 选择根目录 可以理解成html
  • :root{background:#f00;}
  • body{background:#00f;}
  • body :not(h1) 除子元素h1的所有子元素
  • p:empty 选择内容为空的元素(回车换行都不算空)
  • :target 选择被锚点选中的元素

  • first-child

    • ul li:first-child 选择第一个(子)元素

  • last-child

    • ul li:last-child 选择最后一个(子)元素

  • nth-child

    • ul li:nth-child(2) 选择第二个(子)元素

  • nth-last-child

    • ul li:nth-last-child(2) 选择倒数第二个(子)元素

      // 选择dl的后代元素dt并且dt必须是第一个子元素
      //w3school:选择属于其父元素的首个子元素的每个

      元素，并为其设置样式：
      dl dt:first-child{background:#ff0;}
      dl dd:last-child{background:#00f;}

• nth-child(odd)奇数

  • ul li:nth-child(odd) 所有正数下第奇数个(子)元素

• nth-child(even)偶数

  • ul li:nth-child(even) 所有正数下第偶个(子)元素

• nth-of-type,nth-last-of-type

  • div p:nth-of-type(2) 有关这个元素的第二个(子)元素
  • div p:nth-last-of-type(2) 有关这个元素的倒数第二个(子)元素
  • div p:only-child 只有p元素是唯一一个(子)元素才有效

• n元算

  • (n是从0开始计算无限大的数字)
  • ul li:nth-child(n+2) 匹配从第二个元素开始
  • ul li:nth-child(2n) 匹配偶数
  • ul li:nth-child(2n+1) 匹配奇数

• UI状态性伪类选择器

  • 权重为10

  • :focus

    • input:focus 元素获取焦点时的状态
  • input:enabled 元素可以时候的状态
  • input:disabled 元素禁用时候的状态
  • input:read-only 元素只读时候的状态
  • input:read-write 元素非只读时候的状态
  • input:checked 元素被选中时候的状态
  • input:default 元素默认有checked的状态
  • input:indeterminate 元素都没选中过的状态只支持google

  • ::selection

    • input::selection 元素被选取的状态//只能设置color background-color;

• 相邻兄弟选择器

  • +选择符

    • li+li 选择下一个元素

  • ~选择符

    • span~p 选择span之后所有的同级p元素

  • >选择符

    • .aaa>div 子选择器 只能选择亲儿子 class="aaa"下的第一层div

• 文本与字体的相关属性

  • 兼容前缀

    • -o- Presto
    • -ms- Trident
    • -moz- Gecko
    • -webkit- Webkit

  • 优雅降级

    • 一开始就构建网站针对高版本向低版本进行兼容
    • border-radius:5px;
    • -o-border-radius:5px;
    • -ms-border-radius:5px;
    • -moz-border-radius:5px;
    • -webkit-border-radius:5px;

  • 文本阴影属性

    • text-shadow:x坐标 y坐标 阴影大小 颜色
    • text-shadow:5px 5px 5px #f00;
    • text-shadow:5px 5px 5px #f00,2px 3px 4px #00f;
    • word-break:
      • normal 默认
      • keep-all 只能在半角空格或连接字符处换行
      • break-all 允许在单词内换行(会整个单词都换行)
    • word-wrap:
      • normal 默认
      • break-word 允许在单词内换行(单纯的换行)
    • text-transform:
      • uppercase 单词都大写
      • lowercase 单字都小写
      • capitalize 每个单词首字母大写

• 显示服务端字体

    @font-face {
    font-family:WebFont;
    src:url(“fonts/Fontin_Sans_B_45b.otf”);
    format("opentype");
    }
  

• format 声明文件类型

  • opentype *.otf
  • truetype *.ttf
  • *.eot 格式文件不需要声明 format

• 颜色值

  • rgba(155,155,155,0.5); 红色，绿色，蓝色，透明度
  • 只让背景透明 不让子元素透明
  • 例:background:rgba(0,255,0,0.5);

• 盒子阴影

  • box-shadow: X轴 Y轴 模糊的 大小 颜色；
    • （可设置内阴影 inset）
    • box-shadow: 2px 2px 10px 1px #000；
    • box-shadow: 2px 2px 10px 1px inset #000；//内阴影

• 与背景和边框相关样式(例：banground1.html)

  • background-clip : 设置背景显示区域
    • border-box padding-box content-box
  • background-origin 指定绘制背景图像时的起点
    • border-box padding-box content-box

  • background-size

  • background-size 指定背景中图像的尺寸
    • 大小 或 百分比
    • cover 按比例撑满背景
    • contain 刚好填满一边大小的尺寸
  • background-break 指定内联元素的背景图像进行平铺时的循环方式，浏览器支持不友好，暂时不需要了解

• 圆角属性border-radius

  • border-radius:10px 设置圆角元素
    • 可以设置 1-4个值 有点类似盒模型设置
  • (border-radius:10px/10px; 左边设置水平半径右边设置垂直半径,这种方式几乎用不到)
  • border-top-right-radius:50px;

• 边框颜色

  • border-color:#f00 #ff0 #f0f #00f;

• 图片边框

  • border-image:
    • 图片路径
    • 4个方向
    • 宽度
    • 平铺方式
    • stretch拉升 round平铺

Day13

• 怪异盒模型

  • box-sizing:border-box;
    • content-box 标准盒模型 (默认)
    • border-box 怪异盒模型

• 弹性盒子

  • display: 弹性盒子类型
    • box:将对象作为弹性伸缩盒显示。 (伸缩盒最老版本)
    • inline-box:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒最老版本)
    • flexbox:将对象作为弹性伸缩盒显示。 (伸缩盒过渡版本)
    • inline-flexbox:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒过渡版本)

• flex:将对象作为弹性伸缩盒显示。 (伸缩盒最新版本)

  • 父元素设置display:flex;子元素都被格式化为智能布局元素
  • inline-flex:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒最新版本)

注：设置在父元素上 使用弹性盒 float vertical-align 多列都无效

• 弹性盒流向(设置父元素上)

  • flex-direction:

    • row：横向从左到右排列（左对齐），默认的排列方式
    • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

    • column：纵向排列。

    • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
    • flex-direction.html
  • 弹性盒子子元素顺序(设置在子元素上)
    • order:
    • 负数靠前:(越小越前)
    • 0为原始位置
    • 正整数靠后(越大越后)

• flex-grow

  • 弹性盒子分配剩余空间(设置在子元素上)
    • flex-grow :
    • 0为默认
    • 分配提成 数字
  • 检索弹性盒的收缩比率(子元素设置)
    • flex-shrink:
    • 默认:1
    • 数字
    • 注：溢出时计算比例
  • 检索弹性盒伸缩基准值(子元素设置)
    • flex-basis:
    • 默认:auto
    • 数值
    • 注：计算数值比例
  • 伸缩性（设置子元素上）
    • flex:
    • 按提成分配 数字
    • 0 0 百分比分配
      *伸缩换行 (适用于父类容器上)

  • flex-wrap:

    • nowrap：当子元素溢出父容器时不换行。
    • wrap：当子元素溢出父容器时自动换行。
    • wrap-reverse：反转 wrap 排列。

• 主轴横向对齐 (设置在父类容器上)

  • justify-content:

    • flex-start： 左对齐
    • flex-end： 右对齐
    • center： 居中对齐
    • space-between: 分开对齐
    • space-around: 分开左右边距对齐

• 主轴纵向对齐 (设置在父类容器上)

  • align-content:(没有center-没效果)
    • flex-start： 上对齐
    • flex-end： 下对齐
    • center： 居中对齐
    • space-between: 分开对齐
    • space-around: 分开左右边距对齐
    • strecth 上下拉升对齐

• 侧轴对齐

  • align-items (设置在父) 、align-self (设置在子)
    • flex-start： 上对齐
    • flex-end： 下对齐
    • center： 居中对齐
    • baseline 基线对齐
    • stretch 上下拉升对齐

注:align-items基本与align-content差不多 就2个参数没有
弹性盒特性：
1.横向结构 默认高度和父元素一样高

flex简写 flex: 分配 0 10px;
flex: flex-grow、flex-shrink 、flex-basis缩写
默认值flex: 0 1 auto;
flex:none; flex:0 0 auto;
flex:auto; flex: 1 1 auto;
单一非负数字：该值为flex-grow值，flex-shrink为1，flex-basis为0%

• 静态布局 （常见布局px）

• 流式布局 （百分百布局）

• 输入框布局

• 悬挂式布局

• 多列布局

  • 创建多列
  • column-count: 数字
    • 属性规定元素应该被分隔的列数
    • 规定列之间的间隔
  • column-gap:数值
    • 属性规定列之间的间隔
    • 列规则
  • column-rule:
    • 属性设置列之间的宽度、样式和颜色规则

响应式设计布局概念

width=device-width:宽度等于当前设备的宽度;
initial-scale=1：初始的缩放比例(默认为1);
maximum-scale=1：允许用户缩放到得最大比例(默认为1)
user-scalable=no：用户不能手动缩放;

@media screen and (max-width:1000px) and (min-width:700px){
    body{background: #ff0088;}
}

• @media 媒体查询 (media query)
  • 基本语法
  • 外联CSS语法
    
    
    

Meta标签定义
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，
在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，
但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，
也可能比浏览器的可视区域要小。
(1)使用 viewport meta 标签在手机浏览器上控制布局

(2)隐藏苹果浏览器的工具栏和菜单栏。 全屏显示

(3)设置Web App的状态栏（屏幕顶部栏）的样式

Day14

• 新单位rem

  • rem是永远获取html的font-size值
  • (当屏幕尺寸是320px我想设置1rem=10% 那么就设置html的font-size:32px; 通过js来设置 屏幕尺寸除以10)

vw&rem混搭
100/设计图width
[1rem=font-size]
[1vw=moblie-width]
[1rem:1px/moblie-width;1rem=1px]

• 移动端图片img
  • 必须填写width height

Day15

• 写QQ界面

Day16

CSS3 渐变的语法及应用

• 线性渐变

  • linear-gradient (方向[可选],颜色1,颜色2)
  • -webkit-linear-gradient(top,#ff8,#f80);-moz-linear-gradient(top,#ff8,#f80);
  • 就是，一个方向到另一个方向笔直进行渐变

• 径向渐变

  • radial-gradient (正圆椭圆[可选],颜色1,颜色2)
  • 从起点到终点颜色从内到外进行圆形渐变
  • circle：渐变为最大的圆形；
  • ellipse：(椭圆)根据元素形状渐变，元素为正方形是显示效果与circle无异。

• 重复渐变

  • repeating-radial-gradient
  • 会按照规律一层一层循环

• 动画过度

  • transition:2s linear all;

• 定义过度属性

  • transition-property: all 或 属性名,属性名

• 定义过度时间

  • transition-duration: 2s

• 延迟多少时间开始

  • transition-delay: 2s
  • transition-timing-function:
  • linear 匀速 ease(默认) 慢快慢
  • ease-in 慢开始 ease-out 慢结束
  • ease-in-out 慢开始慢结束
  • cubic-bezier 自定义贝兹尔曲线
    • 第一条小于1 第二条大于1小于2 第三条小于1 第四条大于第3条小于1
    • -moz-transition-timing-function:cubic-bezier(.4, 1.9, .4, .5);

• 2D 转换的应用

• 2D 转换属性

• transform:

  • translate() 移动
    • 通过 translate() 方法，元素从其当前位置移动，根据给定的left（x 坐标） 和 top（y 坐标） 位置参数
    • 与position：relative区别:执行速度快
  • rotate() 旋转
    • 通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
  • scale() 缩放(是gay)
    • 通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
  • skew() 倾斜(是Q)
    • 通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
  • matrix() 合体写法（矩阵）
    • matrix() 方法把所有 2D 转换方法组合在一起。
    • matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
    • 缩放X, tan(X度), tan(Y度),缩放Y,位置X,位置Y

• transform-origin

  • transform-origin:right top;
  • right/center/left top/center/bottom;
  • 单值：transform-origin:right;
  • transform-origin:50px 50px;

transform-origin 允许你改变被转换元素的位置。
transform 向元素应用 2D 或 3D 转换。

Day17

• 3D转换

Internet Explorer 10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。
Opera,ie9仍然不支持 3D 转换 它只支持 2D 转换

• 3D 翻转方法：

  • rotateX(30deg)
  • rotateY(30deg)
  • 注： Internet Explorer 和
  • Opera
  • 不支持 rotateX, rotateY 方法。
  • 扩展
  • rotate和rotateZ()效果一样

• 3D位置移动 的3种写法

  • transform: translate3d(30px,30px,800px)
  • transform:translateZ(800px) translateX(30px) translateY(30px);
  • transform:translateZ(800px) translate(30px,30px);
  • 在2D的基础上多了1D (Z轴)
    3D视距
    perspective
    元素要使用3D效果 需要perspective属性配合
    方法1：
    父元素设置perspective:200px;

   
  
      
  
      
   
    
  div{perspective:200px;}
  p{width:100px;height:100px;
  transform:translate3d(0,0,-50px);background:#ff9;}
  
  

  方法2:
  子元素设置transform:perspective(200px);

  
  p{width:100px;height:100px;
  transform:perspective(200px) translate3d(0,0,-50px);
  background:#ff9;}
  
  

• 3D缩放翻转

  • scaleZ
  • 父框设置
    • perspective:1200px(3D视距)--平面看3D效果
    • transform-style:preserve-3d;(3D视角)--翻转的3D效果
    • （子元素保持3D位置）
    • transform-origin:left/top/right/bottom
    • 翻转位置

• 3D动画

  • CSS3 @keyframes 规则
  • 如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
  • @keyframes 规则用于创建动画。
  • 在 @keyframes 中规定某项 CSS 样式，
  • 就能创建由当前样式逐渐改为新样式的动画效果。
  • IExplorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
  • Chrome 和 Safari 需要前缀 -webkit-。
  • 注释：Internet Explorer 9，以及更早的版本，不支持 @keyframes 规则或 animation 属性。

• 语法：

• @ keyframes zidingyi{
  from {background: yellow;}
  to {background: green;}
  to {background: red;}
  }

• @-moz-keyframes myfirst{/* Firefox */{
  from {background: red;}
  to {background: yellow;}
  to {background: blue;}
  }

• 动画属性

  • animation: (可以理解为循环过度动画效果)
  • animation-name: 动画名
  • animation-duration: 时间 默认0
  • animation-timing-function: 曲线 默认ease
  • animation-delay : 延时 默认0
  • animation-iteration-count: 播放次数 默认1
  • animation-direction: 周期后是否倒放
  • animation-play-state: 是否暂停 默认 running
  • animation-fill-mode: 动画结束后的状态

• CSS3 动画

  • 当您在 @keyframes 中创建动画时，
  • 请把它捆绑到某个选择器的动画属性上，否则不会产生动画效果。
  • 通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器动画属性：
  • 规定动画的名称
  • 规定动画的时长

animation: name 5s linear 2s infinite alternate;
关键帧：

from to 0% 100%

• animation：一个动画可以给你多个元素使用，一个animation只可给一个元素
• 动画与动画过渡区别
  • 1.动画可以直接执行，动画过渡需要后期的事件伪类
  • 2.动画可以多次播放，动画过渡只能一次

data-自定义属性

opacity=0.5;//透明属性
position: ;//relative相对定位//绝对定位absolute//fixed固定定位
position fixed absolute relative
position absolute
position relative
position fixed
opacity:.7;