css拓展

下面介绍的是学习css的时候学的一些小的知识 但是我感觉这些知识可能会很有用处的，今天就分享给大家

1. 缩小浏览器的时候 先是缩小留白 然后在缩小浏览器中的内容

大家平时浏览淘宝的时候可以发现当我们缩小浏览器边框的时候可以发现首先缩小的不是内容而是两边的旁白，这样的效果被大多数网站采用。

  *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            height: 50px;
            background-color:  gray;
        }
        .content{
            margin: 0 auto;
            width: 1200px;
            height: 50px;
            background-color: green;
        }
		<div class="wrapper">
		       <div class="content"></div>
		   </div>

2. 我们在元素嵌套时，有这样的规则：

1.行级元素只能嵌套行级元素
2.块级元素可以嵌套任何元素

但有个别特殊的：

1.p标签里不能套块级元素

<p>
	<div></div>
</p>
//是不行的：p标签里不能套块级元素。

2.a标签里不能套a标签

<a href="">
	<a href=""></a>
</a>
//是不行的：a标签里不能套a标签。

2.图片间隔问题

讲解之前，先要明确几个知识点：

1.往div里面放置背景图片：background-image:url(‘’)括号里面为图片的地址。 图片的大小：background-size 默认为重复出现，使其不重复出现：background-repeat：no-reprat
设置图片位置：background-position：100px 100px 或者top center 上居中 left center
左居中 center center 居正中心
50% 50% 也是居于正中心，这与内容中不一样，内容为左顶点居于最中心。

1）当使用，因他是行级元素，所以是不可以改变宽高的，但是当加上posotion：sbsolute和float：left/right时，会在内部将其display属性改变为display：inline-block。

2）当放入图片时，因为图片带有inline-block属性，所以带有文本类特点：能被文字分隔符分割。所以当你这样写时，等于给他加了很多个空格，所以在每张图片之间就都会有一部分间隔，这时只要挨着写就会解决这个问题。

这样写每张图片之间有很多空格：

  <img src="./下载.png" alt="">
    <img src="./下载.png" alt="">
    <img src="./下载.png" alt="">
    <img src="./下载.png" alt="">

默认中间会有间隙 如果不想要中间的间隙

 <img src="./下载.png" alt=""><img src="./下载.png" alt=""><img src="./下载.png" alt=""><img src="./下载.png" alt="">

2 在一行里，文本和文本是底对齐的；图片（文本类元素）和文本也是底对齐的。
但是当一个行级元素或者块级元素里面包含文本类元素了，外面的文字就会和里面的文字底对齐。

2.display分三种： inline block inline-block 行级元素 块级元素 行级块元素
inline、inline-block–>文本类元素
行级元素不能增加宽高 如果增加了postiton:absolute float:left/right 这些元素的话 浏览器会识别成 display:inline-block

 span {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
  <span></span> 文字

当我们想让文字有其他的对齐方式时，可以用对齐线来调整：
调对齐线：vertical-align:10px/middle

        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            font-size: 22px;
        }
        span{
            vertical-align: -50px;
        }
    </style>

    <div>
        div中的文字  
    </div>
    <span>span文字</span>