编写静态页面经验总结

静态页面经验总结

1.关于布局时候的居中问题

line-height是内容的垂直居中而不是元素的垂直居中，元素的垂直居中可以利用内联元素设置vertical-align:middle来实现，在确定高度的情况下也可以通过设置margin或者padding来实现。

2.关于absolute的相对位置的问题

当使用absolute定位的时候，其相对位置是以上一级有position的元素的位置为基准的，上一级中没有则上上一级，依次，直至到body元素，则以body元素的位置为基准。

3.同时使用vertical-align和line-height对于元素位置的影响 解决方法：

当文字和图片处于同一行的时候，设置vertical-align：middle和line-height：center并不能使文字和图片都处于中间从而实现文字和图片的居中对齐。

4、浮动的清除几种方法

• 空标签方法：使用一个空标签设置其属性为clear：both，或者直接调用clearfix类（clearfix类的写法在下面）
• overflow：hidden加在浮动的块的上一级属性中
• clearfix方法，将clearfix类直接加在浮动元素的父级元素上即可。

5、logo优化

1. logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要
2. h1里面在放一个a链接，可以返回首页的， 给a链接一个 大小 和 logo 的背景图片
3. a链接里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来
4. 最后给 a链接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了

• 方法一：要用 text-indent 移到盒子外面 （text-indent: -9999px) ，然后overflow:hidden，淘宝的做法
• 方法二：直接给font-size: 0; 就看不到文字了， 京东的做法。

6、表格与框架都具有页面布局的作用，他们在进行页面布局时各有什么优缺点？

表格用于划分页面区域的，而框架是用于分割浏览器窗口的，即使用框架结构的页面可以将一个浏览器窗口划分为多个相互独立又相互联系的小窗口，

使用框架的优点：

• 访问者的浏览器不需为每个页面重新加载导航条；
• 每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架进行浏览

使用框架的缺点：

• 并不是所有浏览器都提供良好的框架支持
• 难以实现在不同框架中精确的对齐各个页面元素

使用表格布局页面的好处：

网上绝大部分的页面都是使用表格来美化的，因为表格有很好的兼容性，可被绝大部分的浏览器所支持，而且使用表格会使页面结构清晰、布局整齐。

7、商品栏进度条

使用 i标签+b标签的组合 结合css样式 完成进度条

h5代码：

css样式代码：

.s-pin .hezi .pin .qian .i1{
    display: inline-block;
    width: 160px;
    border-radius: 10px;
    height: 10px;
    background-color: #ccc;
    margin-top: 10px;
    margin-left: 10px;
}
.s-pin .hezi .pin .qian .i1 b{
    display: inline-block;
    border-radius: 10px;
    height: 10px;
    background-color: red;
}

完成效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3qNXwUNk-1607560484615)(C:\Users\admin\AppData\Local\Temp\1607478074518.png)]

8、表单相关的标签

表单：

< form > < / form >标签
表单元素：

1. input ：属性（button、 checkbox、 color 、date 、datetime 、datetime-local 、email 、file 、hidden 、image 、month 、number 、password 、radio 、range 、reset 、search 、submit 、tel 、text 、time 、url 、week）

2. select option（ 定义下拉选项；option元素定义下拉列表中的一个选项（一个条目）selected属性定义默认的选项显示；disabled属性规定此选项应在首次加载时被禁用；optgroup属性定义下拉框中同类型条目的标题；具体格式为：select optgroup option）

3. textarea（标签定义多行的文本输入控件，文本区中可容纳**无限数量**的文本，其中的文本的默认字体是等宽字体（通常是 Courier），控件可以通过 cols 和 rows 属性来规定 textarea 的尺寸，但是不推荐这种方式，一般设置css中的height，width）

9、标签元素

1.块级元素：

• 独自占据一行,故默认宽度是容器的100%
• 可以设置宽、高、行高、内外边距
• 可以容纳行内元素和其他块级元素

*注：文字类的块级元素不能容纳块级元素，例如

/

~

/ *

2.行内元素：

• 会和相邻的行内元素排成一行
• 设置宽、高无效，默认宽高是其自身内容的宽高
• 只能设置水平方向的内外边距
• 只能容纳其他行内元素和文本

*注：可以放块级元素，但是链接里面不能再放链接。*

3.行内块级元素：**综合了块级元素和行内元素的特点

• 和相邻行内块级元素在同一行
• 默认宽、高为其内容的宽、高
• 可以设置宽、高、行高、内外边距

10、display属性

display属性是我们在前端开发中常常使用的一个属性，其中，最常见的有：

• none
• block
• inline
• inline-block
• inherit

display:none

none这个值表示此元素将不被显示。

display:block

使用了display：block;之后， 此元素将显示为块级元素，此元素前后会带有换行符

display:inline

此元素会被显示为内联元素，元素前后没有换行符

显然，display:inline的作用即可以将一个块级元素转换成行内元素，那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding

display：inline-block

它是结合了inline和block的特性于一身

即设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性

display:inherit

规定应该从父元素继承 display 属性的值

11、css样式

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签(少)
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面(中)
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点(多)

12、css选择器

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color:red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color:red; }
id选择器	一-次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color:red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格.nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是 又是	较少	没有符号p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住a{}和a:hover实际开发的写法

13、定位

绝对定位 Position:absolute;

特点：

1. 元素使用绝对定位之后不占据原来的位置（脱标）
2. 元素使用绝对定位，位置是从浏览器出发。
3. 嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
4. 嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
5. 给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）

相对定位 Position: relative;

特点：

1. 使用相对定位，位置从自身出发。
2. 还占据原来的位置。
3. 子绝父相（父元素相对定位，子元素绝对定位）
4. 行内元素使用相对定位不能转行内块

固定定位 Position:fixed;

特点：

1. 固定定位之后，不占据原来的位置（脱标）
2. 元素使用固定定位之后，位置从浏览器出发。
3. 元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）