(办公)html5与css3的相关知识
1.html超文本标记语言,图片,链接,文字组成.
2.常用的浏览器:IE,火狐,谷歌浏览器.
浏览器内核:
IE Trident
firefox Gecko
chrome Blink
3.web标准w3c
4.基本语法:
1.html是由尖括号包裹的标签
2.html标签是成对出现的.
3.有些特殊的是单标签.
3.包含关系,兄弟关系.
5.html结构标签:
1.html 根标签
2.head 头部
3.title 标题
3.body 身体
6.编辑器采用vscode
1.vscode安装插件:(安装完需要重启)
[
chinese(中文汉化)
Open in Browser打开浏览器
JS-CSS-HTML Formatter 自动保存格式化
Auto Rename Tag 自动重命名配对的HTML和XML标签
CSS Peek 追踪至样式.
]
7.DOCTYPE以及字符集的作用:
1.DOCTYPE 文档类型声明标签,在html前面.
2.zh-CN语言是中文,<html lang="en"> lang当前文档的显示语言.
3.charset="UTF-8" 字符集<meta charset="UTF-8"/>
8.html常用的标签:
标签的语义:在合理的情况放置一个合适的标签,可以让页面的结构更加的清晰.
9.标题标签
h1~h6 语义:作为标题来使用,并且根据重要性递减.
10.段落
<p>段落</p>
1.文本会根据浏览器大小自动换行.
2.段落中间有空隙.
<br/> 强制换行
1.单标签
11.案例编写:
12.文本格式化标签:
文字需要粗体,斜体,下划线.
加粗:<strong></strong>,<b></b>
倾斜:<em></em>,<i></i>
删除线:<del></del>,<s></s>
下划线:<ins></ins>,<u></u>
13.div和span标签:
没有语义是一个盒子标签.
1.div 单行,大盒子
2.span 不换行,小盒子
14.img图片标签:
<img src="图像路径"/>
src是图像的必须属性.
alt是图像不显示时候的文本.
width设置一下宽
height设置一下高
title提示文本.
border边框
1.标签名后面写属性
2.属性中间以空格分开.
3.属性key=value
15.目录文件夹和根目录
1.目录文件夹
2.打开目录文件夹第一层就是根目录
16.相对路径和绝对路径
1.相对路径.(图片相对于html的位置)
同路径
上一级../
下一级/
2.绝对路径:
直接从盘符开始:C://xcxx
17.超链接
<a href="跳转目标" target="目标窗口弹出的地方"></a>
跳转页面,target="_self"默认值,_blank为在新窗口打开的方式.
1.可以访问外部页面.
2.可以访问内部的网页也可以.
3.空连接#
4.可以在href放路径.xxx.zip文件,就可以下载.
18.锚点连接:
a标签连接#id属性就可以跑到这个地方.
<a href="#id属性"></a>
<h2 id="id属性"></h2>
19.注释和特殊字符:
1.<!-- 注释 --> ctrl+/
2.  空格
< 小于号
> 大于号
20.表格
1.table定义表格
2.tr列
3.td单元格内容
4.th表头,加粗居中.
21.表格属性(并不常用)
1.align,对其方式
2.border,边框
3.cellpadding,像素值
4.cellspacing,像素值
5.width像素或百分比.
22.表格结构thred,tbody
23.合并单元格
1.rowspan:合并几行
2.colspan:合并单元格个数.
24.列表(无序有序,自定义)
1.无序:ul,li
2.有序:ol,li
3.自定义dl,dt,dd
25.表单
1.表单域可以收集表单元素提交给服务器form
常用的属性:
action url地址 表单数据送到哪里。
method get/post 表单提交方式
name 名称 指定表单名称
2.表单元素:
1.<input type="" />
type=button 按钮
type=checkbox 复选框
type=file 浏览文件上传
type=hidden 隐藏字段
type=image 定义图像的方式提交数据
type=password 密码
type=radio 单选
type=reset 重置标签
type=submit 提交按钮
type=text 文本
还有其他的元素:
name 用户自定义,设置input的名称
value 用户自定义,设置input的值.
checked 规定input元素首次加载应当被选中.
maxlength 整数,输入字符最大长度.
2.label标签
3.select下拉框,option
option中定义selected=selected的话,当前为默认选中项.
4.textarea文本域
cols 用来指定每行显示的字符数。
rows 用来指定正常情况下（没有滚动条）显示的文本行数
**************************************************************************
*****************************css样式表************************************
**************************************************************************
1.css美化网页
2.选择器:{属性:值}
1.给谁的样式,
2.选择器就是指定css样式的标签
3.属性之间,用逗号分隔.
3.代码风格:小写,空格规范:冒号后面打个空格,选择器后面加个空格.
4.选择器的作用:选择标签
4.1.标签选择器:标签名当做选择器
4.2.类型选择器:类名class(开发较为常用)
语法:.类名 {
属性:值
}
补充:多个类名必须空格分开.
4.3.id选择器:#id名称:{
属性:值
}
唯一的.
4.4.通配符选择器
* {
属性: 值
}
* 代表所有元素,特殊情况下使用.
5.CSS字体属性:
5.1.font-family 字体,各个字体之间用逗号分隔,尽量用系统自带的字体。
5.2.font-size 字体大小,px像素
5.3.font-weight 字体粗细
normal 默认值
bold 粗体
100~900 400=normal,700=bold 不带单位
5.4.font-style 字体风格
italic 斜体
normal 默认
5.5.字体属性简写的顺序:font: font-style font-weight font-size/line-height font-family
(不可以颠倒顺序,必须严格按照这个编写,空格隔开
font-size和font-family是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
)
5.6.文本颜色:color (十六进制,RGB,还有颜色单词)
5.7.文本对齐:text-align 让盒子里的文字水平居中对齐.
5.8.文本装饰:text-decoration 下划线,上划线,删除线.
underline下划线,none文本无装饰.
5.9.文本缩进:text-indent 1em 1个文字的距离,2em 2个文字的距离
5.10.行间距:line-height
6.css引入方式3种:
6.1.内部样式表(hred标签里写<style>写css样式</style>)
6.2.行内样式表(标签里写属性style,比如<h1 style="写css样式"></h1>)
6.3.外部样式表(创建css后缀的文件,用link引入)
<link rel="stylesheet" href="index1.css" />
6.4.行内样式表>内部样式表>外部样式表
7.Emmet语法:
7.1.emmet语法生成html
1.生成标签,标签名加tab div + tab 就可以生成<div></div>
2.生成多个相同的标签,加上*就可以了,div*3 就可以生成3个div
3.如果有父子关系的标签,可以用>比如ui>li就可以
4.如果生成兄弟标签,用+就可以了,比如div+p
5.如果生成类名或者id名字的,直接写.demo或者#two 即可。
6.如果生成div类名有顺序,可以用$
.demo$*5
7.在标签里生成文字 div{dasdfasdfasdf}
7.2.emmet语法快速生成css样式:
1.比如w200 按tab 可以生成 width: 200px;
2.比如lh26 按tab 可以生成 line-height: 26px;
8.快速格式化代码: shift+alf+f
9.复合选择器(准确,高效)
9.1.后代选择器,子选择器,并集选择器,伪类选择器
9.2.后代选择器:包含选择器,可以选择父元素里面的子元素。
语法:元素1 元素2 {样式声明}
元素1 包含元素2标签(后代元素)
元素1和元素2空格隔开
无论是儿子,孙子只要是元素1的后代即可
元素1和元素2可以是任意的标签选择器.
9.3.子选择器:只能选择某元素的最近一级的元素,简单理解就是亲儿子选择器
语法:元素1>元素2{样式声明}
元素1和元素2用大于号隔开.
元素1父和元素2子
9.4.并集选择器:可以选择多组标签,同时为他们定义相同的样式。
并集标签选择器通过英文(,)连接而成,任何形式的选择器,都可以当做并集选择器的一部分.
最后一个选择器不需要加逗号
10.伪类选择器:用于向某些选择器添加特殊的效果,比如链接添加特殊效果,或者选择第1个元素,第n个元素.
伪类标签选择器最大的特点就是(:)表示,比如:hover,:first-child.
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动连接(鼠标按下未弹起的链接) */
为了确保能生效,按照LVHA的顺序声明
补充伪类选择器:focus用于获取焦点的表单元素.
11.css的元素的显示模式:
1.元素的显示模式:元素以什么方式显示,div自己占一行,一行可以放多个span.
块元素和行内元素
块元素会换行(h1~h6,p,div,ul,ol,li)
行内元素不会换行(span,a,em,b,s,ins,u,strong)
1.1.块级元素的特点:
1.换行
2.高度,宽度,外边距和内边距可以控制。
3.宽度是默认容器(父容器)100%
4.使一个容器以及盒子,里面可以放行内或者块级元素.
文字类元素内不能使用块级别元素
1.2.行内元素
1.相邻行内元素在一行上,一行可以显示多个
2.高,宽设置是无效的
3.默认宽度就是他本身内容的宽度
4.行内元素只能容纳文本或其他行内元素.
注意:
1.链接里面不能放链接。
2.特殊情况链接a下面放块级标签,a标签转换一下模式最安全.
1.3.行内块元素
img,input,td 他们同时具有块级元素和行内元素的特点.行内块元素
1.和相邻行内元素(行内块)在一行上,但是他们之间会有空白的缝隙,一行可以显示多个.(行内元素特点)
2.默认的宽度就是他本身的宽度(行内元素特点)
3.高度,行高,外边距,内边距可以控制(块级元素特点)
2.显示模式转换
display:block; 转块
display:inline 转行内
display:inline-block; 行内块
12.小工具:snipaste截图工具
13.文字单行垂直居中:
让文字的行高等于盒子的高度
盒子高:height: 50px;
行 高 :line-height:50px;
原理:
行高=上空隙+文字本身高度+下空隙.
盒子本身也有高度.
文字的本身加上上空隙加上下空隙加起来等于盒子的高度就成。
15.背景颜色:
1.背景颜色,背景图片,背景平铺,背景图像固定等等.
背景颜色background-color 默认transparent透明
2.背景图片background-image none | url('')
3.背景平铺 background-repeat
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺
repeat： 背景图像在横向和纵向平铺
no-repeat： 背景图像不平铺
round： 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3）
space： 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3)
默认是平铺的
4.背景图片位置:background-position:x y;
方位名词:center top,left,right,
比如超大背景图片:background-position:center top;
1.精确定位: 第一个是x坐标,第二个是y坐标.
background-position: 5px 10px;
如果写一个值一定是x,另外一个是垂直居中center.
2.混合单位:
数值和方位名词混搭,第一个是x,第二个是y.
3.背景固定:
background-attachment 背景图像是否固定或者滚动
background-attachment可以做视差滚动效果.
background-attachment: scroll | fixed
scroll 随着内容的滚动而滚动的.
fixed 不随着页面滚动是固定的.
4.背景属性复合写法:(实际开发中使用这个写法多,空格隔开属性)
background:背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置;
5.背景半透明:
background: rgba(0,0,0,0.3)
最后一个参数是alpha透明度,取值范围在0~1之间。
注意:背景半透明是指盒子背景半透明,盒子的内容不受影响。
背景图片的应用:实际开发中的logo或者装饰性的小图片或者是超大的背景图片,有点是非常容易控制位置。
16.css的三大特性:(层叠性,继承性,优先级)
1.层叠性:相同的选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠主要解决冲突问题.
层叠的原则:
1.样式冲突,遵循的原则就是就近原则,那个样式离结构进,就用那个.
2.样式不冲突,不会层叠.
2.继承性:子标签会集成父标签的某些样式,比如文本颜色和字号。简单的理解就是子承父业。
(恰当的使用可以减少css代码)
div {
color: pink;
font-weight: 700;
}
<div>
<p>长江后狼</p>
</div>
子元素可以继承父元素的样式(text,font,line-这些元素开头的可以继承,以及color)
2.1.行高的继承性:
body{
font: 12px/1.5 'Microsoft YeHei';
}
1.行高可以跟单位也可以不跟单位
2.如果子元素没有设置行高,则会继承父元素的行高为1.5
3.此时子元素的行高是:当前子元素的文字大小*1.5
body行高1.5 这样写法最大的优势是里面的子元素可以根据文字大小自动调节行高.
3.优先级:
1.选择器相同,则执行层叠属性。
2.选择器不同,则根据选择器权重执行。
选择器 选择器权重(最下面的最大)
继承或者* 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式style="" 1,0,0,0
!important重要的 无穷大
优先级注意点:
1.权重有4组数字组成,但不会有进位。
2.可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推。
3.等级从左到右判定,如果某一个值相等,就判断下一位.
4.简单的记忆法,通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器100,行内样式为1000,!important无穷大.
5.继承的权重是0,如果该元素没有直接选中,不管父元素的权重多高,子元素得到的权重都是0
(a标签浏览器默认给了一个样式)
4.权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。
(权重虽然会叠加不会进位的问题)
div ul li ----> 0,0,0,3
.nav ul li ----> 0.0.1,2
a:hover ----> 0.0.1,1
.nav a ----> 0.0.1,1
17.盒子模型:
17.1.看透网页布局的本质:
1.先准备好相关的网页元素,网页元素基本都是盒子box
2.利用css设置好盒子样式,然后摆放到相对应的位置.
3.往盒子里添加内容.
17.2.盒子模型的组成部分:
盒子模型,布局元素可以当做一个矩形的盒子。
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框,外边距,内边距,和实际内容.
border边框
content内容
padding内边距,控制盒子边框和内容
margin外边距,盒子与盒子的距离。
1.边框:border分为3部分边框的宽度(粗细)边框的样式,边框的颜色。
语法:border:border-width || border-style || border-color
1.边框的简写方式
border:1px solid red;//没有顺序
边框分开的写法:
border-top:1px solid red;//只设定上边框,其他同理
表格细线边框:
border-collapse separate： 边框独立 collapse： 相邻边被合并
2.测试盒子大小,不量边框。
3.如果测试的是对的,width/height减去边框宽度.
2.内边距(padding)
padding属性用于设置内边距,即边框和内容之间的距离。
属性 作用
padding-left 左边距
padding-right 右边距
padding-top 上内边距
padding-bottom 下内边距
padding的简写:
值的个数 表达的意思:
padding:5px; 1个值,上下左右都有5像素的内边距.
padding:5px 10px; 2个值,上下5像素的内边距,左右都有10像素的内边距.
padding:5px 10px 20px; 3个值,上5像素的内边距,左右10像素的内边距,下都有20像素的内边距.
padding:5px 10px 20px 30px; 4个值,上5像素的内边距,右10像素的内边距,下有20像素的内边距.左有30像素 的内边距(顺时针)
2.1.padding会影响盒子实际大小
1.内容和边距都有了距离,添加了内边距
2.padding影响了盒子的实际大小
也就是说,如果盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子.
解决方案:
如何保证盒子跟效果图大小一致,则让width/height减去多出来的内边距大小即可.
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小.
3.外边距(margin):用于处理外边距,控制盒子和盒子之间的距离。
属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
margin简写方式代表的意义跟padding完全一致.
3.1.外边距典型应用块级元素盒子水平居中.
1.盒子必须制定宽度(width)
2.盒子左右外边距都设置为auto
.header{width:900px;margin:0 auto;}
常见的写法,以下三种都可以:
2.1.margin-left:auto;margin-right:auto;
2.2.margin:auto;
2.3.margin:0 auto;
注意:以上方法是让块级元素水平居中,行内元素行内块元素水平居中给其父亲元素添加text-align:center即可;
4.外边距合并-嵌套块元素塌陷
1.相邻块元素垂直外边距合并
当上下相邻的两个块元素(兄弟关系)相遇的时候,如果上面的元素有下边距margin-bottom,下面的元素有上边距margin-top，则他们的垂直距不是margin-bottom和margin-top之和。取两个值中较大者这种现象称为相邻块元素垂直外边距合并。
解决办法:只给一个盒子添加margin值.
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:
1.可以为父元素定义上边框
border: 1px solid transparent;
2.可以为父元素定义上内边距
padding:1px;
3.可以为父元素添加overflow:hidden;
5.清除内外边距:
* {
margin:0;/*清除外边距*/
padding:0;/*清除内边距*/
}
注意:行内元素为了照顾兼容性,尽量的设置左右内外边距,不要设置上下的内外边距,但是转换为块级和行内块元素就可以了。
18.去掉li身上的小圆点:list-style: none;
19.(圆角边框,盒子阴影,文字阴影)
圆角边框:border-radius:length;
数值越大,弧度越大.
设置高度的一半就是圆 border-radius:50%;
该属性是简写属性:后面可以跟左上角,右上角,右下角,左下角
盒子阴影:box-shadow添加阴影
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
注意
1.默认是外形阴影(outset)但是不可以写这个单词,否则导致阴影无效。
2.盒子阴影不占空间,不会影响其他的盒子排列。
文字阴影:text-shadow
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。参阅 CSS 颜色值。
20.传统布局的三种方式:
1.普通流(标准流)
1.块级元素会单独占一行,从上到下排列.
常用的元素:div,hr,p,h1~h6,ol,dl,form,table
2.行内元素会按照顺序,从左往右排列,碰倒父元素则自动换行.
常用的元素:span,a,i,em等
2.浮动
3.定位
(注意实际开发中,一个页面基本都包含了三种布局方式,后面是移动端的布局方式)
21.浮动可以改变元素默认的排列方式.
浮动的经典应用:可以让多个块级元素一行内排列显示
网页布局的第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动.
22.浮动:float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘及包含块或另一个浮动框的边缘。
语法:选择器{float:属性值;}
none： 设置元素不浮动 left： 设置元素浮在左边 right： 设置元素浮在右边
23.浮动的特性:
1.浮动的特性会脱离标准流(脱标)
1.脱离了标准普通流的控制(浮)移动到指定的位置(动),俗称脱标
2.浮动的盒子不需要保留之前的位置.
2.浮动里的元素会一行里显示并且元素顶部对齐.
3.浮动的元素会具有行块元素的特性.
(如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度.)
如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,他的大小由内容来决定.
浮动的盒子中间是没有缝隙的,是紧挨着一起的。
行内元素同理
24.浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置,我们网页布局一般采取的策略。
先用标准流的父元素排到上下位置,之后内部子元素采取浮动排列左右,符合网页布局第一准则。
网页布局第二准则:先设置盒子大小,之后设置盒子位置.
25.常见的网页布局:
1.自上而下:
top,banner,main,footer
2.top,banner,left,right,footer
3.top,banner,中间拆分更多的模块,footer
26.浮动的注意点:
1.浮动和标准流的父盒子搭配:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.
2.一个元素浮动了,理论上其他兄弟元素也要浮动.
一个盒子里面有个多个子盒子,如果其中一个盒子浮动了,其他的兄弟也要跟着浮动,以防止引起问题.
(浮动的盒子只会影响盒子后面的标准流,不会影响前面的标准流.)
理想状态,让盒子撑开父亲,有多少孩子,我父盒子就有多高
27.为什么需要清除浮动:
由于父级盒子很多情况下,不方便给高度,但是盒子浮动又不占有位置,最后父级盒子高度为0,就会影响下面的标准盒子.
由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响.
28.清除浮动
1.清楚浮动元素造成的影响.
2.如果盒子本身有高度,则不需要清除浮动.
3.清除浮动之后,父级就会根据浮动的子盒子自动检索高度,父级有了高度,就不会影响下面的标准流了
语法:选择器{clear:属性值;}
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。(实际开发中最常用的)
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
清除浮动的策略是闭合浮动.
4.清理浮动方法
1.额外标签也被称为隔离法,是W3C推荐的做法.
额外标签法,是w3c推荐的做法。
额外标签法会在浮动元素的末尾添加一个空的标签,例如<div style="clear:both"></div>或者其他标签比如<br/>
要求这个空元素必须是块级元素
清除浮动的本质:是清除浮动元素脱离标准流的影响.
清除浮动的策略:闭合浮动,只让浮动在父盒子内部影响,不影响外部的其他盒子.
2.父级添加overflow属性
可以给父级添加overflow属性,将其属性值设置为hidden,auto或scroll
注意是给父元素添加的。
缺点:无法显示溢出的部分.
3.父级添加:after伪元素
:after方式是额外标签法的升级版,也是给父元素添加.
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
优点:没有增加标签,结构更加简单
缺点:照顾低版本浏览器
代表网站:百度,淘宝网,网易等等.
4.父级添加双伪元素
也是给父元素添加
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
优点:代码更加简洁
缺点:照顾低版本浏览器
代表网站:小米,腾讯等等
5.为什么需要清除浮动:
1.父级别没高度
2.子盒子浮动了。
3.影响下面布局了,那我们就应该浮动了.
29.CSS属性的书写顺序:
1.布局定位属性:
display/position/float/clear/visibility/overflow(建议display第一个写,毕竟关系到模式)
2.自身属性:
width/height/margin/padding/border/background
3.文本属性
color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性(CSS3):content/cursor/border-radius/bos-shadow/text-shadow/background:linear-gradlient....
30.页面布局整体思路:
1.必须确定页面版型(可视区域),我们测量可得知.
2.分析页面中的行模块,以及每个行模块中的列模块,其实页面布局是第一准则.
3.一行中的列模块经常浮动布局,先确定每个列的大小,之后确定位置,页面布局的第二准则
4.制作HTML结构,我们还是遵循,先有结构,后有样式的原则,结构永远最重要.
5.所以,先理清楚布局结构,再编写代码尤其重要,这个需要我们多多积累.
31.导航栏注意点:
实际开发中,我们不会直接用链接a而是用li包含(li+a)的写法
1.li + a 更加的清晰,一看这个就是有条理的表型内容。
2.如果直接用a,搜索引擎容易辨别为有堆砌关键字的嫌疑(故意堆砌关键字容易被搜索引擎降权的风险,从而影响网络),从而影响网站排名.
3.这个nav导航栏可以不给宽度,将来可以继续添加其余文字.
4.因为导航栏里面的文字不一样多,所以最好给链接a,左右padding撑开盒子,而不是指定宽度.
(行内块之间有空隙,可以加浮动消除这个缝隙)
(注意行内元素给左右内外边距)
32.定位
1.某个元素可以自由的在一个盒子内移动位置,并且压住其他的盒子。
2.当我们在滚动窗口的时候,盒子是固定在某些位置的.
以上效果,标准流和浮动无法实现的,此时需要定位来实现.
所以:
1.浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子
2.定位则是可以让盒子自由在某个盒子移动位置或者固定屏幕中某个位置,并且可以压住其他盒子.
32.1.定位的组成
1.定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子.
定位=定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置。
position
static： 静态定位
(对象遵循常规流。此时4个定位偏移属性不会被应用。 )
relative： 相对定位
( 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。 )
absolute： 绝对定位
( 对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。 )
fixed： 固定定位:
( 与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。 )
sticky： 对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）
1.1.边位移
top 顶部偏移量,定义元素相对于父元素上边线的位置.
bottom 底部偏移量,定义元素相对于父元素下边线的位置.
left 左侧偏移量,定义元素相对于父元素左边线的位置.
right 右侧偏移量,定义元素相对于父元素右边线的位置.
32.2.静态定位(了解)
静态定位就是无定位的意思.
语法是:
选择器 {position: static;}
静态定位按照标准流的特性摆放位置,他没有偏移.
静态定位在平时很少会用到.
32.3.相对定位 relative(重要)
相对定位是元素在移动位置的时候,是相对它原来的位置来说的(自恋型)
语法是:
选择器 {position: relative;}
相对定位的特点:(务必记住)
1.它相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来的位置.)
因此,相对定位并没有脱标,他是最典型的给绝对定位当爹的...
32.4.绝对定位absolute(重要)
绝对定位是元素在移动位置的时候,是相对于他的祖先元素来说的(拼爹型)
语法:
选择器 {position:absolute;}
绝对定位的特点(务必记住)
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)
2.如果祖先元素有定位(相对,绝对,固定定位),则以最近的一段有定位的元素为参考点移动位置.
3.绝对定位不再占有原先的位置。(脱标)
32.5.子绝父相的由来:
弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景.
意思:子级使用绝对定位,父级则需要相对定位
1.子级绝对定位,不会占有位置,可以放到父盒子里面任何一个地方,不会影响其他兄弟盒子。
2.父盒子需要加定位限制子盒子在父盒子内显示。
3.父盒子布局时,需要占有位置,因此父亲只能是相对定位。
这个就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级。
总结:因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位。
当然子绝父相不是一成不变的,如果父元素不需要占有位置,子绝父绝也会遇到。
32.6.固定定位(重要)
固定定位是元素固定于浏览器可视区域。主要使用场景:可以在浏览器滚动的时元素的位置不会改变。
语法:
选择器 {position: fixed;}
固定定位的特性:
1.以浏览器的可视窗口为参考点移动元素.
1.1.跟父元素没有任何的关系
1.2.不随着滚动太的滚动而滚动
2.固定定位不在占有的原先位置上.
(小技巧:不要直接控制图片,给图片一个父盒子是最好的情况)
固定定位也是脱标的,其实固定定位就可以看做是一种特殊的绝对定位.
(小技巧:固定在版心右侧位置
小算法:
1.让固定定位的盒子left:50%;走到浏览器可视区域(也可以看做版心)的一半位置。
2.让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置。
就可以让固定定位的盒子贴着版心右侧对齐了。
.w {
width: 800px;
height: 1400px;
margin: 0 auto;
}
.fixed {
position: fixed;
/*1.走浏览器宽度的一半*/
left: 50%;
/*2.版心是800,走400px*/
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
)
32.7.粘性定位sticky(了解)
粘性定位可以被人为是相对定位和固定定位的混合sticky
语法规范:
选择器 {position:sticky;top: 10px;}
粘性定位的特点:
1.以浏览器的可试窗口为参照点移动元素(固定定位的特点)
2.粘性定位是占有原先的位置(相对定位的特点)
3.必须添加top,left,right,buttom其中一个才有效.
32.8 定位的总结:
定位模式 是否脱标 移动位置 是否常用
static 否 不能使用偏移 很少
relative 否(占位置) 相对于自身位置移动 常用
absolute 是(不占位置) 带有定位的父级 常用
fixed 是(不占位置) 浏览器可视区域 常用
sticky 否(占位置) 浏览器可视区域 当前阶段很少.
32.9.定位的叠放顺序:z-index
在使用定位布局时,可能会出现盒子重叠的情况,此时,可以使用z-index来控制盒子的前后顺序。(z轴)
语法:
选择器 {z-index:1;}
数值可以是正数,负数或0,默认是auto,数值越往大,盒子越靠上。
如果属性值相同,则按照书写顺序,后来居上
数字后面不能加单位.
z-index只有定位才有的属性.
32.10 绝对定位居中算法
1.加了绝对定位的盒子不能通过margin:0 auto;水平居中,但是可以通过以下的计算方法实现水平居中和垂直居中。
水平居中:
/* 1.left 50% 父容器宽度的一半 */
left: 50%;
/* 2.margin-left 负值一半宽度,比如宽度是200,就拿100 */
margin-left: -100px;
垂直居中:
top: 50%;
/* 2.margin-top 负值一半宽度,比如宽度是200,就拿100 */
margin-top: -100px;
32.11 定位的特殊性:
1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
2.块级元素添加绝对定位或者固定定位,如果不给宽度或者高度,默认是内容大小。
3.脱标的盒子不会触发外边距坍塌的
(浮动元素,绝对定位(固定定位)元素都不会触发外边距合并的问题。)
32.12.定位的扩展:
1.绝对定位(固定定位)会完全压住盒子.
浮动元素不同,只会压住它下面的标准流盒子,但是不会压住下面标准流盒子的文字。
绝对定位(固定定位)会完全压住标准流下的内容
浮动之所以不会压住文字,因为浮动产生的最初目的就是为了做文字环绕效果的,文字会围绕浮动元素。
32.13.网页布局的总结:
1.通过盒子模型,清楚的知道html标签是一个盒子.
2.通过css浮动,定位可以让每个盒子排列成网页。
3.一个完整的网页需要标准流,浮动,定位一起布局完成,每个都有自己专门的用法.
1.标准流:
可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局.
2.浮动:
可以让多个块级元素一行显示或者左右对齐盒子,多个盒子水平显示就用浮动布局.
3.定位:
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示,如果元素自由在某个盒子内移动就用定位布局.
33.元素的显示和隐藏
本质就是让一个元素在页面隐藏或显示出来。
1.display显示与隐藏
display:none;隐藏
display:block;除了转换块外,显示.
隐藏元素,并不在占有原来的位置
2.visibility 显示和隐藏
visibility:hidden;
visibility:visible;
隐藏元素,占有原来的位置
3.overflow 溢出的部分显示隐藏
overflow属性指定了如果内容溢出一个元素的框(超过指定的宽度以及高度)时,会发生什么.
visible： 对溢出内容不做处理，内容可能会超出容器。
hidden： 隐藏溢出容器的内容且不出现滚动条。
scroll： 隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。
auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea元素的overflow默认值就是auto。
clip： 与hidden一样，clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于，clip是一个完全禁止滚动的容器，而hidden仍然可以通过编程机制让内容可以滚动。
如果有定位的盒子,慎用overflow:hidden;因为他会隐藏多余部分。
34.精灵图
1.为什么要使用精灵图?
为了有效的减少服务器的接收和发送请求的次数,提高页面的加载速度,出现了css精灵技术(CSS Sprites,CSS雪碧)
把零零星星的图片包含在一张图里,通过位移找到想要的图片.
2.使用:
把小图片整合到一张大图片里去。
background-position:位移x和y轴
x轴右边走是正值,左边走是负值,y轴同理.
35.字体图标iconfont
展示的是图标,实际上是字体。
优点:1.轻量级的.
2.灵活性
3.兼容性。
注意字体图标不能替换雪碧图,只是对图标工作提升。
1.字体图标下载:
icomoon字库:https://icomoon.io/
阿里iconfont字体库:http://www.iconfont.cn/
fonts文件夹放到网页根目录
通过css引入字体文件,也叫字体声明
style.css
36.CSS三角的做法:
1.4条边设置为透明transparent,然后给1条边添加颜色,就变成了三角形.
.box1 {
width: 0;
height: 0;
/* border: 10px solid pink; */
border-top: 10px solid pink;
border-right: 10px solid red;
border-bottom: 10px solid blue;
border-left: 10px solid green;
}
.box2 {
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: pink;
margin: 100px auto;
}
37.用户界面样式-鼠标样式:
1.更改用户的鼠标样式
cursor:default; 默认光标（通常是一个箭头）
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
text 此光标指示文本
not-allowed 禁止
2.表单轮廓,防止拖拽文本域
轮廓线:outline:0;或者outline:none;样式之后,就可以去掉默认的蓝色边框.
防止拖拽文本域:resize
textarea {
resize: none;
}
38.vertical-align属性的应用
使用场景:经常用于设置图片和表单(行内块元素) 和文字垂直对齐
官方解释:用于设置一个元素的垂直对齐方式,但是它只对行内元素或行内块元素有效.
vertical-align的值
baseline： 把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐
top： 把当前盒的top与行盒的top对齐
middle： 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
bottom： 把当前盒的bottom与行盒的bottom对齐
如果用的是块元素:display:inline-block;vertical-align: middle;
图片和表单都属于行内块元素.
39.图片底侧空白缝隙解决方案
图片底部会有一个空白的缝隙,原因是行内元素会和文字的基线对齐。
主要的解决方案有2种:
1.给图片添加vertical-align:middle|top|bottom等等。
2.把图片转为块级元素:display:block;
40.溢出的文字省略号显示.
1.单行文字溢出省略号显示
1.先强制一行显示文本 white-space: nowrap; 与normal值一致，不同的是会强制所有文本在同一行内显示。
2.超出部分隐藏 overflow:hidden;
3.用文字省略号代替超出的部分: text-overflow:ellipsis; 当内联内容溢出块容器时，将溢出部分替换为（...）。
2.多行文字溢出省略号显示
多行文本溢出显示省略号,有较大的兼容性问题,适合于webkit浏览器或移动端(移动端大部分是webkit内核)
overflow:hidden;
text-overflow:ellipsis; 当内联内容溢出块容器时，将溢出部分替换为（...）。
/*弹性伸缩盒子模型展示*/
display: -webkit-box;
/*限制在一行的显示行数*/
-webkit-line-clamp:2;
/* 设置或检索伸缩盒子对象子元素的排列方式 */
-webkit-box-orient: vertical;
(更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更加简单)
41.布局技巧
1.margin负值的运用:
1.让每个盒子的margin向左侧浮动-1px,正好压住相邻盒子的边框.
2.鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则可以用相对定位(保留位置),如果有定位,则加z-index)
2.文字围绕浮动元素.
图片浮动就成,文字不用浮动
3.行内块的巧妙运用.
分页的框可以用a标签,行内块设置就可以了.
4.CSS的三角强化.
.box {
/* 把上边框调大
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
左边和下边边框宽度设置为0
border-bottom: 0 solid blue;
border-left: 0 solid green;*/
width: 0;
height: 0;
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2.样式都是solid */
border-style: solid;
/* 3.上边框宽度要大,右边框,宽度较小,其余边框为0 */
border-width: 22px 8px 0 0;
}
42.CSS初始化
简单理解:css初始化是指浏览器的样式
每个网页必须先进行css的初始化。
这里我们以,京东的css初始化代码为例子.
******************************************************************************************
**********************************HTML5和css3提高的部分************************************
******************************************************************************************
IE9才支持以上的浏览器才支持
1.HTML5新增了带有语义的标签.
header头部标签
nav 导航标签
article 内容标签
section 定义文档的某个区域
aside 侧边栏
footer 尾部标签
注意:
1.这种语义化标准主要是针对搜索引擎的.
2.这些新标签页面可以使用多次
3.在IE9里这些元素被称之为块级元素
4.其实移动端更喜欢这些标签
5.HTML5还是增加了很多标签,我们后面再学习.
2.HTML5新增的多媒体标签:
1.音频<audio>
支持3种格式:mp3,way,ogg
2.视频<video>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
3.多媒体总结:
音频标签和视频标签的使用方法是一致的。
浏览器支持的情况不同
谷歌浏览器把音频和视频自动播放禁止了.
我们可以给视频文件添加muted属性来静音播放视频,音频不可以。(可以通过JavaScript来解决。)
3.HTML5新增的Input类型:
type="email" 邮箱
type="url" 网址
type="date" 时间
type="number" 数字
type="tel" 电话
type="search" 搜索
type="color" 颜色
4.HTMl5新增表单属性:
required required 表单拥有该属性,其内容不能是空.
placeholder 提示文本 表单的提示信息,存在默认值将不显示
autofocus autofocus 自动聚焦新属性,页面加载完成自动聚焦到指定表单.
autocomplete off/on 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中的填入项。
默认打开:autocomplete="on",关闭autocomplete="off",需要放在表单内,同时加上name属性,同时成功提交
multiple multiple 可以选择多文件提交
可以通过以下方式设置修改placeholder里面的字体颜色
input::placeholder {
color: pink;
}
********************************CSS3新增属性选择器*******************************************************
1.属性选择器:
E[att]属性选择器 选择有att属性的E元素
E[att="val"] 选择有att属性值等于val的E元素
E[att^="val"] 选择有att属性值以val开头的的E元素
E[att$="val"] 选择有att属性值以val结尾的的E元素
E[att*="val"] 选择有att属性值含有val开头的的E元素
注意:类选择器,属性选择器,伪类选择器,权重为10
2.结构伪类选择器:
E:first-child 匹配父元素中的第一个子元素
E:last-child 匹配父元素中的最后一个子元素
E:nth-child(n) 匹配父元素第N个子元素 odd 奇书 even 偶数,也可以使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
2n 偶数,2n-1奇数,5n(5,10,15...),n+5(从第5个开始),-n+5(前5个)
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:ntn-of-type(n) 指定类型E的第N个
3.伪元素选择器:
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML标准
主要的:
::before 在元素前面插入内容
::after 在元素后面插入内容
注意:
before和after创建了一个元素,但是属于行内元素
新创建的这个元素在文档树种是找不到的,我们称之为伪元素
语法:element::before {}
before和after必须要有content属性
before在父元素内容前面创建元素,after在元素后插入元素。
伪元素选择器和标签选择器一样,权重为1
伪元素和字体图标的应用
p::before {
position: absolute;
right: 20px;
top: 10px;
content: '\e91e';
font-size: 20px;
}
伪元素清除浮动
额外标签法,注意要求这个新元素必须是块级元素
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
4.CSS3盒子模型border-box
box-sizing指定盒模型,有两个值可以设置:即可以指定contenxt-box,border-box,这样我们计算盒子模型就发生了改变.
content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。
设置全局的样式:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
5.图片模糊
filter:要使用的滤镜效果。多个滤镜之间用空格隔开。
filter: 函数();例如: filter:blur(5px) blur模糊处理,数值越大越模糊.
6.CSS3 calc函数
calc()计算的意思,可以让你在声明CSS属性值的时候进行一些计算。
width:calc(100% - 80px);
括号内可以进行加减乘除
7.CSS3过渡(重点)
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式转变为另一种样式时元素添加的效果。
过渡动画:是从一个状态,渐渐过渡到另一个状态
可以让我们页面更好看,更加的动感十足,虽然低版本浏览器不支持,但是不会影响页面布局.
我们经常和:hover一起搭配使用.
transition:要过渡的属性 花费的时间 运动曲线 何时开始;
1.属性: 想要变化的css属性,宽度,高度,外边距都可以,如果想要所有的属性都有这个变化的过程写个all
2.花费的时间: 单位是秒(必须写单位)比如0.5s
3.运动曲线:默认是ease(可以省略)
4.何时开始:单位是秒(必须写单位)可以设置延时触发的时间,默然是0s(可以省略)
口诀:谁做过渡给谁加。
8.广义的html5包括(标签结构,CSS,JavaScript)
******************************************************************************************************
**************************网页布局项目*****************************************************************
# 代码规范
## 1. 概述
欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范，
以下规范是团队基本约定的内容，必须严格遵循。
#### HTML规范
基于 [W3C](http://www.w3.org/)、[苹果开发者](https://developer.apple.com/) 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。
#### 图片规范
了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。
#### CSS规范
统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。
#### 命名规范
从 `目录`、`图片`、`HTML/CSS文件`、`ClassName` 的命名等层面约定规范团队的命名习惯，增强团队代码的可读性。
## 2. HTML 规范
### DOCTYPE 声明
HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：
~~~html
<!DOCTYPE html>
~~~
**HTML5标准模版**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5标准模版</title>
</head>
<body>
</body>
</html>
```
### 页面语言lang
推荐使用属性值 `cmn-Hans-CN`（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 `zh-CN` 属性值
```
<html lang="zh-CN">
```
更多地区语言参考：
```
zh-SG 中文 (简体, 新加坡) 对应 cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK 中文 (繁体, 香港) 对应 cmn-Hant-HK 普通话 (繁体, 香港)
zh-MO 中文 (繁体, 澳门) 对应 cmn-Hant-MO 普通话 (繁体, 澳门)
zh-TW 中文 (繁体, 台湾) 对应 cmn-Hant-TW 普通话 (繁体, 台湾)
```
### charset 字符集合
一般情况下统一使用 “UTF-8” 编码
```
<meta charset="UTF-8">
```
由于历史原因，有些业务可能会使用 “GBK” 编码
```
<meta charset="GBK">
```
请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 [IETF对UTF-8的定义](http://www.ietf.org/rfc/rfc3629)，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。
### 书写风格
#### HTML代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写
*推荐：*
```
<div class="demo"></div>
```
*不推荐：*
```
<div class="DEMO"></div>
<DIV class="DEMO"></DIV>
```
### 类型属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含
*推荐：*
```
<link rel="stylesheet" href="" >
<script src=""></script>
```
*不推荐：*
```
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
```
### 元素属性
- 元素属性值使用双引号语法
- 元素属性值可以写上的都写上
*推荐：*
```
<input type="text">
<input type="radio" name="name" checked="checked" >
```
*不推荐：*
```
<input type=text>
<input type='text'>
<input type="radio" name="name" checked >
```
### 特殊字符引用
文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。
在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
*推荐：*
```
<a href="#">more>></a>
```
*不推荐：*
```
<a href="#">more>></a>
```
### 代码缩进
统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
```
<div class="jdc">
<a href="#"></a>
</div>
```
### 代码嵌套
元素嵌套规范，每个块状元素独立一行，内联元素可选
*推荐：*
```
<div>
<h1></h1>
<p></p>
</div>
<p><span></span><span></span></p>
```
*不推荐：*
```
<div>
<h1></h1><p></p>
</div>
<p>
<span></span>
<span></span>
</p>
```
段落元素与标题元素只能嵌套内联元素
*推荐：*
```
<h1><span></span></h1>
<p><span></span><span></span></p>
```
*不推荐：*
```
<h1><div></div></h1>
<p><div></div><div></div></p>
```
## 3. 图片规范
### 内容图
内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大
- 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
- 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
- **PC平台单张的图片的大小不应大于 200KB。**
### 背景图
背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片
- PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
- 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
- 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
- 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
- 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式
## 4. CSS规范
### 代码格式化
样式书写一般有两种：一种是紧凑格式 (Compact)
```
.jdc{ display: block;width: 50px;}
```
一种是展开格式（Expanded）
```
.jdc {
display: block;
width: 50px;
}
```
**团队约定**
统一使用展开格式书写样式
### 代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
```
/* 推荐 */
.jdc{
display:block;
}
/* 不推荐 */
.JDC{
DISPLAY:BLOCK;
}
```
### 选择器
- 尽量少用通用选择器 `*`
- 不使用 ID 选择器
- 不使用无具体语义定义的标签选择器
```css
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}
/* 不推荐 */
*{}
#jdc {}
.jdc div{}
```
### 代码缩进
统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
```
.jdc {
width: 100%;
height: 100%;
}
```
### 分号
每个属性声明末尾都要加分号；
```
.jdc {
width: 100%;
height: 100%;
}
```
### 代码易读性
左括号与类名之间一个空格，冒号与属性值之间一个空格
*推荐：*
```
.jdc {
width: 100%;
}
```
*不推荐：*
```
.jdc{
width:100%;
}
```
逗号分隔的取值，逗号之后一个空格
*推荐：*
```
.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
```
*不推荐：*
```
.jdc {
box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}
```
为单个css选择器或新申明开启新行
*推荐：*
```css
.jdc,
.jdc_logo,
.jdc_hd {
color: #ff0;
}
.nav{
color: #fff;
}
```
*不推荐：*
```css
.jdc,jdc_logo,.jdc_hd {
color: #ff0;
}.nav{
color: #fff;
}
```
颜色值 `rgb()` `rgba()` `hsl()` `hsla()` `rect()` 中不需有空格，且取值不要带有不必要的 0
*推荐：*
```
.jdc {
color: rgba(255,255,255,.5);
}
```
*不推荐：*
```
.jdc {
color: rgba( 255, 255, 255, 0.5 );
}
```
属性值十六进制数值能用简写的尽量用简写
*推荐：*
```
.jdc {
color: #fff;
}
```
*不推荐：*
```css
.jdc {
color: #ffffff;
}
```
不要为 `0` 指明单位
*推荐：*
```css
.jdc {
margin: 0 10px;
}
```
*不推荐：*
```css
.jdc {
margin: 0px 10px;
}
```
### 属性值引号
css属性值需要用到引号时，统一使用单引号
```css
/* 推荐 */
.jdc {
font-family: 'Hiragino Sans GB';
}
/* 不推荐 */
.jdc {
font-family: "Hiragino Sans GB";
}
```
### 属性书写顺序
建议遵循以下顺序：
1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
```css
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
```
[mozilla官方属性顺序推荐](https://www.mozilla.org/css/base/content.css)
## 命名规范
由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。
### 目录命名
* 项目文件夹：shoping
* 样式文件夹：css
* 脚本文件夹：js
* 样式类图片文件夹：img
* 产品类图片文件夹： upload
* 字体类文件夹： fonts
### ClassName命名
ClassName的命名应该尽量精短、明确，必须以**字母开头命名**，且**全部字母为小写**，单词之间**统一使用下划线** “_” 连接
.nav_top
#### 常用命名推荐
**注意**：ad、banner、gg、guanggao 等有机会和广告挂勾的不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此
```
<div class="ad"></div>
```
这种广告的英文或拼音类名不应该出现
另外，**敏感不和谐字眼**也不应该出现，如：
```
<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div>
<div class="ass"></div>
<div class="KMT"></div>
...
```
| ClassName | 含义 |
| ---------------------- | -------------------- |
| about | 关于 |
| account | 账户 |
| arrow | 箭头图标 |
| article | 文章 |
| aside | 边栏 |
| audio | 音频 |
| avatar | 头像 |
| bg,background | 背景 |
| bar | 栏（工具类） |
| branding | 品牌化 |
| crumb,breadcrumbs | 面包屑 |
| btn,button | 按钮 |
| caption | 标题，说明 |
| category | 分类 |
| chart | 图表 |
| clearfix | 清除浮动 |
| close | 关闭 |
| col,column | 列 |
| comment | 评论 |
| community | 社区 |
| container | 容器 |
| content | 内容 |
| copyright | 版权 |
| current | 当前态，选中态 |
| default | 默认 |
| description | 描述 |
| details | 细节 |
| disabled | 不可用 |
| entry | 文章，博文 |
| error | 错误 |
| even | 偶数，常用于多行列表或表格中 |
| fail | 失败（提示） |
| feature | 专题 |
| fewer | 收起 |
| field | 用于表单的输入区域 |
| figure | 图 |
| filter | 筛选 |
| first | 第一个，常用于列表中 |
| footer | 页脚 |
| forum | 论坛 |
| gallery | 画廊 |
| group | 模块，清除浮动 |
| header | 页头 |
| help | 帮助 |
| hide | 隐藏 |
| hightlight | 高亮 |
| home | 主页 |
| icon | 图标 |
| info,information | 信息 |
| last | 最后一个，常用于列表中 |
| links | 链接 |
| login | 登录 |
| logout | 退出 |
| logo | 标志 |
| main | 主体 |
| menu | 菜单 |
| meta | 作者、更新时间等信息栏，一般位于标题之下 |
| module | 模块 |
| more | 更多（展开） |
| msg,message | 消息 |
| nav,navigation | 导航 |
| next | 下一页 |
| nub | 小块 |
| odd | 奇数，常用于多行列表或表格中 |
| off | 鼠标离开 |
| on | 鼠标移过 |
| output | 输出 |
| pagination | 分页 |
| pop,popup | 弹窗 |
| preview | 预览 |
| previous | 上一页 |
| primary | 主要 |
| progress | 进度条 |
| promotion | 促销 |
| rcommd,recommendations | 推荐 |
| reg,register | 注册 |
| save | 保存 |
| search | 搜索 |
| secondary | 次要 |
| section | 区块 |
| selected | 已选 |
| share | 分享 |
| show | 显示 |
| sidebar | 边栏，侧栏 |
| slide | 幻灯片，图片切换 |
| sort | 排序 |
| sub | 次级的，子级的 |
| submit | 提交 |
| subscribe | 订阅 |
| subtitle | 副标题 |
| success | 成功（提示） |
| summary | 摘要 |
| tab | 标签页 |
| table | 表格 |
| txt,text | 文本 |
| thumbnail | 缩略图 |
| time | 时间 |
| tips | 提示 |
| title | 标题 |
| video | 视频 |
| wrap | 容器，包，一般用于最外层 |
| wrapper | 容器，包，一般用于最外层 |
***************************************************************************************
*****************************教程经验************************************************
1.SEO 搜索引擎排名
title,网站名-网站介绍(尽量不要超过30个文字)
description 网站说明
简要说明网站是做什么的.
keyword 关键字 6~8个关键词
2.常用的约定命名模块:
快捷导航栏 shortcut
头部 header
标志 log
购物车 shopcar
搜索 search
热点词 hotwrods
导航 nav
导航左侧 dropdown 包含.dd,.dt
导航右侧 navitems
页面底部 footer
页面底部服务模块 mod_service
页面底部帮助模块 mod_help
页面底部版权模块 mod_copyright
3.高和行高会被继承 height,line-height
4.如果有些有距离的文字块,有的3个字,有的4个字,不要给宽度,用padding
如果中间有小竖线,也可以给小竖线添加margin的值.
5.logo里面放置h1,提高搜索引擎搜索.
6.隐藏文字:1.font-size:0;
2.text-indent:-999px;
overflow:hidden;
7.input的placeholder的值也可有外边距挤过去 padding-left: 10px;
8.不确定宽度的,给高度不要给宽度.
9.注意只有左下角不是圆角的,其余3个是圆角。写法:border-radius: 7px 7px 7px 0;
10.给高度就不用清理浮动
11.焦点图需要ul包含li包含图片来制作.
12.设置border的边框,如果那边不想要边框,在下面设置就可以了.
border: 1px solid #e4e4e4;
border-top: 0;
13.浮动装不下小盒子的时候,可以修改父亲的宽度来容纳这些小盒子.
14.不想显示多余的边框可以,overflow:hidden;
15.超出文字隐藏显示:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
16.放个a,a里面放图片,可以跳转链接.
17.a如果包含宽度,必须转换为块级元素.
18.如果我的行高等于高,文字可以垂直居中,如果我的行高大于高度,文字可以稍微偏下。
19.有些盒子溢出了,影响到下面盒子,可以设置overflow:hidden,隐藏就可以了.
19.浮动给父元素清除浮动就可以了。
20.原来边框是透明,然后hover就展示红色边框就可以了。
21.注册页面:
注册专区 registerarea
注册内容 reg-form
错误 error
成功 success
默认 default
************************************************************************************************
************************************************************************************************
************************************************************************************************
1.transform
移动 translate
旋转 rotate
缩放 scale
移动:
1.定义2D转换中的移动,沿着X和Y轴移动元素
2.translate最大的优点,不会影响到其他的元素
3.translate中的百分比单位是相对于自身元素的translate(50%,50%)
4.对行内标签没有效果
/*定位 + translate:(-50%,-50%);盒子往上走自己高度的一半*/
旋转:
1.rotate里面跟度数,单位是deg
2.角色为正时,顺时针正,负时,为逆时针
3.默认旋转的点的中心是元素的中心点
缩放:
1.其中的x和y用逗号分隔。
2.transform:scale(1,1) 宽度和高度都放大一倍,相当于没有放大。
3.transform:scale(2,2) 宽度和高度都放大2倍。
4.transform:scale(2) 只写一个参数,第二个参数就和第一个一样。
5.transform:scale(0.5,0.5)缩小
6.scale缩放的最大优势,可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子.
2.transform-origin
元素转换的中心点
transform-origin:x y;
1.x和y空格隔开
2.x y默认转换的中心点是元素的中心点(50%,50%);
3.还可以给x y设置像素 或者方位名称(top bottom,left,right center)
3.2D转换的混合型写法:
1.同时使用多个转换,其格式为 transform: translate(50px, 50px) rotate(180deg) scale(0.5);
2.其顺序会影响转换效果。（先旋转会改变坐标方向）
3.当我们同时有多个属性的时候,记得要将位移放到最前。
4.动画animation
1.先定义动画.
2.再使用(调用)动画.
1.keyframes定义动画.
@keyframes 动画名称 {
0% {
width:100px;
}
100% {
width: 200px;
}
}
动画序列:
1.0%是动画的开始,100%是动画的完成,这样的规则就是动画的序列。
2.在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果.
3.动画是使元素从一种样式逐渐变化为另一种样式的效果,您可以改变任意多的样式任意多的次数.
4.请用百分比来规定变化发生的时间,或者用关键字from和to等同于0%和100%
3.使用动画:
animation-name: move; 使用动画名称
animation-duration: 3s;持续时间
4.动画序列:
可以做多个状态的变化.
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
5.动画常见的属性:
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束。
animation:move 2s linear 0s 1 alternate forwards;
6.CSS3 3D
translate3d
7.私有前缀
-moz- 代表火狐
-ms- 代表IE
-webkit 代表safari,chrome
-o- 代表opera私有属性
