学习笔记
回眸惊觉太浮躁,便从头开始,今天开始逐步更前端基础。
表格
IE浏览器、火狐、谷歌浏览器、Edge浏览器、Safair浏览器、Opera浏览器
浏览器内核
可分为两部分: 渲染引擎(layout engineer或者Rendering Engine)和JS引擎
常见浏览器内核:Trident、Geoko(苹果)、WebKit(safair)、Chromium/Blink(chrome)、Persto(Opera)
Android,大部分为Webkit二次开发
iOS以及WP7平台,大部分是Safair和IE 的Trident
Web标准
w3c和其它标准化组织制定的一系列标准的集合
结构标准(Structure):html
表现标准(Presentation):css
行为标准(Behavior):js
HTML超文本标记语言
h5标签语义化
下划线、换行标签、文本格式化标签
<b></b><strong></strong>粗体
<i></i><em></em>斜体
<s></s><del></del>删除线
<u></u><ins></ins>下划线
前面的没有强调意思,后面语义更强烈
图像标签
alt(图像不能显示时,提示)
title(鼠标悬停时显示内容)
链接标签(anchor)
target(目标窗口弹出方式)==>_self(原窗口) blank(new)
base标签
head标签之间 <base target="_blank">
特殊字符标签
//(  < > & © 空格 <> & 版权符号
注释标签<!-- -->
相对路径
绝对路径
列表标签
无序列表ul
有序列表ol
自定义列表
<dl>
<dt></dt>
<dd></dd>描述说明dt
</dl>
认识 很多标签
表单由表单域、表单控件、文本提示信息组成
input控件(重点)
单标签
label标签
textarea(文本域)
下拉菜单
select控件
表单域(form)
get(安全性差) post(匿名)
w3c
MDN
CSS初始
行内样式(内联样式)
<h4 style="color: pink"></h4>
内部样式表
<style>
选择器 { 属性:值}
</style>
外部样式表
<link ref="stylesheet" href="css.css" />
css基础选择器
标签选择器
类选择器
.类名 {} 类名先后没关系,css书写关系
id选择器
# 唯一、 不可重复
通配符选择器*
font-size (em, px) 1em就是一个字的距离
font-family (字体类型)
现在网页普遍使用14px+
尽量使用偶数数字字号
各种字体用英文逗号隔开
中文字体加英文引号隔开、遇空格、#、$,必须加引号(单,双)
尽量用默认字体
font-weight(字体粗细)
bold----700px
normal----400
font-style:字体风格 normal italic
font 综合字体设置样式
选择器{font: font-style font-weight font-size/line-height font-family;}
使用font属性,按格式书写,不能更换样式,各个属性以空格隔开,font-size/font-family都必须保留
color
text-align(水平对齐)与html 中的align相同
text-indent(首行缩进)
text-decoration(文本装饰)line-through
css复合选择器
交集选择器 div.red 既又
并集选择器div,p,span
后代选择器 (包含选择器) ul li a
子元素选择器 ul li>a
伪类选择器
链接伪类选择器
:link /*未访问的链接*/
:visted /*已访问的链接*/
:hover /*鼠标移动到链接*/
css注释
标签的显示模式 display
块级元素(block-level)
:active /*选定的链接*/
h1-h6 p div ul ol li
行内元素(inline-level)只能容纳文本或其他行内元素(a特殊)
<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
行内块元素 (inline-block)
<img /><input /><td>
模式转换 diaplay: inline
行内元素、行内块元素可当做文本来看 text-align:center起作用
p h1-h6 尽量不放块级元素 (文字块元素)
选择器嵌套层级应不大于3级
基线与基线距离为行高、
css三大特性
层叠(就近)、继承(父性子承)、优先级
每个元素贡献值 0,0,0,1
每个类伪类贡献值 0,0,1,0
每个ID贡献值 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important贡献值 无穷大
继承权重为0
<div class="father"> <p>继承的问题</p> </div>
.father { color: yellow } p { color: blue }
该继承为blue,继承权重为0
background-image: url()
background-repeat
background-position (精灵图)
background-attachment: fixed(背景固定)
background: transparent url(image.jpg) repeat-y scroll 50% 0;
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置(位置无强制要求)
背景透明(css3)(高级浏览器支持)
background: rgba(0,0,0,0.3)
最后一个参数是alpha透明度 取值范围0-1之间(盒子背景半透明)
盒子模型(css重点)
css三大模块:盒子模型、浮动、定位,其余为细节,需学精通
边框(border)(四边由上右下左)
border-color border-width border-style: solid(实验) dashed(虚线) dotted(点线)
border: 1px solid red
border-collapse: collapse;表示边框合并一起(table,td齐设定)
内边距(padding)
padding: 10px 20px 30px;上 左右 下
padding: 10px 20px 30px 40px 上右下左
问题(padding 会撑开盒子)
盒子居中
text-align: center(可以让盒子内容(文字 行内元素 行内块)居中对齐)
margin:0 auto;(通俗写法)
使用要求:块元素, 指定宽度
外边距合并
相邻块元素垂直外边距合并,取两者最大
嵌套元素垂直外边距合并,如果父元素无上内边距和边框
则父元素与子元素的上外边距发生合并,两者中的较大,即使 父为0,
也会发生合并。
解决方法:
可以为父元素添加overflow:hidden。
使用优先选择 width> padding(撑开)>margin(外边距合并)
圆角边框(css3)
border-radius: 50%
圆角阴影
border-radius: 50% 0;对角看
三个值
h-shadow 水平阴影的位置
v-shadow 垂直阴影位置
(blur spread color inset) (模糊距离 阴影尺寸 阴影颜色 内部阴影)
浮动(flooat)
普通流(normal flow)
这个单词很多人翻译为文档流, 普通流或者标准流都可以
css的定位机制:普通流(标准流)、浮动和定位
用浮动可以让元素在一行显示,方便布局,用inline-block会有间隙
浮动脱离标准流,不占位置,会影响标准流,浮动只有左右浮动
浮动无法跨越父盒子内边距
浮动有隐藏模式转换,转换为行内块
float: 浮漏特
版心与布局流程
清除浮动(不是所有浮动都需清除,影响布局)
额外标签法(w3c推荐,最好不用)
最后一个添加浮动元素后面,添加标签<div class="clear"></div>
.clear {
clear: both
}
优点:通俗易懂,书写方便
缺点:会添加很多无意义标签,造成结构混乱
父级添加overflow
overflow: hidden
使用after 伪元素清除浮动(网易)
.clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility:hidden; } .clearfix{ *zoom:1;/ie6能识别,*ie7以下版本所能识别,其他浏览器略过 }
给父元素加clearfix
使用after和before双伪元素清除浮动(小米)
.clearfix:before,.clear:after{ content:""; display:table; } .clearfix:after { clear:both } .clearfix{ *zoom:1; }
定位(position)
background-position(背景定位)
元素定位哦属性主要包括定位模式和边偏移
边偏移属性(top bottom left right)
定位模式
static 自动定位(静态定位,标准流特性,边偏移无法改变位置)
唯一用处:取消定位
relative 相对定位,相对其原文档流的位置进行定位(自恋型 )
以自己左上角为准,相对定位不脱标,仍保留原位置
absolute 绝对定位,相对上个已经定位父元素进行定位(拼爹型)
完全脱标,完全不占位置 ,若父元素无定位,以浏览器当前屏幕为准对齐 会随可滚动文档滚动
以最近已定位父元素进行定位
子绝父相
fixed 相对浏览器窗口进行定位
发现问题之图片(文字亦是)使用float: left依旧占位置
定位的盒子居中对齐
加了浮动 定位 的盒子 margin:auto失效
left: 50%;(大盒子一半)
margin-left: -100px;(自己盒子一半)
固定定位fixed(认死理型)
特定的绝对定位(脱标不占位) ,只认浏览器
默认的隐式转换,跟浮动一样,元素添加了绝对定位和固定定位后,元素转换为行内块模式
行内块的宽度高度与内容有关(需给宽度)
叠放次序(z-index)
加了定位元素(仅限此),后来居上
css高级技巧
元素的显示与隐藏
display: none;block;隐藏之后不保存位置
visibility 可见性 visible hidden 不保留位置
overflow (溢出隐藏) visible auto hidden scoll
鼠标样式、cursor: default pointer move text(小白箭头,小手,移动,文本)
轮廓outline:none;加个border: 1px splid red
防止拖曳文本域 textarea {resize: none;}
vertical-align垂直对齐
baseline top middle bottom
默认图片与文字基线对齐(图片底部留白)换成其他模式 或display:block
溢出的文字隐藏
white-space: normal nowrap(强制一行显示,直至结束或遭遇br)
text-overflow: clip(不显示) ellipsis(省略号)
css精灵技术(sprite)小精灵 雪碧
减少服务器请求次数,提高加载速度
background-position
维护成本高
滑动门
导航栏字数不同+有图片(微信)
微信导航栏中遇到的问题及解决方式
导航栏中给定margin-left和margin-right出现第一个和最后一个左右间隙处理方式
字体图标
追加字体图标,保留原图标,导入json文件
css reset类库,推荐用、normalize.css
icon图标引入
<link rel=" shortcut icon" href="favicon.ico" type="image/x-icon/">
网站优化三大标签 seo
现主要为站内优化 title(网页入口) description(网站说明) keywords
代码检验
cssstats.com(z在线代码分析工具)
http://validator.w3.org/unicorn/(w3c统一验证工具)
http://tool.chinaz.com/CssFormat.aspx (css代码压缩)
代码压缩