html入门之css基础详解

今天分享下html入门之css基础详解这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。

我将利用三天的时间段来进行制做京东首页的静态网页实际效果，在其中含有的主要内容有html及其css。

1.在开发设计开展以前，最先要配备开发工具：大家必须安裝sublime  webstorm  vscode  Hbuilder  atom等软件开发，挑选其一就可以。我所应用的是webstorm。

2.在主文件夹中创建相关的新项目文件夹 ：为了更好地将与新项目相关的文件放到一块，方便管理和之后的维护保养。

在其中：包含与新项目相关的一些文件

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

Css文件夹    css文件的

            Base.css     global.css

Images文件夹  用于置放网址中的全部的照片

Js文件

声频或者视頻文件

3.在这里以后我们要开展样式初始化，一般全部网站建设以前都是会开展样式初始化，比如淘宝网.京东商城那样的知名网站，都是有自身的样式初始化css文件。如：

XML/HTML Code复制内容到剪贴板

1. html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {   
2.     margin: 0;   
3.     padding: 0;   
4. }   
5. fieldset, img, input, button {   
6.     border: none;   
9.     outline-style: none;   
11. ul, ol {   
12.     list-style: none;   
14. /*去掉原样式中的小黑点*/   
15. input {   
16.     padding-top: 0;   
17.     padding-bottom: 0;   
18.     font-family: "SimSun", "宋体";   
20. select, input {   
21.     vertical-align: middle;   
23. /*输入字居中显示*/   
24. select, input, textarea {   
25.     font-size: 12px;   
28. /**/   
29. textarea {   
30.     resize: none;   
32. /*防止拖动*/   
33. img {   
34.     border: 0;   
35.     vertical-align: middle; /*  去掉图片底部默认的3像素空白缝隙*/   
37. table {   
38.     border-collapse: collapse; /*合并外连线*/   
40. body {   
41.     font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*unitedCode的写法，宋体的写法*/   
42.     color: #666; /*150%基于当前字体尺寸的百分比行间距*/   
43.     background: #fff;   
45. .clearfix:before, .clearfix:after {   
46.     /*清除浮动，最好最标准的写法*/   
47.     content: "";   
48.     display: table;   
50. .clearfix:after {   
51.     clear: both;   
53. .clearfix {   
54.     *zoom: 1; /*IE/7/6*/  /*兼容IE6下的写法*/   
56. a {   
57.     color: #666;   
58.     text-decoration: none;   
60. a:hover {   
61.     color: #C81623;   
63. h1, h2, h3, h4, h5, h6 {   
65.     font-weight: normal;   
66.     font-size: 100%;   
68. s, i, em {   
69.     font-style: normal;   
72. .col-red {   
73.     color: #C81623 !important;/*京东主色调*/   
75. /*公共类*/   
76. .w {   
77.     /*版心 提取 */   
78.     width: 1210px;   
79.     margin: 0 auto;   
81. .fl {   
82.     float: left;   
84. .fr {   
85.     float: right;   
87. .al {   
88.     text-align: left;   
90. .ac {   
91.     text-align: center;   
93. .ar {   
94.     text-align: right;   
96. .hide {   
97.     display: none;   
98. }  

这样可以方便开发人员对各个标签的样式的初始化以及公共类的重用。

4、分析网站结构

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

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

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

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

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

要想让行内元素的宽高起作用：

1. 将行内元素转换成块级元素或是行内块元素

2. 浮动   脱标  

3. 定位   脱标

在布局行内块元素时，行内块元素之间有默认的几像素的间距。这几像素的间距只能用浮动来清除。

定位有四种：

Fixed    absolute    relative   static

一般我们在分析网站结构时，使用火狐浏览器可以将这个网页截图之后保存下来：

然后我们可以使用fireworks来提取网站中的具体内容的宽高、颜色等。

Fw的常用快捷键：

I      滴管工具   吸取颜色

K     切片工具    量取元素的宽度

Z   放大镜工具  

V     移动

A     指针工具

常用的复合属性：

Background

mso-char-indent-count:3.4900;">浮动的原因就是因为父盒子没有高度，原来的高度是靠标准流中的子元素撑起来，但是子元素浮动了之后 ，脱离标准流了，造成父级元素的高度为0;

1.给父盒子设置一个高度

2.Clear: both

3.Overflow: hidden   触发了BFC模式 也可以用来清除浮动

4.伪元素或是双伪元素清除法

4.     display: table: http://www.qlyl1688.com ;   

（一般常用伪元素的方法来清除浮动）

定位元素的层级问题：

如果只给一个元素绝对定位，而不写trbl值的话，会以原位显示

定位(相对和绝对或固定)的元素都有一个层级的属性或是概念。如果定位了的相邻多个元素，在同一个位置的话，后面的元素默认会压住前面的元素。如果同样是定位了的元素，默认他们的层级都是0，只不过后面的元素会压住前面的元素。如果想让当前的元素显示在后面的元素之上，这个时候就需要改变层级的关系,用z-index来改变。

z-index的取值范围0---9999999，最好是正数，尽量不要用负数。

另外要注意，position:relative依旧会占据标准流中的位置，会导致其他内容无法在其层级上显示。

透明度opacity

Opacity:有兼容性问题，而且不但让背景颜色透明，而且还让里面的内容也透明

background: rgba(0,0,0,.3);

仅让背景色透明，内容不透明

相邻元素的层级问题

1. <style>  
2.         * {   
3.             margin: 0;   
4.             padding: 0;   
5.         }   
6.         div {   
7.             width: 200px;   
8.             height: 500px;   
9.             border: 10px solid blue;   
10.             float: left;   
11.             /*margin-right: 10px;*/   
12.             margin-left: -10px;   
13.             position: relative; /*定位了的元素，默认的都会有层级的概念，而且默认的层级都是0*/   
15.         div:hover {   
16.             border-color: red;   
17.             position: relative;   
18.             z-index: 1;   
20.     </style>  
21. </head>  
22. <body>  
23. <div></div>  
28. </body>