CSS布局，居中，伪元素

最新推荐文章于 2024-04-30 15:13:36 发布

geyh

最新推荐文章于 2024-04-30 15:13:36 发布

阅读量632

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_39298448/article/details/114584000

版权

一、布局

单列布局

实现方式——定宽 + 水平居中。

双列布局

一列固定宽度，另外一列自适应宽度。
实现方式——浮动元素 + 普通元素 margin。

三列布局

两侧两列固定宽度，中间列自适应宽度。

<div id="content">

  <!-- 注意为什么不是 main 在前面！ -->

  <div class="menu">aside</div>
  <div class="aside">aside</div>
  <div class="main">content</div>
</div>
<div id="footer">footer</div>

#content:after {
  content: "";
  display: block;
  clear: both;
}
.menu {
  float: left;
  width: 100px;
  height: 500px;
  background: pink;
}
.aside {
  float: right;
  width: 200px;
  height: 500px;
  background: yellow;
}
.main {
  height: 400px;
  margin-left: 110px; 
  margin-right: 210px;
  background: red;
}

#footer {
  background: #ccc;
}

水平等距排列

二、居中

水平居中

//  1.1在父元素上设置 text-align: center;  使文字/图片水平居中
.container {
  text-align: center;
}
// 1.2 margin
.container {
  width: 80%;
  margin: 0 auto;
}

垂直居中

2.1 基础居中

// 居中方式又很多，只列举了一种
<div class="ct">
  <p>Hello</p>
  <p>Hello</p>
</div>

.ct {
  padding: 40px 0;
  /*
  直接上下 padding 相等。整个容器的高度由内容高度撑开，
  我们大部分页面都是这样的。
   */

  text-align: center;
  background: #eee;
}

2.2 绝对定位实现“弹窗”居中

<body>
  <div class="dialog">
    <div class="header">我是标题</div>
    <div class="content">我是内容</div>
  </div>
</body>

html,body {
  height: 100%;
}

/* 注释1️⃣ */
.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 由于用户的屏幕有大有小，而我都要让这个弹出框居中，怎样办？ */
  /*
  top: 50% 表示这个“左上角”在它的顶部（从上到下）是居于 50%，即这个“左上
  角”在页面上居中。
  left: 50% 表示 left 的值是它宽度的一半，所以它的这个“左上角”在
  水平位置上是居中的；
   */


  /* 注释2️⃣ */
  margin-left: -200px;
  margin-top: -150px;
  /*
  但我们并不是需要这个“左上角”居中，而是想让“中心”居中，因此我们用了“负 margin”:
  margin-left: -200px; 表示让“左上角”再移动盒子“宽度”的一半；
  margin-top: -150px;  表示让“左上角”再移动盒子“高度”的一半。
  请看下边“注释1️⃣”的图！
   */


  /*
  ❓但以上的移动都是基于盒子“宽高”在一定的前提下，
  那如果“宽高”没有固定，那怎么实现居中呢？
   */
  /*
  答：
  transform: translate(-50%, -50%);

  这个属性就是相对于自身“宽高”来做偏移，那这个时候，
  我不管里边的内容是多少，它整个都是居中的。它对“宽高”就没有限制了。
  这种方式是最好的，在 IE9 以上都可以用的。
   */


  width: 400px;
  height: 300px;
  box-shadow: 0px 0px 3px #000;
}

.dialog .header {
  padding: 10px;
  background: #000;
  color: #fff;
}
.dialog .content {
  padding: 10px;
}

2.3 伪元素实现居中

<body>
  <div class="box">
    <img src="https://qdywxs.github.io/css-images/css13-img01.jpg" alt="">
  </div>
</body>

.box {
  width: 300px;
  height: 200px;
  border: 1px solid ;
  text-align: center;
  /* 这个属性可以实现“水平”居中。 */

}

.box::before {
  /* 用伪元素选择器来实现“垂直”居中。 */

  content: "";
  display: inline-block;
  height: 100%;
  /* 使这个伪元素的高度等于盒子的高度，撑满父容器。 */

  vertical-align: middle;
}

.box img {
  vertical-align: middle;
  width: 150px;
}

2.4 table-cell 实现居中

<body>
  <div class="box">
    <img src="https://qdywxs.github.io/css-images/css13-img01.jpg" alt="">
  </div>
</body>

.box {
  display: table-cell;
  width: 300px;
  height: 200px;
  text-align: center;

  vertical-align: middle;
  /*
  vertical-align: middle 在表格元素中实现居中效果很明显。
  但这里 display: table-cell; 后，就不是一个块级元素了，
  如果不加宽度，那么宽度就会自动收缩！
   */

  border: 1px solid ;
}

.box img {
  width: 150px;
}

2.5 display: flex; 实现居中

.content {
  display: flex; 
   /* 弹性布局。 */

  width: 100vw;
  height: 100vh;  
  /* 设置宽高以显示居中效果。 */

  align-items: center; 
  /* 告诉里边的盒子垂直方向上应该：垂直居中。 */

  justify-content: center;  
  /* 告诉里边的盒子水平方向上应该：水平居中。 */
}

三、伪元素

h6::first-letter {
  font-size: 20px;
}    
/*
🚀如果我们不用伪元素，我们就会在 HTML 中用更多的代码表示--如加 span，
然后再在 CSS 中对 span 加样式。
 */ 


h6::after {
  content: "@2020";
}
/* 🚀可以很直接地在 h6 后边添加内容。*/
/*
🚀但一定要注意，这个 content 里边可以是空字符串，
但 content 必须要写，不然这个伪元素就没有效了。
 */


p::selection {
  color: red;
}

input::-webkit-input-placeholder {
  color: blue;
}
/*
🚀对于 placeholder，不同浏览器写法可能是不一样的，
这里对于 Chrome 浏览器，我们前边要加上 -webkit- 和 input-。
 */

伪元素的用法

清除浮动，替代标签，小三角

geyh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局，居中，伪元素

一、布局单列布局实现方式——定宽 + 水平居中。双列布局一列固定宽度，另外一列自适应宽度。实现方式——浮动元素 + 普通元素 margin。三列布局两侧两列固定宽度，中间列自适应宽度。<div id="content">  <div class="menu">aside</div> <div class="aside">aside</div> &l
复制链接

扫一扫