CSS基础_02：

时间：2019-10-04 15:26:15 阅读：87 评论：0 收藏：0 [点我收藏+]

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; 来取消。

盒子阴影：

技术分享图片

CSS基础_02：

原文：https://www.cnblogs.com/zach0812/p/11617766.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)