目录
- Day01
- Day02
- Day03
- Day04
- Day05
- Day06
- Day07
- Day08
- Day09
- Day10
- Day11
- Day12
- Day13
- Day14
-
Day16
- [CSS3 渐变的语法及应用](#CSS3 渐变的语法及应用)
- 动画过渡
- [2D 转换的应用](#2D 转换的应用)
Day16
背
//空格网页实体
> >
< <
© @
有序列表
<ol>
<li>有序</li>
<li>有序</li>
<li>有序</li>
</ol>
自定义列表
<dl>
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
</dl>
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
-
标签
- 双标记
- <标记 属性=“属性值” 属性=“属性值”></标记>
- 单标记
- <标记 属性=“属性值” />
**写在<>中的第一个单词叫做标记,标签,元素。
标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”号内。
一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。
空标记没有结束标签,用“/”代替。
块状元素(天生能换行的元素)
行内元素(天生不能换行的元素)
行内块元素(天生不能换行但能设置宽高的元素)
表格元素
-
行元素
<b></b> 加粗的标签 <i></i> 倾斜的标签 <u></u> 下划线标签 <strong></strong> 加重语气的加粗标签 <em></em> 加重语气的倾斜标签 <s></s> 删除线 <span></span> 文本标签 <a></a> 超链接标签 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
-
表格
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table></table> 表格
width=“500” 表格宽度
height=“300” 表格高度
border=“1” 表格边框
bgcolor=“red” 表格背景颜色
cellspacing=“10” 单元格与单元格之间的距离
cellpadding=“10” 单元格与内容之间的距离
<tr></tr> 表格行
align=“left/center/right” 水平对齐方式
<td></td> 表格列
colspan=“2” 合并列 rowspan=“2” 合并行
-
表单元素
<form></form>表单 name=“定义表单名” method=“get/post” 传输方式 action=“请求地址” <input type=“表单元素类型” />表单元素 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 右浮动
- float:
说明:页面出现上下布局时都用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距离 <a></a>
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来定位
永远根据浏览器定位
- 根据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:将<img>转为块状元素,给<img>添加声明: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;
- a标签里的img会产生边框 解决
Day10
-
seo
- 网页三剑客
title
,keyword
,description
- 图片优化(alt属性,title属性)
- PageRank(pr值,友情链接)
- 网页三剑客
-
css规范
- 命名方法(语义化命名,结构化命名)
- ID:结构化: #header #footer
- class: .border0 . red .font12 .clear
-
CSS命名规则
- 建议使用小写字母
- 以英文字母开头,后面可以连接数字、字母、下划线、连接线,建议尽量使用英文字母,适当使用下划线和连接线;
- 词必达意,名称要反映用途和相关信息,同时也要简短。
-
高级表单
- 表单字段集
<fieldset></fieldset>
- 字段级标题
<legend></legend>
-
<textarea>文本内容</textarea>
多行文本框
- 表单字段集
<select>下拉框
<option>下拉框内容</option>
<option selected=“selected”>默认内容</option>
</select>
//选中selected="selected"
-
input
-
<input type=“表单元素类型” />
表单元素 - radio 单选框
- checked=checked 默认选中
- checkbox 复选框
- checked=checked 默认选中
- file 上传文件
- button 自定义按钮
- Image 图片按钮 <input type="image" src="路径" />
- hidden 隐藏
- 提示信息标签
<label for="绑定控件id名"></label>
-
-
高级表格
-
单元格间距(该属性必须给table添加)
- border-spacing:value;
-
合并相邻单元格边框table添加
- border-collapse:separate(边框分开)/collapse(边框合并);
-
无内容单元格显示、隐藏
- empty-cells:show/hide;
-
表格布局算法
- table-layout:auto/fixed(固定宽度,不会随内容多少改变单元格宽度)
-
自动表格布局:列的宽度是由列单元格中没有折行的最宽的内容设定的。
- 缺点:较慢(因为它需要在确定最终的布局前访问表格中的所有内容)。
- 优点:灵活
-
固定表格布局
- 优点:加快运行的速度,允许浏览器更快的对表格进行布局。
- 缺点:不太灵活
-
-
表格标题
<caption>标题内容</caption>
-
`表格布局元素
- th:表格列标题(放在tr里)
- valign="top/bottom/middle/baseline" 垂直对齐方式(th td便签内属性)
- rules="groups/rows/cols/all/none" 添加组分隔线
-
表格行分组
-
<thead></thead>
表头 -
<tbody></tbody>
表体 -
<tfoot></tfoot>
表尾
-
Day11
新增的HTML5标签
- 语义化标签
-
<header>
头标签 -
<nav>
导航标签 -
<section>
表示文档的结构、栏目 -
<footer>
页脚 -
<article>
文章标签 -
<aside>
侧边栏导航 -
<mark>
凸显文字
-
扩展:
<main></main>
-
figure
- 用来表示网页上一块独立的内容。
-
figcaption
- 用来表示figure的标题
- 作为第一个或最后一个元素
-
output
- 显示表单元素结果。(对应input表单)
-
datalist
- 提供表单选项列表
- datalist.html
-
hgroup
<hgroup> <h3></h3> <h4></h4> </hgroup>
-
dialog
- 会话框 默认隐藏绝对定位居中
- Open 属性 非隐藏
embed 嵌入插件标签
-
video
- 定义视频,比如电影片段或其他视频流
- *.mp4 *.ogg *.webM
<source src="xx.ogg" type="audio/ogg">
1.
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
2.
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
-
audio
- 定义音频,比如音乐或其他音频流
-
canvas
- 画布
-
智能表单的使用和规范
<input type="?" />
-
地址栏
<input type="url" >
输入无效地址会自动提示
-
输入数字
<input type="number" value="25" min="10" max="100" step="5"/>
- step 跳跃数
- min 最小值
- max 最大值
-
输入电子邮件
<input type="email" required="required" multiple="multiple" >
- 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:选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式:
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;//内阴影
- box-shadow: X轴 Y轴 模糊的 大小 颜色;
-
与背景和边框相关样式(例: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 指定内联元素的背景图像进行平铺时的循环方式,浏览器支持不友好,暂时不需要了解
- background-clip : 设置背景显示区域
-
圆角属性border-radius
- border-radius:10px 设置圆角元素
- 可以设置 1-4个值 有点类似盒模型设置
- (border-radius:10px/10px; 左边设置水平半径右边设置垂直半径,这种方式几乎用不到)
- border-top-right-radius:50px;
- border-radius:10px 设置圆角元素
-
边框颜色
- border-color:#f00 #ff0 #f0f #00f;
-
图片边框
- border-image:
- 图片路径
- 4个方向
- 宽度
- 平铺方式
- stretch拉升 round平铺
- border-image:
Day13
-
怪异盒模型
- box-sizing:border-box;
- content-box 标准盒模型 (默认)
- border-box 怪异盒模型
- box-sizing:border-box;
-
弹性盒子
- display: 弹性盒子类型
- box:将对象作为弹性伸缩盒显示。 (伸缩盒最老版本)
- inline-box:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒最老版本)
- flexbox:将对象作为弹性伸缩盒显示。 (伸缩盒过渡版本)
- inline-flexbox:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒过渡版本)
- display: 弹性盒子类型
-
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-content:(没有center-没效果)
-
侧轴对齐
-
align-items (设置在父) 、align-self (设置在子)
- flex-start: 上对齐
- flex-end: 下对齐
- center: 居中对齐
- baseline 基线对齐
- stretch 上下拉升对齐
-
align-items (设置在父) 、align-self (设置在子)
注: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:
- 属性设置列之间的宽度、样式和颜色规则
响应式设计布局概念
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
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语法
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-width:320px)" />
<link rel=“stylesheet” href=“medium.css” media=“screen and (max-width:1024px) and (min-width:320px)" />
Meta标签定义
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,
在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,
但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,
也可能比浏览器的可视区域要小。
(1)使用 viewport meta 标签在手机浏览器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
(2)隐藏苹果浏览器的工具栏和菜单栏。 全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
(3)设置Web App的状态栏(屏幕顶部栏)的样式
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
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
- translate() 移动
-
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> <p></p> </div> div{perspective:200px;} p{width:100px;height:100px; transform:translate3d(0,0,-50px);background:#ff9;}
方法2:
子元素设置transform:perspective(200px);<p></p> 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-自定义属性
<div data-money=""></div>
opacity=0.5;//透明属性
position: ;//relative相对定位//绝对定位absolute//fixed固定定位
position fixed absolute relative
position absolute
position relative
position fixed
opacity:.7;