CSS几个要点补充

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS几个要点补充相关的知识,希望对你有一定的参考价值。

 

 

1.如何像淘宝页面一样,随着浏览器的减小而保持内容区大小不变,减少的只是两边的空白区大小呢?

通过内层div设置margin为0 auto就可以了!

技术分享图片
 1         <style type="text/css">
 2             *{
 3                 margin:0;
 4                 padding:0;
 5             }
 6             .wrapper{
 7                 height:30px;
 8                 background-color: #123;
 9             }
10             .content{
11                 width: 1200px;
12                 height: 30px;
13                 background-color: #0f0;
14                 margin: 0 auto;/*这里的auto就是自适应的意思,它会随着浏览器框的缩小而减小*/
15             }
16         </style>
17     </head>
18     <body>
19          <div class="wrapper">
20              <div class="content"></div>
21          </div>
22     </body>
View Code

 

2.html中的元素有三种:inline、inline-block、block

  通常我们称凡是带了inline、inline-block的元素为文本类元素,也就是凡是带有inline的元素【inline、inline-block】都有文本类特点,所以我们称之为文本类元素!

3.span本来是行级元素,所以我们设置宽和高不好使,如下所示:

技术分享图片
 1     <head>
 2         <meta charset="UTF-8">
 3         <title>Insert title here</title>
 4         <style type="text/css">
 5             span{
 6                 width:100px;
 7                 height: 100px;
 8                 background-color: red;
 9             }
10         </style>
11     </head>
12     <body>
13          <span>123</span>
14     </body>
View Code

效果如下所示:

技术分享图片

如果我们给这个css代码加了:position:absolute或者 float:left/right,那么就会惊奇的看到对span标签设置的宽和高都好使了,如下所示:

技术分享图片
 1     <head>
 2         <meta charset="UTF-8">
 3         <title>Insert title here</title>
 4         <style type="text/css">
 5             span{
 6                 width:100px;
 7                 height: 100px;
 8                 background-color: red;
 9                 position: absolute;
10             }
11         </style>
12     </head>
13     <body>
14          <span>123</span>
15     </body>
View Code

技术分享图片

这是为什么呢?

这是因为一旦我们设置了position:absolute或者 float:left/right,那么系统本身就会在底层自动将该HTML标签的inline转换为inline-block;所以你会看到,一旦我们设置了position:absolute或者 float:left/right,就可以给该标签设置宽和高了!

技术分享图片
 1     <head>
 2         <meta charset="UTF-8">
 3         <title>Insert title here</title>
 4         <style type="text/css">
 5             *{
 6                 margin:0;
 7                 padding:0;    
 8             }
 9             span{
10                 font-size: 50px;
11             }
12         </style>
13     </head>
14     <body>
15          <div>
16              你们刘哥很帅<span>哈哈</span>
17          </div>
18     </body>
View Code

技术分享图片

你会看到,在一行文本里面,实际上文本是底对齐的!这是文本和文本之间的特点

如果我现在把文本和图片放在一起呢?

1     <head>
2         <meta charset="UTF-8">
3         <title>Insert title here</title>
4     </head>
5     <body>
6          <img  src="1.png">呵呵
7     </body>

技术分享图片

效果也是图片和文字是底对齐的!

同理,如果我将一个行级元素变成一个行级块元素,那么行级块元素和文字也是底对齐的!

技术分享图片
 1     <head>
 2         <meta charset="UTF-8">
 3         <title>Insert title here</title>
 4         <style type="text/css">
 5             span{
 6                 display:inline-block;
 7                 width:100px;
 8                 height:100px;
 9                 background-color: red;
10             }
11         </style>
12     </head>
13     <body>
14          <span></span>哈哈
15     </body>
View Code

技术分享图片

上面也是底对齐的,这也没什么问题!但是如果我现在往span标签里面加点内容,如下:

技术分享图片
 1     <head>
 2         <meta charset="UTF-8">
 3         <title>Insert title here</title>
 4         <style type="text/css">
 5             span{
 6                 display:inline-block;
 7                 width:100px;
 8                 height:100px;
 9                 background-color: red;
10             }
11         </style>
12     </head>
13     <body>
14          <span>This</span>哈哈
15     </body>
View Code

技术分享图片

你会看到,这里文字将不是底对齐了,它是和它里面的文字底对齐了!

这就是浏览器的另外一个特点:一旦一个行级块元素或者一个文本类元素里面包含文字了,那么外面的文字就会和它们里面的文字底对齐

如果里面的文字很大的话,依然是和它里面的文字底对齐:

技术分享图片
 1     <head>
 2         <meta charset="UTF-8">
 3         <title>Insert title here</title>
 4         <style type="text/css">
 5             span{
 6                 display:inline-block;
 7                 width:100px;
 8                 height:100px;
 9                 background-color: red;
10                 font-size: 50px;
11             }
12         </style>
13     </head>
14     <body>
15          <span>This</span>哈哈
16     </body>
View Code

技术分享图片

那这里能不能调整一下对齐线呢,难道非要是底对齐么,当然可以调节,这里有个属性叫:vertical-align,该属性值可以为正数像素【3px】,也可以为负数【-5px】,当然也可以是middle、如下所示:

技术分享图片
 1     <head>
 2         <meta charset="UTF-8">
 3         <title>Insert title here</title>
 4         <style type="text/css">
 5             span{
 6                 display:inline-block;
 7                 width:100px;
 8                 height:100px;
 9                 background-color: red;
10                 font-size: 50px;
11                 vertical-align: -15px;
12             }
13         </style>
14     </head>
15     <body>
16          <span>This</span>哈哈
17     </body>
View Code

技术分享图片

 

4.如何实现像淘宝这样的导航栏,一行文字中的内容一部分靠左,一部分靠右,实际上也很简单,最外层是一个大盒子,里面有两个小盒子,然后一个向左浮动,一个向右浮动就OK了,基本上都是这么实现的,如下所示:

技术分享图片
1     <body>
2          <div>
3              <ul style="float: left"></ul>
4              <ul style="float: right"></ul>
5          </div>
6     </body>
View Code

 

以上是关于CSS几个要点补充的主要内容,如果未能解决你的问题,请参考以下文章

VSCode 配置 用户自定义代码片段 自定义自动代码补充

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器