CSS技巧

最新推荐文章于 2024-08-25 22:44:31 发布

执迷原理

最新推荐文章于 2024-08-25 22:44:31 发布

阅读量37

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/ddd2501/article/details/127678083

版权

水平居中
1. 文本的水平居中
  1. 当行文本水平居中，利用text-align属性（属性值设置为center）可以实现（块元素或表格单元框内的行内元素内容的水平对齐方式）
2. 元素的水平居中
  1. 块元素：利用margin-left：auto和margin-right-right就可以实现块元素的水平居中，前提是这个块元素要有宽度，不然它会延伸自己的宽，撑满整个父元素，那么这个水平居中的效果自然就失效了
  2. ```
  <style>
  #son{
      width: 50px;
      height: 50px;
      margin: 0 auto; // 这里利用了简写的形式，实际上就是将上下外边距设置为0px，将左右外边距设置成了auto
      background-color: green;
  }
  </style>
  <body> // body，也就是浏览器充当了  父元素
      <div id="son"></div>
  </body>
```
3. 行内元素以及复合行内元素（inline-*）:这里还是利用了text-align属性，这个属性非常重要和灵活，要理解它的定义（块元素和表格单元框内的行内元素内容的水平对齐方式），也就是可以在父元素上面设置属性text-align:center,之后再子元素上面设置display:inline-block,就可以实现子元素对于父元素的水平居中了
4. ```
<style>
    #father{
      text-align: center; // 将父元素设置属性让子元素水平居中
    }

    #son{
      display: inline-block; //将子元素设置为 行内块元素
      width: 50px;
      height: 50px;
      background-color: green;
    }
</style>
<body>
  <div id="father">
    <div id="son"></div>
  </div>
</body>
```
  5. 解释复合行内元素（inline-*）:就是inline-block、inline-table以及inline-flex之类的元素

垂直居中

文本的垂直居中

单行文本：对于单行文本，我们直接利用height以及line-height这两个属性的值相等，就可以实现垂直居中了（后面仔细分析line-height这个属性）

<style>
div{
    width:100px;
    height:100px;
    border:1px solid black;
    line-height:100px; // 设置值与height一样就可以了
}
</style>
<body>
<div>您好呀！欢迎阅读Web前端给您带来的内容</div>
</body>

多行文本：在父元素里面设置vertical-align:middle、display:table-cell（这个设置就是为了迎合vertical-align属性的），之后用一个span元素作为子元素包裹文本，将span元素定义为inline-block类型就可以完成当行文本的垂直居中了（特别注意vertical-align属性和表格单元框的关系）

<style>
    #father{
      display: table-cell;
      vertical-align: middle; // 1.定义围绕再该元素的周围的行内块元素、行内元素、文本的垂直方式
                              // 2.定义表格单元框内的行内元素、文本的垂直方式
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }

    #father span{
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: red;
    }
</style>
<body>
  <div id="father">
    <span>
      你好<br>
      hello<br>
      主人<br>
    </span>
  </div>
</body>

元素的垂直居中

块元素:利用万能的position（之所以万能，因为position方法可以实现任何元素的水平垂直居中）来实现，水平且垂直居中。首先给父元素一个position:relative，子元素一个position:absolute（absolute会使任何元素都变为块元素、脱离文档流），这样是防止子元素在定位的时候跑到父元素外面去

<style>  // 必备以下6个元素
    #father{
      position: relative; // (6)
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }
    #father span{
      position: absolute; // (5)
      width: 100px;
      height: 100px;
      background-color: red;
      top: 50%; // 相对于包含块的高度 (1)
      left: 50%; // 相对于包含块的宽度 (2)
      margin-top: -50px; // 该值要设置成 包含块的height的一半的相反数 (3)  这涉及到负margin技术
      margin-left: -50px; // 该值要设置成 包含块的width的一半的相反数 (4)
    }
  </style>
</head>
<body>
  <div id="father">
    <span>你好</span>
  </div>
</body>

行内块元素：利用display:table-cell、vertical-align结合的方式完成垂直居中

<style>
    #father{
      display: table-cell;
      vertical-align: middle;
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }

    #father img{
      width: 100px;
      height: 100px;
    }
  </style>
<body>
  <div id="father">
    <img src="./img/电脑桌面.jpg" alt="">
  </div>
</body>

CSS Sprite（精灵图，也叫雪碧图）
1. 就是将小图标整合到一张图片里面，之后通过背景定位（background-position）来设置你所需要的背景，这是避免工作中遇到多图使用的情况，我们进行优化性能的一种方式，因为多张图片浏览器需要发送多个http连接，降低性能，但是如果融合到一张图，就只用发送一次http请求，提高了性能
2. 不过精灵图在开发和维护的时候比较困难，所以使用精灵图要注意以下几点：
  1. 在开发后期而不是开发前期使用，因开发前期使用，小背景图位置可能会发生变化
  2. 有条理的组织号“精灵图”
  3. 控制好“精灵图”的大小，控制在200KB
iconfont图标(改进精灵图，在实际开发中，遵循“少用图片原则”)
1. iconfont网站：http://www.iconfont.cn
2. iconfont技术(在网站下载时，注意以下四种格式)

.eot	微软开发的用于嵌入网页的字体，IE专用字体格式
.woff	W3C组织推荐的标准，Web字体最佳格式
.ttf	Mac OS和Windows操作系统中最常见的字体格式
.svg	W3C组织制定的开放标准的图形格式