CSS 回顾

NicolasCage
25 阅读5分钟

1. 页面左右居中

步骤：

  1. 给元素设置固定宽度
  2. 设置左右外边距为 auto

2. 行内元素和行内块元素的特点

行内元素：

  1. <span>：最常用的纯文本包装器
  2. <a>：超链接
  3. <strong> / <b>：加粗文本
  4. <em> / <i>：斜体文本
  5. <label>：表单标签
  6. <abbr>：缩写
  7. <code>：行内代码

行内元素的特点是：

  • 不换行，多个行内元素会排列在一行中
  • 不可设置 width / height，宽高由内容撑开，设置无效
  • margin、padding 垂直方向无效。

行内块元素：

  1. <img>：图像标签，是天然的 inline-block
  2. <input>：表单输入框
  3. <button>：按钮
  4. <select>：下拉框
  5. <textarea>：文本区域
  6. <iframe>：内联框架

行内块元素的特点是：

  • 不换行，像行内元素一样排列在一行中
  • 可设置 width / height，宽高有效
  • margin 和 padding 全部方向有效

3.绝对定位absolute

默认情况下，absolute 元素将 相对于 <html> 标签（通常是浏览器视口）定位：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <div>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
  </div>

  <button>
    ❤️Like
  </button>
</body>

</html>

div {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  background-color: orange;
}

button {
  font-size: 22px;
  padding: 20px;
  cursor: pointer;

  position: absolute;
  top: 0;
  left: 0;
}

如何让它相对于某个“盒子”定位？

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <div>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>
    <h1>This is a box.</h1>

    <button>
      ❤️Like
    </button>
  </div>
</body>

</html>

div {
  position: relative;   /*父盒子要设置relative*/
  width: 800px;
  height: 600px;
  margin: 0 auto;
  background-color: orange;
}

button {
  font-size: 22px;
  padding: 20px;
  cursor: pointer;

  position: absolute;
  top: 0;
  left: 0;
}

4.伪元素选择器

  1. ::first-letter —— 选中“首字母”

选中块级元素中 第一个文字字符（不包括空格或标点），对它单独设置样式。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <h1>Welcome to My Website</h1>
</body>

</html>

h1::first-letter {
  font-size: 200%;
  color: red;
}

image.png

  1. ::first-line —— 选中“首行文字”

选中块级元素中的第一行文本内容，这取决于当前字体和窗口宽度（浏览器渲染时计算的）。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <p>CSS is a powerful language for describing the look and formatting of a document written in HTML.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. In fugit ipsam quo, molestias est dolorem expedita quis. Sapiente repellendus iste fugit, iure nisi reiciendis tempore eligendi officia itaque tenetur quasi!
  </p>
</body>

</html>

p::first-line {
  font-weight: bold;
  color: green;
}

image.png

  1. 伪元素::before 和 ::after

伪元素（pseudo-elements） —— 它们用来在元素的前面或后面插入内容，这些内容并不真的存在于 HTML 中，而是由 CSS 动态生成的。它们是前端开发中制作图标、修饰符、UI 小效果的常见工具

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <div>
     <h1>The Basic Language of the Web: HTML</h1>
  </div>
</body>

</html>

div {
  width: 800px;
  margin: 0 auto;
}

h1 {
  font-size: 40px;
  color: #1098ad;
  position: relative;
}

/* 注意，为元素都是display:inline，所以需要改成inline-block */
h1::after {
  content: "TOP";
  background-color: #ffe70e;
  color: #444;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 3px 15px;
  position: absolute;
  top: -10px;
  right: -25px;
}

image.png

5.float布局

float 布局 是早期 CSS 中常用的一种布局方式，虽然现在更多使用 flex 和 grid，但学会 float 布局对理解 CSS 排版非常有帮助，尤其是在老项目或笔试题中仍然会出现。

1.给元素设置float布局，这个元素会脱离正常的文档流：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <div class="div-one"></div>
  <div class="div-two"></div>
</body>

</html>

.div-one {
  height: 200px;
  width: 200px;
  background-color: red;
  float: left;            /* 脱离正常的文档流，所以位置被div-two占据 */
}

.div-two {
  height: 300px;
  width: 300px;
  background-color: green;
}

image.png

浮动元素脱离文档流，会导致后续的非浮动元素无法正常排布，可能会发生覆盖或换行。

2. 问题来了，怎么样非浮动元素受浮动元素的影响？

正确做法：清除浮动要加在非浮动元素自己身上！
🎯 也就是说，谁不想被浮动影响，就给谁加 clear: both;（或者相应的left，right）

3. 浮动的元素始终处在父盒子里面，不会脱离父盒子：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <main>
    <div class="div-one"></div>
    <div class="div-two"></div>
  </main>
</body>

</html>

main {
  width: 600px;
  margin: 0 auto;             /* 父盒子里面的盒子也跟着移动 */
  border: 3px solid orange;
}

.div-one {
  height: 200px;
  width: 200px;
  background-color: red;
  float: left;            /* 脱离正常的文档流，所以位置被div-two占据 */
}

.div-two {
  height: 300px;
  width: 300px;
  background-color: green;
  float: right;
}

image.png

虽然父盒子感觉不到在它里面的浮动的子盒子，但是子盒子始终处于父盒子里面，不会脱离父盒子。

4. 怎么样才能让父盒子感觉到自己浮动的子盒子？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <main class="clearfix">
    <div class="div-one"></div>
    <div class="div-two"></div>
  </main>
</body>

</html>

main {
  width: 600px;
  margin: 0 auto;         
  border: 3px solid orange;
}

.div-one {
  height: 200px;
  width: 200px;
  background-color: red;
  float: left;            /* 脱离正常的文档流，所以位置被div-two占据 */
}

.div-two {
  height: 300px;
  width: 300px;
  background-color: green;
  float: right;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

image.png

原理:

.clearfix::after这个伪元素相当于给父元素撑开了高度，因为它在浮动元素后面，又被“清除浮动”，所以会被正确放在所有浮动元素下方，从而让父元素感知子元素的高度。

一个简单的float布局：

6.box-sizing: border-box;

box-sizing: border-box;到底做了什么？

image.png

box-sizing的默认值是content-box。

7.flex布局

image.png

8.Grid布局

image.png

avatar
文章
阅读
粉丝