CSS

发表于 | 分类于

CSS

css的概念

css（Cascading Style Sheets）层叠样式表

【作用：主要作用就是设置网页的文字（大小，颜色，字体，对齐等等）图片和板式布局等等 说的简单点了就是给页面化妆的】

语法

1
2
3
4
5
6
7
8
9
<style>

选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
}

</style>

【符号为英文状态下】

样式表

内嵌样式表

在html文件里面 书写style标签，将所有的css语句都写在这对标签里面；

  • 优点：基本实现样式和结构的分离
  • 缺点：没有完全实现样式和结构的分离

控制范围：当前页面

外链式样式表

单独的css文件，通过在html文件里面通过link标签引入

  • 优点：完全实现样式和结构的分离
  • 缺点：需要引入

控制范围：整个网站

行内式样式表

将css作为标签的属性添加在标签内部

  • 优点：权重最高
  • 缺点：没有实现样式和结构的分离

控制范围：当前这个标签

选择器

基础选择器

标签选择器

语法：

1
2
3
4
5
<style>

css语句

</style>
1
2
3
4
5
6
7
8
9
<style>

选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
}

</style>
1
2
3
4
5
6
7
8
9
10
<style>

h1 {
font-size:40px;
color:red;
background:yellow;
text-align: center;
}

</style>

标签选择器的特点：

  1. 能够快速的选取所有符合的标签。
  2. 不能实现差异化选择。
类选择器

声明类选择器 .自定义类名 {属性1:值1;属性2: 值2;}

调用类选择器 给需要的元素添加 class=”自定义的类名”

可以根据自己的需求定义对应的类选择器，通过给对应的元素调用该选择器。

【多类名选择器：一个标签可以调用多个类，中间用空格隔开；】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>

span {
font-size: 180px;
}

.blue {
color: blue;
}

.red {
color: red;
}

.green {
color: green;
}

.orange {
color: orange;
}

.touming {
color: colourless;
}

</style>

<span class=”blue”>G</span>
<span class=”red”>o</span>
<span class=”orange”>o</span>
<span class=”blue”>g</span>
<span class=”green”>l</span>
<span class=”red”>e</span>
id选择器

id选择器和类选择器写法基本一样

声明类id #id名 {属性1:值1;属性2: 值2;}

调用类id 给需要的元素添加 id="自定义id名"

id选择器只能被一个元素使用，一般配合JS使用。

【id名在一个页面中具有唯一性，不能重复声明和调用；】

通配符选择器
1
2
3
4
*{
属性1: 值1;
属性2：值2;
}

通配符选择器是对页面所有元素生效，但是需要遍历所有标签；一般不用。

伪类选择器

伪类选择器更像一种元素状态的选择器，更多的是一种交互状态，

1
2
3
4
a:link {} /*没有被访问的时候的状态*/
a:visited {} /*访问之后的状态*/
a:hover {} /*鼠标移动上去之后的状态，hover这个伪类其他标签也可以使用*/
a:active {} /*鼠标按下的状态*/

可以匹配其他的选择器一起使用，不局限单个标签选择器。

  • 标签-伪类选择器：a:hover {}
  • 类-伪类选择器：.red:hover {}

在实际的工作中一般不会全部使用，推荐使用简写方式

  • a {}（a:link）
  • a:hover {}

复合选择器

交集选择器

p.box {} (选择器名选择器名选择器名 {})

即又原则

即是某1标签又是某2标签；连写；

交集选择器是从css指向标签内选择器名，类似取值于标签内的多类名合集生成一个新类选择器并赋予新属性；必须要满足交集选择器的条件才生效；

并集选择器

并集选择器 后代选择器、子代选择器也可以写在并集选择器中。

div,p,h1 {} 选择器名,选择器名,选择器名 {}

和；用逗号隔开；

赋予多个选择器一个公共css样式；

后代选择器

.father .houdai {} 选择器名空格选择器名空格选择器名 {}

后代继承；空格隔开；

空格前后的元素必须是包含关系；

子代选择器

.father > .son {} 选择器名>选择器名>选择器名 {}

包含后代选择器时，后代内只要满足相同父子代选择器的条件都生效。

精确匹配到第几代继承；满足的父子关系都能生效；

【前后的元素必须是父子关系，不能跨代选择；】

字体属性

字体一般常用属性

1
2
3
4
5
6
7
8
9
10
11
font-style:normal 或者 italic 字体的风格（倾斜）
font-weight:400(normal) 或者 700(bold) 100-900 字体的粗细
font-size:40px; 字体的大小
font-family:"宋体","microsoft yahei"; 选择不同的字体,中文或者中间有空格 # $ 特殊符号的要带引号。不建议使用冷门字体，字体可以写多个，中间用逗号隔开。
字体属性的简写

font:font-style font-weight font-size/line-height font-family;
属性之间用空格隔开，字体可以写多个，中间用逗号隔开。

font:font-size font-family;
不建议修改顺序，并且不需要设置的属性可以不写，一定要有font-size和font-family，否则不生效。

text-系列

1
2
3
4
5
6
7
text-align:控制标签元素内部的文本水平居中。
text-align: 文本水平居中 取值:left center right
text-indent: 首行缩进 取值:可以是px或者em，em是相对文字的大小，1em就是一个文字的大小
text-decoration: 控制文字下划线或者贯穿线。
underline 下划线
line-through 贯穿线/删除线
none 清除其他状态

行高

行高控制的是行与行之间的距离；

1
line-height:值;

小技巧：行高等于模块高度可以实现单行文本垂直居中

颜色属性

颜色表示法：

  • 英文
  • 十六进制 #000000;
  • rgb(r,g,b);
  • rgba(r,g,b,a)a是透明度，a的取值范围0 - 1

css的注释

1
/* 注释内容 */

【快捷键是catl+/，html的注释和css的注释和快捷键一样，html的注释和css的注释不一样，不能交叉使用。】

开发者工具

作用：检查代码和调试代码；

用法：F12或者页面右键“检查”。

【在基础班我们只需要关注element这个面板，右侧的style就是当前标签对应的css样式，我们可以通过这个来检查代码错误和调试代码！！】

标签的三种显示模式

【table表格标签不在此列】

块级元素

1
display:block
  • 可以设置宽高
  • 独占一行
  • 继承父级宽度

div,p,ul,ol,li,dl,dt,dd,header,footer,aside,nav,article,section,

行内元素

1
display:inline
  • 宽高设置无效
  • 标签内容撑开的大小
  • 可以和其他行内标签，并排显示

a,span,strong,b,em,i,ins,u,del,s,

行内块元素

1
display:inline-block
  • 可以设置宽高
  • 可以和其他行内标签元素并排显示

img,input,

css的三大特性

继承性

后代元素会继承祖先元素的一些样式，跟文字相关属性可以继承color font- line- text-可以继承。

块元素可以继承父级元素的宽度，高度不继承。

【a链接的颜色需要单独写】

层叠性

浏览器读取相同权重的选择器，自上而下读取，后渲染的css样式会覆盖掉先渲染的css样式（权重相同）

【注意：层叠性只针对css的书写位置，类的调用位置先后会它没有影响；】

优先级(权重)

选择器的不同，当多个选择器作用一个或者有关系的标签，互相冲突时，浏览器会根据优先级的不同来选择优先级最高的css样式渲染。

继承 < 通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 <　!important

【!important如果包裹在继承关系里，依然不起作用。】

继承或者* 的贡献值 0,0,0,0
每个元素（标签）贡献值为 0,0,0,1
每个类，伪类贡献值为 0,0,1,0
每个ID贡献值为 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important贡献值 ∞ 
1
2
3
4
5
6
7
继承            0,0,0,0
通配符          0.0.0.0
标签选择器       0.0.0.1
类选择器        0.0.1.0
id选择器        0.1.0.0
行内样式        1.0.0.0
!important     ∞

!important 只针对单一的css样式属性；

1
2
3
box {
  color: red !important;
}

【但是如果包裹在继承的样式表中，不生效；】

背景background

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
background-color: 背景颜色; 颜色可以设置成透明
background-image: url(图片路径);盘符路径\换成/才会起作用。
background-repeat: 背景平铺;
  取值范围：repeat 平铺 默认的
  no-repeat 不平铺
  repeat-x 水平平铺
  repeat-y 垂直平铺
background-position：背景图片位置;
1.方位名词 right top left center bottom 书写的顺序不论；
2.像素 盒子左上角为原点，向右为X轴（第一个值），向下是Y轴（第二个值），X与Y交叉的地方时图片的起始位置；顺序不能调换。
3.百分比 走盒子自身的宽高的百分比，并且往回走自身宽高的百分比。顺序不能调换
4.还可以混写 混写是需要考虑顺序

background-attachment: 背景是否滚动;
  scroll 默认值 图片跟随盒子一起滚动；
  fixed 图片不跟随盒子一起滚动，位置的参照以当前屏幕为基准，不在以当前盒子为基准。

背景简写 background (快捷语法bg+)

background:背景颜色背景 图片地址 背景位置 背景平铺 背景滚动

img和background的取舍

  • img可以直接写，默认会有宽高，而背景图片撑不开容器，要想看见背景图片盒子必须有宽高；
  • 实际工作中，img一般用于产品插入图（时常会更新）；
  • 而背景图一般用于小icon，小图片等或者是特别大的图片；

盒子模型的组成

盒子的组合

  • width 大小
  • padding 内边距
  • border 边框

边框

  • border:边框大小 边框样式 边框颜色

边框样式

  • solid 实线
  • dashed 虚线
  • dotted 点线
  • double 双实线

某一方位的边框写法

  • border-方位名词：边框大小 边框样式 边框颜色

宇宙无敌写法

  • border-top-width: 10px;
  • border-top-style: solid;
  • border-top-color: blue;

三角形画法

1
2
3
4
5
width: 0;
height: 0;
border-left: 200px solid lime
border-right: 200px solid lime;
border-bottom: 300px solid red;

【细实线表格边框】

加在table上面

1
2
3
table {
border-collapse:collapse
}

边框圆角

borde-radius:值

  • 取值：像素或者百分比
  • 正圆：正方形 值是width的一半或者50%
  • 椭圆：长方形 值是50%

控制四个角

1
2
3
4
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

内边距

1
2
3
padding:内边距
padding:可以取值1-4个，按顺时针顺序递增
padding-方位名词：

行内元素可以写左右padding值，但是不要写上下的，上下padding值会占用上下其他位置

padding值会增加盒子大小，在实际工作中，我们很难直接话的得到盒子的内容（width）的大小，所以我们会直接将整个盒子（width + padding+ border）量出来，在后续如果需要添加padding的情况下，一定要减掉 padding

【但是一种情况例外：盒子没有width的情况下 添加padding 浏览器默认会在width的基础上减掉padding和border；这种情况只针对 width 水平方向的的padding和border；】

外边距

1
2
3
margin:外边距
margin:可以取值1-4个，按顺时针顺序递增
margin-方位名词：

不会增加盒子大小，只会移动盒子本身。

设置盒子的水平居中 margin:0 auto;

【必须是块级元素；必须有固定宽度；】

margin 对盒子本身起作用

text-align:center行内(行内块)元素居中

外边距的BUG

  • BUG1：相邻块元素垂直外边距的合并

BUG1产生的条件: 盒子上下摆放，上盒子有下外边距，下盒子有上外边距，两个边距会重合，以大的边距为标准 。

解决：避免即可或者加在一块，写在一个盒子

  • BUG2：嵌套块元素垂直外边距的合并

BUG2产生的条件：两个盒子嵌套关系，内部盒子有margin-top会作用到外部盒子上面

解决方式：

  1. 给外部盒子添加上边框或者上padding
  2. 给外部盒子添加overflow:hidden; 触发了BFC

外边距BUG的解决方式

  1. 给父盒子加边框 (上边框)
  2. 给父盒子加padding-top
  3. overflow: hidden; (触发了BFC, 块级格式化上下文)
  4. 利用浮动, 给子元素加 float: left;

布局的三种方式

  • 标准流 按照标签默认的特性摆放盒子即为标准流
  • 浮动流 利用浮动摆放盒子即为浮动流
  • 定位流 利用定位摆放盒子即为定位流

浮动流

浮动最开始是做图文绕排的

浮动可以让块级元素排成一排，或者一个靠左一个靠右。

浮动的最大价值就是让元素排成一排

浮动使用口诀：要浮动兄弟元素一起浮动

浮动的特性

脱标：（脱离了标准流）

脱标的元素拥有行内块的表现

  1. 脱标的元素不占标准流的位置（标准流里面的位置）
  2. 不会继承父级的的宽度，内容有多个就撑多大 （不论前身块级还是行内）
  3. 可以直接写宽高 （不论前身块级还是行内）
  4. margin:auto对于脱标元素不起作用

浮动的细节

浮动的盒子撑不开父容器

  1. 浮动是在盒子内容区域浮动，不会超出padding区域（水平方向）
  2. 浮动的盒子一排装不下的时候会掉下来（掉下来的位置会根据上一个浮动盒子的高度决定）
  3. 右浮动会颠倒盒子顺序
  4. 浮动的盒子压不住文字和图片

浮动脱标带来的问题

浮动的盒子撑不开父容器

解决办法：强制追加一个高度（不推荐，因为很多时候盒子的高度是会变化的）

闭合浮动

额外标签法，在浮动元素的后面增加一个块级元素 给这个元素添加一个clear:both;属性就可以了

伪元素闭合浮动

给父元素添加overflow:hidden; (在某些特定场景下使用不了)

伪元素闭合浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/* 01 */

.clear {
clear: both;
}

/* 02 */

div .box::after {
content: ‘’;
display: block;
clear: both;
}

/* 03 */

.clearfix::after {
content: ‘’;
display: block;
clear: both;
height: 0;
visibility:hidden;
}

.clearfix::after {
zoom: 1;
}

/* 04 新写法 */

.clearfix::before,
.clearfix::after {
content: ‘’;
display: table;
}

.celarfix::after {
clear: both;
}

.celarfix::after {
zoom: 1;
}

/* 闭合浮动公共类 */

.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
zoom: 1;
}

伪元素

  • 伪元素的作用是在当前标签内部的前面或者后面追加一个虚拟的标签
  • 伪元素是由css渲染的，可以直接理解就是一个标签，所以不会增大DOM（页面）开销
  • 伪元素默认是行内元素，可以进行转块等处理
  • 伪元素不管有没有内容，都需要添加content这个属性，没有内容写一个空
  • 伪元素 官方推荐写:: 但是为了兼容考虑，写成单冒号
  • 因为伪元素是css渲染，所以JS获取不到，（可以获取到样式？？？）
1
2
3
选择器名::after/before {
content: ‘’;
}

版心

约束网页的一个具体的值（通常为1280），为了保持不同的分辨率屏幕上视觉一致。

建立一个版心的公共类，不需要设置宽度，默认（width100%）

版心图片作为背景图片放到这个盒子里面

同时background-position:center 0 和 background: url(big-banner.jpg) center 0 no-repeat;

版心公共类

1
2
3
4
.container {
width: 1200px;
margin: 0 auto;
}

定位

定位总结

  • 静态static 不脱标，正常模式 不可以 正常模式
  • 相对定位relative 不脱标，占有位置 可以 相对自身位置移动
  • 绝对定位absolute 完全脱标，不占有位置 可以 相对于定位的父级移动位置
  • 固定定位fixed 完全脱标，不占有位置 可以 相对于浏览器移动位置

定位层叠

z-index

  • 控制“定位”元素的叠放层级
  • z-index只针对定位元素有效果
  • z-index值越大，层级越高
  • 如果父元素已经比较过层级了（父元素都有z-index的时候，并且值不为auto），那么子元素与子元素之间是不会再去比较的。先比较父元素（1父没有1子也是先与2父比较）
  • z-index只针对定位元素有效果（静态定位除外）

偏移值

  • 偏移值left,right,top,bottom
  • 偏移值准确的理解是“距离什么位置有多远” 如 top:100px; 距离顶部为100像素 （向下走）。

静态定位 position:static;

  • 所有的标准流都是静态定位，一般用于将某些已经定位的元素还原成标准流，用的很少
  • 偏移值对于静态定位来说不起作用，
  • 我们以后说的元素定位不包括静态定位。

相对定位 position: relative;

  • 以自身为参考的定位
  • 不对别的标准流影像，占位置的标准流，（身体不在，灵魂永驻）
  • 可以盖住在其他标准流上面
  • html里下面的相对定位会盖在上面的相对定位上

绝对定位 position: absolute;

从父亲开始一直往上找（直到找到最大的html标签），在这个过程中，只要有一个元素（A元素）是定位（相对，绝对，固定）的任何一个，这个绝对定位的元素就会参照这个A元素进行定位，并且不会在往上找了，如果一个都没有，最终会以html/body元素定位。

定位的特性：

  • 脱标的元素，不占标准流的位置
  • 不会继承父级的的宽度，内容有多个就撑多大 （不论块级还是行内）
  • 可以直接写宽高 （不论块级还是行内）
  • margin:auto对于脱标元素不起作用

水平居中

让一个定位盒子水平垂直居中

1
2
3
4
`left: 50%;`
margin-left: -自身宽度的一半;
top: 50%;
margin-top: -自身高度的一半;

配合使用

在工作中，绝对定位”大多”配合相对定位一起使用（父相子绝）

  • 父相：在标准流上占有位置
  • 子绝：给予这个标准流在去移动

注意：父绝子绝的情况也有，只是很少，不要完全形成思维定式。

父相子绝 子不设置偏移值，会在原来的位置

固定定位

position: fixed;

  • 脱标的元素，不占标准流的位置
  • 不会继承父级的的宽度，内容有多个就撑多大 （不论块级还是行内）
  • 可以直接写宽高 （不论块级还是行内）
  • margin:auto对于脱标元素不起作用

定位特性

  • 偏移的出发点：浏览器窗口 （直接表现：滚动条对于固定元素没有作用）
  • 对于有些不是贴在边缘的盒子，一般采用版心位置偏移定位，偏移值设为版心的一半，在加减掉自身的宽度。
1
2
3
4
5
position: fixed;
left: 50%;
margin-left: -621px;/ 版心的一半±自身宽度（左右） /
top: 50%;
margin-top: -144px; / 自身的宽度一半 /

元素的显示和隐藏

display:

  • display的值为none的时候，元素完全隐藏，并且不占位置
  • display的值为block的时候，元素呈块级显示
  • 不占DOM内存

visibility的值选择

  • visibility的值为hidden的时候，占位置隐藏
  • visibility的值为visible的时候，显示
  • 占DOM内存

伪类hover的注意事项

当img隐藏时，鼠标不能移动到img时，.box:hover img {} 先移动到box盒子上触发了img的括号里面属性。

鼠标移上box的时候找到img图片 前提是这个img图片必须包含在.box里面

overflow

overflow:

  • visible 直接显示，默认选项
  • hidden 超出的部分隐藏掉
  • auto 如果超出，自动产生滚动条，如果不超出，不产生
  • scroll 不管有没有超出，都有滚动条控件
  • overflow-x: hidden;垂直裁切，上下出现滚动条，可以查看上下内容；
  • overflow-y: hidden;水平裁切，左右出现滚动条，可以查看上下内容。

BFC

BFC：块级格式化上下文，Block formatting context

overflow只要取值不是visible的情况下，会产生一个BFC（块状格式上下文）区域。

BFC，会将区域里面的元素包裹起来，盒子内部的空间与外部完全隔离，定位position:也会出现BFC，

透明

背景透明：background-color: rgba(0,0,0,0-1);0.1

整个盒子透明：opacity: .0-1;0.1

透明颜色：transparent; 和red，yellow，gold等一样是颜色；

vertical-align

控制行内块元素的垂直对齐方式

  • 基线 baseline （文字的基线）图片的基线和文字的基线保持对齐，默认值
  • 中线 middle （文字的中线）图片的顶线和文字的顶线（行高的顶线）对齐
  • 顶线 top （行高的顶线）图片的底线和文字的底线（行高的底线）对齐
  • 底线 bottom （行高的底线）图片的中线和文字的中线对齐

应用场景：

  • 可以解决图片与文字排列时候底下留白的问题 （不要让图片以基线对齐即可 或者将图片转成块元素）
  • 可以解决表单元素与文字排列不对齐的问题（设置图片的vertical-align：middle || top || bottom）
  • 可以设置图片（行内块）垂直居中
  • 可以设置多行文字居中显示

图片水平垂直居中，如何让一个行内块在一个盒子里面水平垂直居中：

  1. 给父级元素设置text—align：center （水平居中）
  2. 给父元素设置一个等高的行高
  3. 给行内块元素设置vertical-align：middle；（让图片以文字的中线对齐）

如何设置多行文本水平垂直居中

  1. 给多行文字包裹一个盒子 给这个盒子设置成行内块
  2. 给父级元素添加行高，并且给行内块元素设置成vertical-align:middle;即可
  3. 给行内块添加行高 让其覆盖掉继承过来的行高

溢出文字以省略号的形式显示

单行文本溢出省略号显示

1
2
3
4
5
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;

/* 三行缺一不可 */

多行文本溢出省略号显示

1
2
3
4
5
6
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

/* 数字3为在第几行以省略号形式出现 */

white-space: nowrap; 单行文字强制不换行

精灵图

  • 概念：就是将很多的小图片 icon，都整合到一张大图上使用。
  • 作用：减少网络请求，降低服务器压力，提高效率
  • 优化：减少网络请求，降低服务器压力。

原因：因为浏览器会去服务器请求页面，请求回来的页面在执行的过程里面，会不断的去服务器请求对应的图片，当页面上的小图片过多了，那么浏览器会频繁的去服务器发请求，这个会给服务器带来很大的压力，同时效率很慢。解决方式就是将小图片整合到一张大图上，直接请求大图片即可，需要使用到某一张小图的时候只需要获取这个小图在这张大图的位置即可

使用方式：

  1. 将需要显示的区域用切片选中，直接将切片的宽高赋值给盒子
  2. 直接获取切片的坐标，直接将坐标取负值赋值给background-position

滑动门技术

  • 盒子的内容撑开滑动门
  • 三个盒子浮动 左浮动
  • 左边盒子写宽高 负责左边的背景图片渲染
  • 右边盒子写宽高 负责右边的背景图片渲染
  • 中间盒子不写宽 让内容撑开，大概1px的背景图片水平平铺

字体图标

  • 概念：将图标做成字体来是使用，可以和文字一样，受文字属性控制
  • 作用：字体相对图片来说容量更小，同时更加利于维护和修改
  • 使用：借助于第三方网站（iconfont.cn）找到对应的图标。下载下来，按照DEMO提示即可 （一定要注意文件的路径）

其他细节补充

改变鼠标移动到标签上的样式：

1
2
3
4
5
6
7
cursor: pointer; /*小手*/
cursor: default; /*箭头*/
cursor: text; /*文本*/
cursor: move; /*移动*/
cursor: url(); /*临时替换的样式; 自定义的样式*/
outline: none; /*去掉选中之后的蓝色边框，去掉选中之后的蓝色边框，input，textarea*/
resize: none; /*去掉文本域的自动拉伸效果，textarea左下角默认会有一个可以调节文本域大小，去掉文本域的自动拉伸效果*/

项目总结

css文件的分类

  • normalize.css 初始化css文件 将各大浏览器之间的样式全部统一
  • common.css 公共样式文件

ico图标

使用网站将图片转成ico图标，网站（http://www.bitbug.net/）

使用代码 <link rel=”shortcut icon” href=” /favicon.ico” /> （注意路径：建议将ico图标放到根目录下面）

网页SEO三大标签

网页的title标签：

title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。

长度：谷歌：35个中文 百度：28个中文

首页建议：网站名（产品名）- 网站的介绍

Description标签：

<meta name=”description” content=”针对网站的描述，是标题的一个补充，可以较为详细，一般不超过120个字，作用相对次之” />

Keywords关键字：

<meta name=”Keywords” content=”搜索引擎的关注点之一，应该限制在6-8个关键字之间” />

目录搭建

  • 项目文件夹：最大的文件夹，所有的项目文件都存放在这个文件夹里面 例如：pinyougou
  • css文件夹：专门用来存放css文件的文件夹
  • images文件夹：专门用来存放不怎么更新的图片的文件夹
  • upload文件夹：专门用来存放时常更新的产品图的文
  • fonts文件夹：专门用来存放字体相关的文件夹

盒子显示模式

  • 块级元素：独占一行，可以设置宽高，没有宽度的时候回继承父级宽度
  • 行内元素：可以和其他行内元素排一排，宽高设置无效，内容有多大就城多大
  • 行内块元素：可以和其他行内元素排一排，可以设置宽高，不设置宽高，不会继承父级宽度，内容有多大撑多大

脱标：

  • 不占标准流位置
  • 可以设置宽高
  • 不设置宽高，内容有大就撑多大

浮动：

  • 让盒子排一排或者一左一右排放

定位：

可以让元素定位到任意地方，并且不会干扰其他标准流

居中总结

text-align：center 让盒子内部的文本或者行内块水平居中

line-height等于高度 让盒子内部的文本垂直居中

margin:0 auto 让块级元素水平居中 （必须有宽）

定位居中： left:50%; top:50%; margin-top: -自身高度的一半 margin-left:-自身宽度的一半

行内块元素垂直居中：

  • 让父级元素设置高度等于行高 （让文字居中）
  • 给行内块元素设置vertical-align：middle（让行内块元素与文字的中线对齐）

将文字隐藏

1
2
text-indent: -99999px;
font-size: 0;

属性选择器 [属性=”值”]

`.box input[type=”text”

伪元素添加线

1
2
3
4
5
6
7
8
9
.louceng1 .pinpai1 ul li:after {
content: “”;
height: 39px;
border-left: 1px dotted #ccc;
position: absolute;
left: 0;
top: 13px;

/* 父级定位是li，因为虚拟标签添加在li内部 */

验证表单属性不为空

验证当前表单不能为空 必须配合form表单提交 ajax提交没有作用

autocomplete 自动补全 必须成功提交一次 必须要有name属性，取值是 on 默认值 off 关闭

box-sizing: border-box

  • 原始方案：一旦盒子设定好了宽高 后期添加padding和border的时候会撑大盒子，为了保证盒子的整体大小不变 需要手动减去 padding和border的大小
  • 改进方案：如果这个盒子本身没有width属性 那么添加的padding和border不会撑大盒子 (margin其实也不会撑大盒子) 仅限于宽度 上下的padding是不会自动内减的
  • 无敌方案：即使这个盒子有宽高 有后添加的padding和border 只需要添加box-sizing：border-box；就可以帮你自动减去padding和border 即使是高度也可以

阴影

字体阴影：text-shadow: X轴偏移 Y轴偏移 羽化大小（模糊程度）颜色

盒子阴影：box-shadow: X轴偏移 Y轴偏移 羽化大小（模糊程度）阴影尺寸 颜色 内阴影 (inset)

  • 阴影尺寸可以不写，但是如果要写阴影尺寸就不能缺少羽化大小，按默认顺序排列

分页模块

  • 分页是一个公共模块，在很多地方是需要出现的，所以做成一个公共模块
  • 而且分页的个数是不确定的，导致整个盒子的宽度不是固定的
  • 如果用浮动，居中起来比较麻烦，所以这里选用行内块

偏移到盒子外

如果绝对定位的元素偏移值在相对定位的外面，那么这个盒子里面的的文字会自动换行，不会撑开盒子

解决方法：给绝对定位一个固定的宽度，如果只有文字的话 可以 强制不换行

分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多