CSS基础_02：

CSS 书写规范：

空格规范：

选择器规范：

属性规范：

行高的测量：

基线与基线的距离 我们称为行高！！！

如果不给行高的话，上下距离是等于0的，

如果给了行高就有上下距离了，而且，上下距离始终相等！！

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         a{
 8             width: 120px;
 9             height: 58px;
10             background-color: cyan;
11             display: inline-block;
12             text-align: center;
13             text-decoration: none;
14             line-height: 58px;
15         }
16     </style>
17 </head>
18 <body>
19     <a href="#">百度</a>
20     <a href="#">百度</a>
21 </body>
22 </html>
View Code

注：

上图修改，img 是行内块 元素。

常见标签分类：

CSS的三大特性：

CSS层叠性：

css 本身就叫做层叠样式表， 

CSS继承性：

注意：

不是所有的都能继承，一般都是跟文本（颜色，字号，字体，文字的行高）相关的会继承

CSS优先级：

注意：标签（权重为0001 ）并不是最低的，还有一个更低的，它是*　它的权重是００００　

小结：

继续：

注：

补充：继承的权重也为0 ，

就是说，虽然继承很重要，但是有的时候还是要以自己为准！！

这叫就算有个再厉害的爹最终也是要靠自己！

其实关于继承可以这样说，如果自己给自己指定了样式，不管继承来的是什么样式，它的权重如何，都不会改变自己的样式！！！（儿子自己的想法还是很重要的）

权重测试题：

蓝色，第四个的权重是0  ， 

仍然是蓝色，第二个的权重为0 ，第一个的权重没有第三个高 ，

此时的第一个的权重为 0002

第二个的权重为 0001

此时为蓝色，

此时第一个的权重是  0021

第二个的权重是 0101

第三个的权重是 0101 

因为是就近原则，所以选择第三个！

小结：

补充（关于什么时候父亲的继承为0 ）：

CSS背景（background）：

注：默认 是  repeat

背景图片(image)：

pass

背景平铺(repeat)：

pass

背景位置(position)：

此时的图片是插入到页面中的，它的移动比较麻烦，我们可以用它作为背景图，这样移动就十分方便，如下：

此时的效果是平铺：

现在通过css来移动图片，

对于大的背景图片：


背景附着：


背景简写（写一行即可）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         body{
 8             background-image: url("images/mayun.jpg");
 9             background-color: cyan;
10             background-repeat: no-repeat;
11             background-size: 1080px 600px;
12             background-attachment: fixed;
13         }
14         p{
15             color: red;
16         }
17 
18     </style>
19 </head>
20 <body>
21     <div>
22         <p>1234444444444</p>
23         <p>1234444444444</p>
24         <p>1234444444444</p>
25         <p>1234444444444</p>
26         <p>1234444444444</p>
27         <p>1234444444444</p>
28         <p>1234444444444</p>
29         <p>1234444444444</p>
30         <p>1234444444444</p>
31         <p>1234444444444</p>
32         <p>1234444444444</p>
33         <p>1234444444444</p>
34         <p>1234444444444</p>
35         <p>1234444444444</p>
36         <p>1234444444444</p>
37         <p>1234444444444</p>
38         <p>1234444444444</p>
39         <p>1234444444444</p>
40         <p>1234444444444</p>
41         <p>1234444444444</p>
42         <p>1234444444444</p>
43         <p>1234444444444</p>
44         <p>1234444444444</p>
45         <p>1234444444444</p>
46     </div>
47 </body>
48 </html>
View Code

购物车小案例：

 鼠标放上去的时候，背景图片整体上移！

背景透明（CSS3，高版本的才支持）：

导航栏案例：

pass

盒子模型：

看透网页布局的本质：

盒子模型：

它包含了border padding margin 三部分！

盒子边框（border）：

下面是连写：

也可以单独指定边框：

以后的横线就不用hr 来做了，可以直接用border-top 来做。

另种用途：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         input{
 8             border: 0px;/*去掉所有的边框*/
 9             border-bottom: 1px red dashed;
10         }
11 
12     </style>
13 </head>
14 <body>
15     用户名： <input type="text"><br />
16     密　码： <input type="text">
17 </body>
18 </html>
View Code

表格的细线边框：

然后再给每个<td> 标签加上个边框，如下：

这时会有缝隙，

可以通过cellspacing=0 和  cellpadding =0 来调节，

但是此时的相邻边框不会合并在一起，所以显得有点粗，

下面通过collapse 来合并相邻边框，

这时就可以了！

内边距(padding)：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .nav{
 8             height: 48px;
 9             border-top:3px solid #fa7d3c;
10             border-bottom: 1px solid red;
11         }
12         .nav a{
13             height: 50px;
14             /*background-color: cyan;*/
15             display: inline-block;
16             padding-right: 18px ;
17             padding-left: 18px;
18             line-height: 50px;
19             text-decoration: none;
20             color: #4c4c4c;  /*字体的颜色通过color 来调节*/
21             font-size: 14px;
22         }
23         .nav a:hover{
24             background-color: #edeef0;
25             color: #fe8400; /*字体的颜色通过color 来调节*/
26         }
27 
28     </style>
29 </head>
30 <body>
31     <div class="nav">
32         <a href="#">首页</a>
33         <a href="#">手机新浪网</a>
34         <a href="#">客户端</a>
35         <a href="#">联系我们</a>
36 
37     </div>
38 </body>
39 </html>
新浪导航栏

很严重的问题：

此时如果再加上个padding 的话，这时候就会撑开盒子，这是个很严重的问题

注：要注意，是当有width 和 height 时才可以撑开，

其实办法很简单，就是修改width 和 height 使得原来的大小保持不变！！！

内边距练习：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .outer{
 8             width: 100px;
 9             height: 100px;
10             background-color: cyan;
11             padding:100px;
12         }
13         .inner{
14             width: 100px;
15             height: 100px;
16             background-color: red;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="outer">
22         <div class="inner">
23 
24         </div>
25     </div>
26 </body>
27 </html>
通过调节padding 来使里面的盒子居中

同样的是如果border =10 ，的话，

那么要想保持盒子不变，也要减去border 的值，就是width 和 height同时减去 20  ！

所以，一个盒子的真实大小受到 padding 和 border 的影响，

我们在做的时候，要计算出原有大小应该减去多少才可以保持盒子大小不变！！！

小案例：

==========================

所以，在写样式之前，我们都是统一用下面的语句来清除内外边距！！！

============================

综合小案例：（重点）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         body{
12             background-color: #eee;
13         }
14         .article{
15             width: 380px;  /*410*/
16             height: 263px;  /*283*/
17             border: 1px solid #ccc;
18             margin: 10px;
19             padding: 20px 15px 0; /* 上 20 左右 15 下0 */
20         }
21         .article h4{
22             color: #202026;
23             font-size: 20px;
24             border-bottom: 1px solid #ccc;
25             padding-bottom: 5px;
26             margin-bottom: 12px;
27         }
28         li{
29             list-style: none; /*取消 li前面的小点*/
30         }
31         .article ul li{
32             height: 38px;
33             line-height: 38px;
34             border-bottom: 1px dashed #ccc;
35             text-indent: 2em;  /*给每个li 缩进两个字符*/
36         }
37         .article a{
38             color:#333;
39             text-decoration: none;
40         }
41         .article a:hover{
42             text-decoration: underline;  /*鼠标经过时 添加下划线*/
43         }
44 
45 
46     </style>
47 
48 
49 </head>
50 <body>
51     <div class="article">
52         <h4>最新文章/New Article</h4>
53         <ul>
54             <li><a href="#">发生纠纷大厦附近发生打架</a></li>
55             <li><a href="#">发生发生都发生的</a></li>
56             <li><a href="#">极乐空间看了就分开了就独守空房</a></li>
57             <li><a href="#">发到空间访客的身份</a></li>
58             <li><a href="#">就困了就离开过家</a></li>
59         </ul>
60 
61 
62     </div>
63 </body>
64 </html>
View Code

外边距(margin)：

=================================

实现盒子居中：

我们之前知道，通过text-align可以使 盒子中的内容居中：

那么如何让盒子本身居中对齐呢？

可以通过margin来设置，

也可以写成：margin:auto ; 

但是用的最多的是 margin: 0 auto;

注： margin:0 auto ; auto 的意思是  弹簧。

=================================

插入图片和背景图片的使用时机：

小图标等用背景图片的好处是：我们可以通过padding 轻松的操控它的位置， 

=================================

实际中的写法：

外边距合并：

=================================

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

有两个嵌套的div 

现在想让里面的div 下移50 ，

有两种解决方案：

第一种：外部盒子的padding-top =50;  它是可以的。

第二种：内部盒子的margin-top = 50 ; 这时就会出错了，它会把外部的盒子也带下来，这种现象就是下面要说的嵌套块元素的垂直外边距的合并问题：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .father{
 8             width: 500px;
 9             height: 500px;
10             background-color: cyan;
11             /*padding-top: 50px; !*这种操作（通过修改padding）是可以的*!*/
12         }
13         .son{
14             width: 50px;
15             height: 50px;
16             background-color: orange;
17             margin-top: 50px;  
18         }
19 
20 
21 
22     </style>
23 
24 
25 </head>
26 <body>
27     <div class="father">
28         <div class="son"></div>
29     </div>
30 </body>
31 </html>
View Code

content宽度和高度：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .father{
 8             width: 500px;
 9             height: 500px;
10             background-color: cyan;
11         }
12         .son{
13             /*儿子默认是和 父亲的宽度一样的*/
14             padding-left: 50px;  /*这里的padding 是不会影响它的宽度的*/
15         }
16     </style>
17 
18 
19 </head>
20 <body>
21     <div class="father">
22         <div class="son">12343434</div>
23     </div>
24 </body>
25 </html>
小技巧——此时的padding 是不影响盒子的大小的

盒子模型布局稳定性：

圆角边框（CSS3）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div{
 8             width: 500px;
 9             height: 500px;
10             border:1px solid red;
11             border-radius: 25% 0;  /*第一个是主对角线 */
12         }
13     </style>
14 
15 
16 </head>
17 <body>
18     <div></div>
19 </body>
20 </html>
View Code
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         body{
 8             background-color: #ccc;
 9         }
10         .nav{
11             margin-top: 100px;
12             text-align: center;
13         }
14         .nav span{
15             width: 100px;
16             height: 100px;
17             border:1px solid red;
18             border-radius: 50%;
19             display: inline-block;
20             margin: 0 50px;
21         }
22         .nav span:hover{
23             background-color: cyan;
24         }
25     </style>
26 </head>
27 <body>
28     <div class="nav">
29         <span></span>
30         <span></span>
31         <span></span>
32         <span></span>
33     </div>
34 </body>
35 </html>
小案例

注：小案例中可以用  a  来代替  span  ，这样就可以点击了 。。里面也可以放文字，文字居中用 行高等于盒子的高度。

去掉 样式用text-decoration :none; 来取消。

盒子阴影：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div{
 8             width: 300px;
 9             height: 300px;
10             text-align: center;
11             line-height: 300px;
12         }
13         div:hover{
14             box-shadow: 0 15px 30px rgba(0,0,0,.1); /*固定格式，以后直接用它就行*/
15         }
16     </style>
17 </head>
18 <body>
19     <div >祝福祖国 繁荣富强</div>
20 </body>
21 </html>
阴影范例
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div{
 8             width: 300px;
 9             height: 300px;
10             text-align: center;
11             line-height: 300px;
12             transition: all 1s;  /*这个是出来的更缓慢*/
13         }
14         div:hover{
15             box-shadow: 0 15px 30px rgba(0,0,0,.1); /*固定格式，以后直接用它就行*/
16         }
17     </style>
18 </head>
19 <body>
20     <div >祝福祖国 繁荣富强</div>
21 </body>
22 </html>
使用transition 特效

浮动（float）:

普通流（normal flow）：

浮动（float）：

当然，你可能觉得可以用 inline-block来做，但是它有很多缺点

例如：缝隙不能解决，例如：放在页面左边时不知右面距离设为多少。

如果有人问你为什么用浮动？

你就可以直接说浮动可以使多个div 盒子在一行显示，方便布局。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div{
 8             float: left; /*这一行 即可以让两个div 在同一行*/
 9         }
10         .up{
11             width: 300px;
12             height: 300px;
13             background-color: cyan;
14         }
15         .down{
16             width: 400px;
17             height: 400px;
18             background-color: orange;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="up"></div>
24     <div class="down"></div>
25 </body>
26 </html>
View Code
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div{
 8             float: left;
 9         }
10         .up{
11             width: 300px;
12             height: 300px;
13             background-color: cyan;
14         }
15         .down{
16             width: 400px;
17             height: 400px;
18             background-color: orange;
19             float: right;/*使其靠右*/
20         }
21     </style>
22 </head>
23 <body>
24     <div class="up"></div>
25     <div class="down"></div>
26 </body>
27 </html>
View Code

注：浮动只有left 和 right 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .nav div{
 8             width: 200px;
 9             height: 200px;
10             float: left;
11             text-align: center;
12             line-height: 200px;
13         }
14         .r{
15             background-color: red;
16         }
17         .g{
18             background-color: green;
19         }
20         .b{
21             background-color: blue;
22         }
23         .p{
24             background-color: purple;
25             float: right !important;
26         }
27     </style>
28 </head>
29 <body>
30     <div class="nav">
31         <div class="r">我爱中国</div>
32         <div class="g">我爱中国</div>
33         <div class="b">我爱中国</div>
34         <div class="p">我爱中国</div>
35     </div>
36 
37 </body>
38 </html>
综合小案例
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .up, .on{
 8             width: 400px;
 9             height: 130px;
10         }
11         .up div{
12             width: 200px;
13             height: 130px;
14             text-align: center;
15             line-height: 130px;
16             float: left;
17         }
18         .up .left{
19             background-color: cyan;
20         }
21         .up .right{
22             background-color: darkgray;
23         }
24         .on{
25             background-color: gray;
26             text-align: center;
27             line-height: 130px;
28         }
29     </style>
30 </head>
31 <body>
32     <div class="up">  
33         <div class="left">我是左边</div>
34         <div class="right">我是右边</div>
35     </div>
36     <div class="on">登陆</div>
37 
38 </body>
39 </html>
为了不让浮动影响，可以给浮动的元素整体加个盒子

浮动详细特性：

#####################

#####################

版心和布局流程：

看最常用的：

一列固定宽度且居中，

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7 
 8         .top{
 9             width: 800px;
10             height: 100px;
11             background-color: #eee;
12             margin:0 auto; /*让盒子居中对齐*/
13             border: 1px dashed #ddd;
14         }
15         .banner{
16             width: 800px;
17             height: 120px;
18             background-color: #eee;
19             /*margin:0 auto; !*让盒子居中对齐*!*/
20             border: 1px dashed #ddd;
21             margin: 5px auto;
22         }
23         .main{
24             width: 800px;
25             height: 500px;
26             background-color: #eee;
27             /*margin:0 auto; !*让盒子居中对齐*!*/
28             border: 1px dashed #ddd;
29             margin: 0 auto 5px;
30         }
31         .footer{
32             width: 800px;
33             height: 130px;
34             background-color: #eee;
35             margin:0 auto; /*让盒子居中对齐*/
36             border: 1px dashed #ddd;
37         }
38     </style>
39 </head>
40 <body>
41     <div class="top">top</div>
42     <div class="banner">banner</div>
43     <div class="main">main</div>
44     <div class="footer">footer</div>
45 </body>
46 </html>
View Code
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .top,
 8         .banner,
 9         .main,
10         .footer{
11             width: 800px;
12             background-color: #eee;
13             margin:0 auto; /*让盒子居中对齐*/
14             border: 1px dashed #ddd;
15         }
16         .top{
17             height: 100px;
18         }
19         .banner{
20             height: 120px;
21             margin: 5px auto;
22         }
23         .main{
24             height: 500px;
25             margin: 0 auto 5px;
26         }
27         .footer{
28             height: 130px;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="top">top</div>
34     <div class="banner">banner</div>
35     <div class="main">main</div>
36     <div class="footer">footer</div>
37 </body>
38 </html>
提取公共部分，简化后的代码

注：banner 是广告位置 ，

左右型布局：

通栏写法布局：

文件夹结构：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zach0812/p/11617766.html