html部分

web的标准构成：结构（html）、表现（css）、行为（js）

<!DOCTYPE html> 文档声明标签

<h1> - <h6> 都是<head>的缩写，独占一行

<strong></strong>或<b></b> 加粗

<em></em>或<i></i> 倾斜

<del></del>或<s></s> 删除线

<ins></ins>或<u></u> 下划线

<div>是一个盒子，自己独占一行（大盒子）

<span>可以多个放在一行（小盒子）

<img>

alt属性：图片显示不出来的时候出现的文本

title属性：鼠标经过图片时候显示的文本

链接分类：

1.外部链接 www.baidu.com

2.内部链接 index.html

<a>

target属性： _self在当前页面打开，_blank在新页面打开

锚点标签

<table>

<tr>

<th>

//表头单元格，会居中、加粗

</th>

</tr>

<tr>

<td>

//表格单元格

</td>

</tr>

</table>

列表用来布局，表格用来显示数据

1.无序列表

<ul>

</ul>

2.自定义列表

<dl>

<dt></dt>//大哥

<dd></dd>//小弟

</dl>

表单

表单分为表单域、表单控件、提示信息

<form>标签用于定义表单域

<input> type属性：

text 文本

password 密码

radio 单选（必须有相同的name值）check预设

checkbox 多选（必须有相同的name值）check预设

submit 提交按钮 value属性可以更改按钮文字内容

reset 重置按钮

button 普通按钮

file 上传文件

<label>可设置for属性，用来绑定对应的输入框

例如：

<select>标签选择器

例如：

<option selected = 'selected'></option>//selected 预选择

</select>

CSS部分

字体

font-size 字体大小

font-weight 字体粗细

font-style 字体样式（倾斜）

font-family 字体

文本

color 文本颜色

text-align 文本对齐(left right center)

text-decoration 下划线(none underline overline line-through)

text-indent 首行缩进（一般用em来作为单位）

line-height 行高

emmet语法

生成html标签

! 直接生成html模板

div*10 生成十个div标签

div.one 生成类名为one的div标签

div#one 生成id名为one的div标签

div>span 生成父子结构标签

div+span 生成并列结构标签

div{……}生成包含内容的div标签

div.temp$*5 生成类名为temp（1-5）的顺序类名的div标签

生成css标签

text-align: center 简化成tac

text-indent：化成ti

weight: 简化成w w100 -》 weight：100px；

height 简化成h h100 -》 height：100px；

后代选择器

ol li ol里的li

子元素选择器（只能选最近一级的标签）

ul > li

并集选择器

ul，p

伪类选择器

链接伪类

a:link 没被访问过的链接

a:visited 被访问过的链接

a:hover 鼠标指针位于其上的链接

a:active 点击不放时候的链接

focus伪类

focus伪类用于<input>标签

input:focus

块级元素的特点

1.自己独占一行

2.高度、宽度、内外边距都可以控制

3.宽度是默认（父级）容器的100%

4.里面可以放行内或块级元素

行内元素的特点

1.相邻行内元素在一行上，一行可以显示多个

2.高、宽直接设置是无效的

3.默认宽度就是它本身内容的宽度

4.行内元素只能容纳文本和其他行内元素

行内元素不能盛放除文字、行内元素之外的东西

行内块元素的特点

1.一行可以显示多个，但他们之间会有空隙

2.默认宽度是他本身的宽度

3.行高、宽、内外边距都可以改变

把行内元素<a>转化为块级元素

a {

display: block;

}

把块级元素<a>转化为行内元素

div {

display: inline;

}

把行内元素<a>转化为行内块元素

span {

display: inline-block;

}

如何让文字垂直居中

《让文字行高等于盒子高度》

背景属性

背景颜色

background-color: transparent; 默认

背景图片

常用于logo、或是超大的背景图片，优点是非常便于控制位置

背景平铺

background-repeat: repeat;

背景图片的位置

background-position: x y;

例如： background-position： cneter top（方位名词）

background-position: 20px 50px;（精确移动）

背景图像固定（背景附着）

background-attachment: scroll (默认) | fixed

css三大特性：层叠性、继承性、优先级

层叠性：解决样式冲突问题

继承性：文字及文字属性会子继承父

优先级：如果是相同标签，则执行层叠性，否则，执行优先级（继承或者* < 元素选择器 < 类选择器、伪类选择器 < id选择器 < 行内样式style=“” < !important）

权重叠加

盒子模型

边框粗细 border-width

边框样式 border-style

border-collapse: collapse; 相邻边框合并

padding不会撑开盒子的情况

不给盒子设置weight或height就可，因为没写的值会继承父亲属性

外边距的经典应用

让块级盒子水平居中有两个条件：

1.要有宽度

2.左右外边距设为auto就可

行内元素和行内块元素水平居中：

给其父元素添加text-align:center

外边距塌陷问题：

解决办法：

1.给父盒子定义边框

2.给父盒子设置内边距

3.为父盒子加overflow：hidden（最优）

清除内外边距

* {

margin： 0px

padding： 0px；

}

去掉无序列表前的小圆点

list-style: none;

盒子阴影

box-shadow： x距离 y距离模糊程度大小

浮动

浮动最典型的应用是让一系列块元素在一行排列

第一准则：“网页中多个盒子排列找标准流，横向排列找浮动”

float： left right none

浮动特性：

1.浮动元素会脱离标准流

2.浮动元素会一行内显示并且顶部对齐

3.浮动元素具有行内块元素的特性

行内元素（例如 span）直接设置宽高不会做出任何改变，但是设置浮动之后就会具有行内块元素的性质

浮动元素经常配合父级元素来进行布局

清除浮动

清除浮动方法：

1.额外标签法(必须是块级元素)

在最后面添加<div style="clear: both"></div>

2.父级添加overflow属性

父级元素添加 overflow：hidden

3.父级添加after伪元素

.clearfix:after {

content: "";

display: block

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

*zoom: 1;

}

4.父亲添加双伪元素

前后都添加伪元素

图片格式

jpg 适用于商品图，像素高，质量好的图片

gif可以保存透明背景和动画效果

png格式结合了以上两种图片格式的优势

定位

定位：将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

定位模式： position: static 静态定位、relative 相对定位、absolute 绝对定位、fixed 固定定位

边偏移： top、 bottom、left、 right（只有定位可以使用）

相对定位：在元素移动位置的时候，是相对于他原来的位置来说的（自恋型）

特点：

1.他是相对于自己原来的位置移动的（移动位置的时候参照点是自己原来的位置）

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

典型应用是给绝对应用当爹

绝对定位：绝对定位是元素在移动位置的时候，相对于他的祖先元素来说的（拼爹型）

特点：

1.如果没有祖先元素或者祖先元素没有定位（是标准流或者浮动的盒子），则以浏览器为准定位

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置

3.绝对定位不再占有原来的位置（脱离标准流）

子绝父相

子级是绝对的话，父亲要用相对定位

1.子级绝对定位，不会占有位置，可以放到父盒子的任何一个地方，不会影响其他兄弟盒子

固定定位fixed

元素固定到浏览器的可视区域的位置。主要使用场景：可以在浏览器页面滚动元素时候不改变

特点：

1.以浏览器的可视窗口作为参照移动位置（和父级元素没有任何关系，不随滚动条滚动）

2.不在占有原来位置（脱流）

固定定位小技巧：固定在版心右侧位置

小算法： left： 50% margin-left: 版心一半

粘性定位

粘性定位可以被认为是相对定位和固定定位的混和。sticky粘性的。

粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位的特点）

2.粘性定位占有原来的位置（相对定位的特点）

3.必须添加top、left、right、bottom其中一个才能有效

z-index

1.数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上

2.如果属性值相同，则按照书写顺序，后来居上

3.数字后面不能加单位

4.只有定位的盒子才有z-index属性

定位的拓展

1.绝对定位盒子居中

left: 50%; margin-left: 负的自己宽度的一半

2.行内元素添加绝对或固定定位，可以直接设置高度和宽度，块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容的大小。

3.脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题。

4.浮动的元素不会压住下面标准流的文字，绝对定位（固定定位）会压住下面所有内容

元素的显示与隐藏

display属性

display: none; 隐藏对象

display: block; 显示元素，转换为块级元素

visibility属性

visibility: visible; 元素可视

visibility: hidden 元素隐藏

overflow属性（溢出部分做的处理）

overflow：visible；

overflow: auto;溢出显示滚动条

overflow: hidden;

overflow: scroll不溢出也显示滚动条

Web开发笔记