01 CSS综合复习笔记

来源：互联网发布：逆战刷帮豆软件编辑：程序博客网时间：2024/04/29 04:11

1.1开发前的准备工作

1、配置开发环境（常用前端开发工具）

（1）sublime

（2）webstorm

（3）vscode

（4）hbuilder

（5）atom

2、建立项目文件夹（为了将与项目相关的文件放在一起，便于管理和以后的维护）

包括与项目相关的一些文件

（1）主页或是首页（index.html、default.html）

（2）css文件夹（存放css文件）

公用样式css文件的常用命名：

[1] base.css

[2] global.css

（3）images文件夹（用来放置网站中的所有的图片）

（4）js文件夹

（5）音频或是视频文件

3、样式初始化

我们的结构中的标签，都有默认的样式，在各个浏览器中的显示可能不尽相同。为了保证网站风格的统一，或是为了便于我们的开发或是维护，需要将所有的标签原来的样式清除，变成统一的样式风格，以便于我们的网站布局。

4、分析网站构成

做网站的时候，也有一个规范或是通例

（1）布局顺序一般从上到下、从左到右。

（2）在写页面的时候，一般优先考虑标准流的元素，其次才使用考虑浮动或是定位。

（3）在标准流元素中，宽高是最稳定的，其次才使用padding，最后margin（有上下边距合并，其他共享margin等问题）。

（4）标准流：

div、p等块级元素，独占一行。span、a、img、input等行内元素，可以一行显示多个，我们把这样的显示方式叫做标准流。Normal flow

（5）我们网站结构中任何标签，都可以开成是一个盒模型，都可以设置宽高，只是有的元素设置宽高，不起作用。

5、页面使用技术

（1）大页面基本上使用了懒加载显示。（每向下拉动一点，再依次向后台请求数据加载并渲染页面。）

1.2 Css样式书写位置

1、行内式

（1）直接卸载HTML标签内

<div style="width:400px;height: 300px;"></div>

2、内嵌式

（1）写在同页面的一对Style标签内

<style>
    input{
        outline-style: none;
    }
    .shortcut{
        width:100px;
    }
</style>

3、外链式

（1）从外部引入到当前的页面当中，真正的实现了结构与样式的相分离

<link rel="stylesheet" href="css/base.css"/><link rel="stylesheet" href="css/index.css"/>

4、导入式@

1.3 网站的快捷图标

1、如何制作网站快捷图标

www.bithug.net

2、命名

favicon.ico（快捷图标）

--- 一般放项目文件夹的根目录下

-例：

www.taobao.com/facicon.ico

3、引用：

（1）< link rel= "shortcut icon" href="favicon.ico" />

（2）< link rel= "shortcut icon" href="/favicon.ico" />

//如果favicon.ico在根目录下，一定不要加/

4、常用尺寸

一般16x16、32x32

1.4 项目文件夹的跟目录

1、打开项目文件夹的第一层，或是index.html所在的文件夹

1.5 火狐浏览器截图

（1）火狐浏览器页面截图功能，并可以保存完整页面图片到本地。

（如果没有：浏览器设置中-选附加组件-扩展-页面截图-安装）

1.6 通栏

一般类名起名： .shortcut（div样式）

通栏：常用一般报纸、杂志

通栏就是铺满整个屏幕，宽度100%，而面积不到整个页面的一半。

1.7 版心

因为我们屏幕设备的分辨率不一样，因此，显示网站的风格有可能不一样，为了提高用户的体验，将网站的显示的风格统一起来，因此需要给网站设置一个版心。

概念：

所谓版心就是页面的主要内容所在的区域，页面正中的位置。

/*公共类*/
.w {
    /*版心 提取 */
    width: 1210px;
    margin: 0 auto;
}

1.8 FW 快捷键

1、 I ：滴管工具，吸取颜色

2、 K ：切片工具，量取元素的宽度

3、 Z ：放大镜工具

4、 V ：移动工具

5、 A : 指针工具，选取

6、ctrl+ 滚轮放大：浏览器放大

7、ctrl +0 ：浏览器恢复默认

FW：按住z，然后按住ctrl，鼠标选择需要放大的地方，放大看辅助线是否精确选中。

注意平时代码中，行高一定要加上px单位。

1.9 、小标签：一般起装饰作用

1、 I s em u del ins

--- 例：

<i><s>◇</s></i>

i 相当于相框， s 相当于i高度一半

（2）下拉框右侧的小三角形：

[1] 特殊符号，菱形。（使用溢出隐藏）

[2] ◇

/* i 的父元素 */
.shortcut_left{
    position: relative;
}
.shortcut_left i{
    width: 14px;
    height: 7px;
    /* 背景色用来调试查看元素位置 */
    /*background: red;*/
    /*display: inline-block;*/
    position: absolute;
    top:12px;
    left: 65px;
    /* 将溢出的部分隐藏 */
    overflow: hidden;
}
.shortcut_left i s{
    font: 400 14px/30px consolas;
    position: absolute;
    top: -14px;
    left: 0;
}

1.10 Font 复合属性

Font-weight: bold, // 约等于700

Font-size/行高 //字体的大小/行高

Font-family //字体的样式

Font-style //字体风格

1.11 元素的实例化

给元素设置宽高之后，再给一个背景色或是边框，让此元素直观的显示出来，可以清晰的看出元素的状态和位置。

1.12 元素之间的转换

让行内元素设置宽高之后起作用：

1、转换成块级元素或是行内块元素。

2、让此元素拥有定位（绝对定位或是固定定位）。

3、浮动也可以让行内元素拥有宽高。

--- 例：

1.13 Webstorm 快捷键

1、ctrl+alt+l 代码格式化（让代码对齐）

2、ctrl+d 复制当前行的代码到下一行

3、ctrl+x 删除当前行

4、快速生成标签：

ul>li*9>a[herf=#]

+tab按键，快速生成：

<ul>
    <li><a href="" herf="#"></a></li>
    <li><a href="" herf="#"></a></li>
    <li><a href="" herf="#"></a></li>
    <li><a href="" herf="#"></a></li>
    <li><a href="" herf="#"></a></li>
    <li><a href="" herf="#"></a></li>
    <li><a href="" herf="#"></a></li>
    <li><a href="" herf="#"></a></li>
    <li><a href="" herf="#"></a></li>
</ul>

1.14 子绝父相

1、子元素是绝对定位的时候，父元素是一个相对定位，那么，父级元素是给子元素设置范围的作用。

2、如果三个元素之间的嵌套的话，就不一定非得是子绝父相，子绝父绝爷相。

3、定位，首先找离自己最近的父级元素进行的一个定位，如果父级元素没有定位的话，默认是以浏览器或是文档的左上角为准，如果父级元素有相对定位，或是绝对定位的时候，以父级元素的左上角为准。

1.15 权重的问题

标签 < 类 < ID < 行内 < !important

1 10 100 1000 无穷大

0 0