css实战——第一天

1.  开发前的准备

1.1配置开发环境   sublime  webstorm  vscode  Hbuilder  atom

1.2建立项目文件夹

主页或是首页    index.html   default.html

Css文件夹    css文件的 Base.css     global.css

Images文件夹  用来放置网站中的所有的图片

Js文件

音频或是视频文件

1.3样式初始化

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

1.4 分析网站构成

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

布局的顺序一般是从上到下，从左到右

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

就在标准流元素当中，宽高是最稳定的，其实才使用padding,最后或者可以使用margin.

2.  元素之间的转换

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

转成块级元素或是行内块元素

让此元素拥有定位(绝对定位或是固定定位)

浮动也可以让行内元素拥有宽度

3.  子绝父相

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

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

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

4.  Css样式书写位置

行内式   直接写在HTML标签内；

内嵌式   写在同页面的一对style标签内；

<style>

...

</style>

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

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

导入式  @；