前端学习笔记--分享
网页三层结构：结构+表现+行为
核心技术：html+css+JavaScript
html：超文本标记语言
基本结构：
<!DOCTYPE html> 文档声明头
块级标签：
h1-h6、p、div、ul、ol、li、dl、dt、dd、br
行内标签：
span、i、em、b、strong
图片标签：
<img src="图片地址" alt="替换文本">
链接：
<a href="相对路径/网址/锚点" target="_blank">文本</a>
表格：
table
tr 行
th 表头
td 单元格
caption 标题
thead 头部
tbody 主体
tfoot 底部
属性：
border 0 1 边框
cellpadding 单元格和内容的距离
cellspacing 单元格间距离
rowspan 合并行
colspan 合并列
html表单
表单标签
form 表单域
input type：text、password、image、radio、checkbox、reset、submit、button、file
textarea 多行文本
select 下拉列表 option 选项
表单属性
action 提交地址
method 提交方式 get/post 大小限制/安全性
name 表单数据字段名
type 输入类型
value 指定输入控件代表的值
checked 单选或复选
readonly 不可编辑能提交
disabled 既不能编辑也不能提交
selected option 选中
maxlength 最大输入字符个数
css 页面样式
三种引入方式
内联样式/内部样式/外部样式
语法
选择器 {
声明：；
}
选择器
基础 * tagname .classname #id
复合 .box span .box>span h2,.red,#box {} div.red{}
伪类 未访问:link 访问后:visited 悬停:hover 激活:active
字体
font-size
font-weight:bold/normal
font-family:""
font-style:italic/normal
line-height:30px/2;
font:italic bold 15px/2 "宋体";
文本
text-align:left/center/right
text-indent:2em;
color:red;
text-decoration:none/underline/overline/line-through
颜色
英文单词
#666 #ffffff
rgb(0-255,0-255,0-255)
rgba(0-255,0-255,0-255,0-1)
单位
px % em（代表当前元素的font-size的值） rem （根标签的font-size的值）
三大特性
层叠 冲突层叠，就近原则，不冲突不层叠
继承 text- font- color a : color text-decoration
优先级
通配符选择器 0 *
标签选择器 1 h1，p
类、伪类选择器 10 .class :hover
ID选择器 100 #id
+ !inportant 最大优先级
复合选择器
后代 .box p{}
子代 .box>p{}
群组 .box,.box1{} 权重不相加
交集 div.box1{}
伪类 10
:hover
:link
:active
:visited
盒模型
margin 设置外边距 margin：0 auto;居中效果
border 设置边框
padding 设置内边距
content width+height
背景
background-color 背景颜色
background-image:url(); 背景图片
background-position: 背景定位 百分比 英文 像素
background-repeat 重复
简写
background red url() no-repeat 10px 20px;
元素分类
块级标签：h1-h6、p、div、ul、ol、dl、li、dl、td、hr、
独占一行
宽度 默认父级的宽度100%
宽高、行高、外边距、内边距等都可以设置
可以包含嵌套行内标签 例外 h1标签不能放p、div等块标签
行内标签：a、span、strong、b、em、i
多个行内标签在一行显示
默认宽度由内容撑开
宽度、行高 垂直的margin、padding无效的
可以包含行内和行内块
行内块签：input、img、td
多个行内标签在一行显示，多个行内块之间有空白
默认宽度有内容撑开
宽度、行高、所以盒模型属性都可以设置
模式转换
display：inline；转行内
display：block； 转块级
display：inline-block；转行内块
display：none；隐藏元素 列表样式
清除默认样式
list-style：none；
列表风格
list-style-type:desc/circle/square/decimal
list-style-position：inside/outside；
list-style-image：url(); 元素内容溢出处理
overflow：
visible 显示
hidden 隐藏
auto 需要出现滚动条
scroll 显示滚动条
垂直对齐方式（文字和图片之间的对齐方式）针对行内或行内块，还能解决行内块之间的空白，
vertical-align：
baseline 默认 第三条线对齐
middle 中间对齐 《------------------
top 顶部对齐
bottom 底部对齐
px 具体像素
解决行内块间空白问题的三种方式---重要
vertical-align：middle； 对齐方式
display：black； 转换块级
font-size：0px； 设置字体大小
浮动 float
布局方式：文档流、浮动、定位
1左浮动：float:left;
往左移动，直到父级左边边缘或相邻元素浮动元素，多个浮动元素从左到右排列
脱离文档流 不占位
2右浮动：float:right;
同上 往右
脱离文档流 不占位
3取消浮动 float：none；
回到文档流正常占位
解决的问题：
1文字环绕图片
2多列布局 导航
浮动带来的问题:
子元素浮动，脱离文档流，无法撑开父级元素的高度引起父盒子内部高度为0的问题。 清除浮动
清除浮动 --解决父级元素没有高度的问题
1 父级定高法 扩展性差
2 父级添加overflow属性hidden/auto/scroll
3 clear属性清除浮动 left 清除左侧浮动 right 清除右侧浮动 both 同时清除左右浮动影响
4额外标签 浮动元素之后添加一个不浮动的块级标签。给这个标签添加clear:both;
5伪元素
.clearfix::after{
content:"";
/*必须是块级元素clear才生效*/
display：black；
clear:both;
}
.clearfix{
*zoom:1;
}
三种布局：
文档流
浮动
定位（层布局）
position:
子绝父相
static 静态 默认值 left right top bottom z-index 不能设置
relative 相对定位
-相对自身在文档流中的位置
-不脱离文档流
absolute 绝对定位
-定位父级：离绝对定位最近的 带有position属性祖先元素，如果不存在，就相对body定位
-脱离文档流
fixed 固定定位
-定位父级：浏览器可视区
-脱离文档流
left：正右 负左
right：正左 负右
top ：正下 负上
bottom：正上 负下
z-index：0-无穷大 调整层级
浮动脱离文档流
float：left/right；脱离文档流，不脱离文本流
定位脱离文档流
position：absoute/fixed；既脱离文档流，又脱离文本流
脱离文档流的元素特点：
不需要区分行内或块级，默认尺寸都是由内容决定，可以设置宽高及盒模型、line-height
父元素尺寸是未知的，子元素尺寸是固定的 居中
------------
.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-200px;
width300px;
height:400px
}
------------ 父元素、子元素的尺寸都是未知的 居中
------------
.parent{
position:relative;
}
.child{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
------------
bfc
1、怎样生存bfc
html标签
overflow：hidden/auto/scroll
float：left/right
display：inline-block
position：absolute/fixed
2、规则
内部的块标签从上往下排列
同一个bfc的两个标签的外边距会重叠
做外边距和包含块左边缘想接触，浮动也会如此
bfc不会与浮动的元素重叠
浮动子元素会参与bfc的高度计算
独立容器
3、解决问题
外边距重叠问题
两栏或三栏自适应
清除浮动
防止文字环绕图片
等高
1、内外边距相消法 伪等高
padding-bottom:99999px;
margin-bottom:-99999px;
2、边框模拟左右两栏
双飞翼、圣杯
三栏、center在前、left，right在后
.cneter:100%;
.left:margin-left:-100%;
.right:margin-left:-300px;
圣杯
.outer:padding:0 300px 0 200px;
.left:position:relative;left:-200px;
.right:position:relative;right:-200px;
双飞翼
.center-inner:margin:0 300px 0 200px;
透明兼容
rgba() 标准浏览器 ie9以上
opacity：0.5； 元素整体透明 标准浏览器 ie9以上
filter:alpha(opacity=50) 元素整体透明 ie特有的属性
csshack
条件hack
<!--[if ie 8]>
<![endif]-->
选择符
*html .box{} ie6-
*+html .box{} ie7
属性级
_color:red; ie6-
*color:red; ie7-
color:red\0; ie8\9
!important 提高元素的层级
属性补充
border-collapse:collapse;
cursor:pointer;
letter-spacing 字符间距
word-spacing
visibilty:visible/hidden; display：black；:block/none/;
outline:nane; outline:2px solid red;
兼容
ie图片边框
ie8背景属性简写
ie6小高度
ie6- 双边距
ie7-子标签相对定位，父元素overflow失效
ie7- inline-block 不在一行显示
css小三角、箭头
ps操作、切图、图片格式
css精灵图
优点：
减少http请求
减少命名困扰
更换风格方便
缺点：
尺寸和位置需要精确计算
iconfont字体图标
本文来自博客园，作者：JackieDYH，转载请注明原文链接：https://www.cnblogs.com/JackieDYH/p/17634936.html
浙公网安备 33010602011771号