*小知识点
0.定位和浮动做布局,移动transform做效果 例如;京东盒子上升效果
快捷键:ctrl+f 快速查找 ctrl+g 快速跳转行号
1.text-aline:center可以让什么元素居中: 行内块元素,行内元素
2.浮动的元素压不住文字,浮动的初衷就是用来做文字环绕效果的
3.margin负值的运用,margin正值往右移动,那么margin负值就是往左移动
4.z-index 可以提高元素的层级
5.属性选择器 [] 用处:在同一个标签里选择自己想要的标签 (依据属性) 权重为10
6.结构伪类选择器 : nth-child () :first-child :last-child :nth-of-type() 权重为10
7.伪元素选择器(重要)::before ::after 权重为10 必须要具有content属性 生成的是行内元素
8.常用字体图标和伪元素选择器来做小图标 搭配定位,使得结构简单
9.相对定位保持盒子本身的特性,绝对定位可以给盒子设置宽高 固定定位也可以直接设置宽高
10.css3新特性:
css3滤镜 filter 属性 属性值:blur(函数)变模糊 数值越大 ,图片越模糊 数值加单位 px
需求 子盒子永远比父盒子小50px
css3函数 calc函数 计算 通常搭配 width 或者heigh
11.使用绝对定位的盒子不能够使用margin:0 auto;实现盒子居中 要用transform:translate(x,y)
12.如何利用:hover 选中伪元素::hover::after
13.正方形做圆 border-radius:50%,长方形做半圆 把需要的值拉满,其他的设置为0
14.transition 过渡 过渡的是数值,只要是数值的 都能做过渡 颜色也是数值
15.2d转换 transform:translate() rotate() scale()..... 移动 旋转 放大 更改中心点 transform-origin 括号里两个值要用逗号隔开 连写时 函数要用空格隔开 复写时要先写移动函数 免得出现错误
16.animation 动画 通常会增加多个节点,实现更复杂的动画效果 先定义动画,再调用动画
17.letter-spacing:px 用来控制文字间距的
18.在使用css3盒子模型之后,行高要等于内容的高度,才能够实现居中,不要行高等于盒子高度
19.可替换元素:类似行内快元素 与行内块元素的区别是 一个本身自带高度和宽度,而可替换元素是只能在css样式里设置宽高 要使行内快元素垂直居中,除了要添加line-heighjt 之外,还要添vertical-aline
20.以后写标签的时候要起一个不容易被重复的名字,而且写样式的时候写的层级少一些,容易复制粘贴
21.background:linear-gradient(left,red,blue) 为了考虑兼容性,要这样写 background:-webkit-linear-gradient(方向,第一个颜色,第二个颜色)方向默认是top
22.z-index仅能在定位元素上有效
23.固定定位的盒子必须要有宽度,而且固定定位始终跟随浏览器可视区域定位 所以要手动调节盒子的位置
(一)网页布局总结
1.1 标准流
可以让盒子上下或者左右排列,垂直的块级盒子显示就用标准流布局
1.2 浮动 float
可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局
1.3 定位 position
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示,如果元素自由的在某个盒子内移动就用定位布局
(二)继承 inherit
1.与字体样式有关的都可以继承,text- line- font- 这些开头的样式,以及字体颜色color
2.宽高不会被继承,标签必须要设置宽高,如果不设置宽度,默认是父盒子的宽度,如果不设置高度,默认是内容的高度,即由内容撑开
(三)清除浮动 float
3.1 单伪元素清除浮动
.clearfix{ *zoom:1 /*兼容IE浏览器6、7低版本*/ } .clearfix::after{ content:""; height: 0; line-height: 0; display: block; clear: both; visibility: hidden;/*将元素隐藏起来*/ /*在页面的clearfix元素后面添加了一个空的块级元素,这个元素清除了浮动*/ }
3.2 双伪元素清除浮动
/* 声明清除浮动的样式 */ .clearfix:before, .clearfix:after { content: ""; display: table; //转换成块级元素,并且在同一行显示 } .clearfix:after { clear: both; (重要代码) } /* ie6 7 专门清除浮动的样式*/ .clearfix { *zoom:1; }
(四)元素的显示与隐藏
4.1 本质:让一个元素在页面中显示或者隐藏起来
4.1.1 display 显示与隐藏 (☆用的更多)
display:none 隐藏
display:block 显示 (除了具有转换成块级元素的功能外,还有显示元素的功能)
特点:隐藏元素且不占位置(人死了,钱也没了)
4.1.2 visibility (可见性)显示与隐藏
visibility:hidden 隐藏
visibility:visible 显示
特点:隐藏元素但是占有位置 (人死了,钱没花了)
4.1.3 overflow 溢出元素显示与隐藏
overflow:visible 默认超出文字显示出来
overflow:hidden 超出文字隐藏
overflow:scroll 不论文字超出还是不超出 都显示滚动条
overflow:auto 在需要的时候添加滚动条
ps:有定位的元素慎用overflow:hidden
(五)精灵图
5.1 为什么需要精灵图?
减少传输的次数,使用精灵图传输一次就可以,从而减少服务器的传输次数,提高页面的加载速度,多个小图片集成一张大的大图片
5.2 精灵图的使用
主要针对小的背景图片使用精灵图片 sprites
代码:background-position:-x,-y;
坐标:往左走是负值,往下走是正值,所以x,y坐标一般都为负值
5.3 补充内容:背景background属性
5.3.1 background: 背景图片 背景颜色 背景位置 背景平铺 背景固定等
background:url() rgb() center no-repet
5.3.2 背景位置 background-position:
方位名词:center top bottom left right 写位置时与顺序无关,如果只写第一个,那么第二个默认center
精准坐标:第一个写x, 第二个写y
5.3.3 背景固定 background-attachment
5.3.3.1属性值:
1.scroll :背景图像随内容滚动 (默认)
2.fixed :背景图像固定
5.3.4 背景大小 background-size
-
cover 完全覆盖
-
contain 等比例缩放,当盒子尺寸比例与图片比例不一致时,会出现一侧的空白
(六)form表单
form表单元素 主要可以分为三类学习,分别为 input输入表单元素 select下拉表单元素 textarea文本域表单元素
6.1 input标签 输入表单元素
行内块元素,可以设置宽高
6.1.1 属性
6.1.2 type属性:
属性值有text 文本框 password 密码框 radio 单选按钮 CheckBox 复选框
6.1.3 name属性:
1.radio 和 CheckBox必须要有相同的name值,这样才能够实现单选和多选
2.name属性是后台人员用的,用来告诉后台人员,是什么
6.1.4 value属性:
提前规定表单元素的值,后台人员提前写入的,单选和多选要有不同的value值
6.1.5 checked属性:
默认选中的那个,首次加载就选中的,主要针对单选和多选框
checked=”checked“
6.1.6 maxlength属性:(了解)
规定输入的最大长度
6.1.7 file属性 文件上传:
6.1.8 submit提交按钮:
6.1.9 reset重置按钮:
6.1.10 button按钮
不会提交注册表的内容,通常会搭配js做一些事情,比如发送短信验证码.....
6.1.11 HTML5 新增
1.新增表单类型
新增的表单完美的限制了用户输入的类型
重点记忆:number tel search
2.新增的表单属性
以下属性的属性值均为自身 重点记忆:placeholder 和 multiple
required 属性 属性值:required 表单拥有该属性表示其内容不能为空
placeholder属性 表单的提示信息
autofocus属性 属性值:autofocus 自动聚焦属性 刷新页面,光标会自动定在某个获得autofocus的表单上 多用于search表单
multiple属性 属性值:multiple 可以多选文件提交
6.2 label标签
6.2.1 定义
label标签为input元素定义标注(标签)
label标签不属于表单标签,但是通常会和表单标签搭配使用
6.2.2 使用场景
label标签通常用于绑定一个表单元素,当点击label标签内的文本时,浏览器会自动将焦点转移到或者选择对应的表单元素上,用来增加用户体验
6.2.3 使用语法
<label for="sex"> 男 </label> <input type="radio" name="sex" id="sex"/>
label标签先将文字包裹进去,然后再添加for属性,for属性的属性值是对应的input标签的id属性值
label标签必须要有for属性,属性值是需要绑定的input标签的id值,这样才能够建立练习
6.3 select 下拉表单元素
6.3.1 语法规范
<select> <option>选项一</option> <option>选项二</option> <option>选项三</option> <option>选项四</option> ..... </select>
由两组标签构成 父标签 <select> 翻译就是选择 子标签 <option> 选项
可以设置默认选项 在某一个option中 selected=stlected
6.4 textarea 文本域元素
6.4.1 使用场景
当需要用户输入大量文字时,可以用textarea标签
6.4.2 代码
<textarea rows="" cols=""> 文本内容 </textarea>
rows 指定textarea显示多少行
cols 显示多少字
通常不会用
(七)字体图标 iconfont
7.1 产生
产生原因:精灵图文件比较大,且图片本身放大或者缩小会失真,一旦图片制作完毕想要更换就十分困难。
字体图标,表现得是图标,但本质是字体可以随意更改大小,颜色等....
7.2 下载
下载网站:
icomoon字库 Icon Font & SVG Icon Sets ❍ IcoMoon 国外网站,打开网速慢
阿里iconfont字库 iconfont-阿里巴巴矢量图标库 重点 免费!!!
7.3 引入
1.把下载包里面的fonts文件夹放入页面的根目录下
2.在css样式中全局声明字体:简单理解把这些字体文件通过css引入到我们的页面中
*/\* 1、字体声明 \*/* @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?p4ssmb'); src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }
-
使用 :新建 <span>标签 然后去demo.html 里面找自己想要用的字体图标
-
给<span>指定字体
<style> span { font-family:'icomoon'; } </style>
7.4 字体图标的追加
把压缩包里面的selection.json重新上传,然后选中自己想要的新的图标,重新下载压缩包,并替换原来的文件即可
(八)css三角做法
span { position:absolute; width:0px; height:0px; border:10px solid blue; /*为了照顾兼容性*/ line-height:0; font-size:0; }
(九)用户界面样式
9.1 鼠标样式 cursor
属性:cursor
属性值:point 小手 move 移动 text 文本 not-allowed 禁止
9.2 取消表单轮廓线 outline
<input type=text> 文本框被选定时会有默认的轮廓线,并不好看。
取消轮廓线: 给表单添加 outline:0;或者outline:none; 样式之后,就可以去掉默认的蓝色边框
9.3 防止拖拽文本域 resize
-
resize:none;
-
文本域尽量放在一行中,不要空格 例:
(十) vertical-aline 垂直对齐方式
只针对行内元素或者是行内块元素 对块级元素无效
属性值:top middle bottom
可用于解决图片底部留白问题 只需要给图片加一个 vertical-aline:middle就可以
或者把图片display:block 因为对齐方式只对于行内元素和行内块元素有效
项目中 vertical-align 可以解决的问题
-
文本框和表单按钮无法对齐问题
-
input和img无法对齐问题
-
div中的文本框,文本框无法贴顶问题
-
div不设高度由img标签撑开,此时img标签下面会存在额外间隙问题
-
使用line-height让img标签垂直居中问题
(十一)省略号
11.1 单行省略号
/* 强制一行内显示,不换行 */ *white-space*: nowrap; /* 超出部分隐藏 */ *overflow*: hidden; /* 文字用省略号代替超出的部分 */ *text-overflow*: ellipsis;
11.2 多行省略号
overflow: hidden; text-overflow:ellipsis; /*考虑兼容性问题,只适合于webkit浏览器或者移动端,因为移动端大部分是webkit内核*/ /*弹性伸缩盒子模型显示*/ display: -webkit-box; /*设置或检索盒对象的子元素的排列方式*/ -webkit-box-orient: vertical; /*限制在一个块元素显示的文本的行数*/ -webkit-line-clamp: 3;
(十二) HTML5 提高
12.1 HTML5新增语义化标签 移动端强烈推荐
<header> 头部标签 <nav> 导航栏标签 <article> 内容标签 <section> 定义文档某个区域 相当于大号的div <aside> 侧边栏标签 <footer> 尾部标签 可以反复多次使用
(十三) css3新增过渡属性transition
1.语法规范:transition:要过渡的属性 花费时间 运动曲线 何时开始;
2.口诀:谁做过渡给谁加 如果想要写多个属性,则用逗号分割