Html

咸鱼翻身了么
0 阅读8分钟

一、标签类型

元素类型常用标签
块元素<div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<header>、<footer>、<nav>、<section>、<article>、<form>、<table>、<hr>
行内元素<span>、<a>、<strong>、<b>、<em>、<i>、<label>、<code>、<br>
行内块元素<img>、<input>、<button>、<textarea>、<select>、<iframe>、<video>

注意点： 能设宽高、能设内外边距、不换行

二、盒模型

盒模型width 包含实际宽度公式
标准模型 (content-box)仅内容width + padding + border
IE模型/怪异盒 (border-box)内容 + padding + borderwidth

释义：box-sizing：content-box / border-box

三、弹性盒

1、父容器属性（加在弹性盒子上的）

属性作用常用值
display: flex开启弹性盒子就这一个写法
flex-direction主轴方向（排横还是排竖）row（横排→）、column（竖排↓）
justify-content主轴上的对齐方式center（居中）、space-between（两端对齐）、space-around（均匀分布）
align-items一排对齐方式center（居中）、stretch（拉伸填满）、flex-start（顶部）
align-content多排对齐方式center（居中）、flex-end、flex-start（顶部）
flex-wrap是否换行nowrap（不换）、wrap（换行）
gap子元素之间的间距10px、20px 等

说明：（一排用 align-items，多排用 align-content）

image.png

2、子元素属性（加在里面的项目上的）

属性作用常用值
flex: 1平分剩余空间1、2、3（数字越大占越多）
flex: none固定宽度，不伸缩就这一个写法
align-self修改子元素对齐方式(父容器设置了 align-items)center、flex-end 等

四、BFC

1、 说明：CSS 中一块独立的布局环境

2、 特性

✅ 内部的盒子会垂直排列 (块级元素独占一行)
✅ 同一个 BFC 内，相邻块级元素的上下外边距会折叠 (margin collapse)
✅ BFC 区域不会与浮动元素重叠 (可用于自适应两栏布局)
✅ 计算 BFC 高度时，浮动元素也会参与计算 (清除浮动)
✅ BFC 是一个隔离的独立容器，内外互不影响。

image.png

3、 触发BFC方式

🔹 overflow: auto / hidden / scroll

🔹 display: flow-root (最纯净,但IE全版本不兼容)

🔹 position: absolute / fixed

🔹 float: left / right (非none)

🔹 display: inline-block / flex / grid / table-cell

💡 推荐使用 overflow: auto 或 display: flow-root 创建无副作用的BFC。

五、定位

1、 static(静态定位）

  • 所有元素默认都是这个

  • 不能用 top / left / right / bottom

  • 正常文档流，按顺序排列

2、 relative（相对定位）

  • 相对自己原来的位置偏移

  • 不脱离文档流（占位置）

  • 配合 top/left 使用

 div {
       position: relative;
       top: 10px; 往下走10px 
       left: 20px; 往右走20px 
    }

用途：给子元素 absolute 做 “爹”

3、 absolute（绝对定位）

  • 完全脱离文档流（不占位置）

  • 找最近的 “非 static 父级” 作为参考

  • 没有父级定位 → 相对于整个文档

.parent { position: relative;} /* 父级必须加 */ 
.child { 
    position: absolute; 
    top: 0; 
    left: 0; 
  }

用途：弹窗、下拉菜单、角标

4、 fixed

  • 相对于浏览器窗口定位

  • 滚动页面也不动

  • 完全脱离文档流

用途：返回顶部、侧边悬浮栏、导航固定

5、 sticky（粘性定位）

  • 滚动时：相对 → 固定

  • 必须配合 top/left 才能生效

用途：吸顶导航

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>sticky 吸顶导航</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      height: 2000px; /* 让页面可以滚动 */
      padding-top: 20px;
    }
    /* 吸顶导航核心 */
    .nav {
      width: 100%;
      height: 60px;
      background: #1677ff;
      color: white;
      line-height: 60px;
      text-align: center;
      font-size: 20px;

      /* 关键代码 */
      position: sticky;
      top: 20px; /* 距离顶部 0 时吸顶 */
    }
    .content {
      padding: 20px;
      font-size: 18px;
      line-height: 2;
    }
  </style>
</head>
<body>
  <div class="content">
    <p>页面上方内容1</p>
  </div>
  <!-- 吸顶导航 -->
  <div class="nav">我是吸顶导航</div>
  <div class="content">
    <p>页面下方内容1</p>
  </div>
</body>
</html>

六、水平+垂直居中

1、 Flex → justify-content + align-items

```js
display: flex; 
justify-content: center; /* 水平居中 */ 
align-items: center; /* 垂直居中 */
```

2、 Grid → place-items: center

 ```js
display: grid; 
place-items: center; /* 水平 + 垂直 一起居中 */
```

3、 定位 + translate(-50%,-50%)

```js
position: relative; /*父
//子
position: absolute; 
top: 50%;
left: 50%; 
transform: translate(-50%, -50%);
```

4、定位 + margin: auto

```js
    position: relative; /*父
    // 子
    position: absolute; 
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto;
```

总结：

  • Flex：简单，但会改变父级布局

  • Grid：极简，但兼容性一般

  • 定位 + transform：宽高未知可用，但脱离文档流

  • 定位 + margin:auto：稳定，但必须固定宽高，脱离文档流

七、transform 常用属性

1. translate 位移（最常用）

transform: translateX(100px); /* 水平右移 */ 
transform: translateY(50px); /* 垂直下移 */ 
transform: translate(100px, 50px); /* 同时 x、y 位移 */
transform: translate(-50%, -50%); /* 相对于自身居中 */

% 是相对于自己，不是父元素

2、 scale 缩放

transform: scale(2); /* 宽高都放大2倍 */ 
transform: scale(0.5); /* 缩小一半 */ 
transform: scaleX(1.5); /* 只水平放大 */ 
transform: scaleY(0.8); /* 只垂直缩小 */

3、 rotate 旋转

transform: rotate(45deg); /* 顺时针旋转45度 */ 
transform: rotate(-30deg); /* 逆时针30度 */
transform: rotate(180deg); /* 翻转 */

4、 skew 倾斜（很少用，但要知道）

transform: skewX(20deg); /* 水平倾斜 */
transform: skewY(10deg); /* 垂直倾斜 */
transform: skew(20deg, 5deg);

总结：多个属性一起写

transform: translate(100px, 50px) scale(1.2) rotate(15deg);

八、Css伪类

1、链接 & 鼠标相关（最常用）

  • a:link 未访问的链接

  • a:visited 已访问的链接

  • :hover 鼠标放上去

  • :active 鼠标点击时

2、表单相关

  • :focus 输入框获得焦点

  • :checked 单选 / 复选框选中

  • :disabled 禁用的表单

  • :enabled 可用的表单

  • :required 必填项

  • :optional 选填项

3、结构伪类（选第几个子元素）

  • :first-child 第一个子元素

  • :last-child 最后一个子元素

  • :nth-child(2) 第 2 个子元素

  • :nth-child(odd) 奇数行

  • :nth-child(even) 偶数行

  • :nth-child(3n) 第 3、6、9… 个

  • :only-child 独生子元素

九、img标签出现留白

1、为什么会留白

  • img 默认是行内元素（inline）

  • 行内元素默认 vertical-align: baseline（基线对齐）

  • 浏览器会为英文小写字母（g, y, p）预留基线下方的下伸空间（约 3-4px）

  • 图片底部对齐基线，下方就会出现这段空白

2、解决方法

  • 垂直对齐：vertical-align: bottom;
  • 转为块级元素:display: block;
  • 父容器 font-size: 0
  • 父容器 line-height: 0
  • 父级用 Flex / Grid（现代布局）: display: flex; // 父

总结：

  • 留白根源：img 行内元素 + baseline 对齐

  • 最优解：vertical-align: bottom 或 display: block

十、text-align、vertical-align生效场景

1、text-align

  • 给父块级元素设置
  • 作用于它里面的：
    • 文字
    • span> <a> <img> <input> 等行内 / 行内块元素
  • 对块级元素（div/p/h1）本身不生效，只对它们里面的内容生效

2、vertical-align

  • 作用对象：行内元素 / 行内块元素（inline/inline-block）

  • 环境：必须在同一行里，和文字 / 其他行内元素一起排列

  • 典型：图片、按钮、input、span、图标

常用的元素：

  • img

  • input / button

  • 行内块小图标

总结：

  • text-align: center→ 给父块级设置 → 控制子内容水平对齐
  • vertical-align: middle→ 给行内 / 行内块自己设置 → 控制自己在一行里的垂直位置

十一、Css样式分类

1、 内联样式（行内样式）：直接写在html元素上，如<div style="color: red;">

2、 内部样式表：HTML 文档的 <style> 标签内

3、 外部样式：写在独立的 .css 文件中，通过 <link rel="stylesheet" href="..."> 引入

十二、Css选择器

CSS 常见选择器分类

1、 基础选择器

  • 通配符选择器 *
  • 标签选择器 div p span ul
  • 类选择器 .className
  • ID 选择器 #idName
  • 属性选择器 [type="text"] [disabled]

2、 关系选择器

  • 后代选择器 div p（所有后代）

  • 子选择器 div > p（直接子元素）

  • 相邻兄弟 div + p（紧跟后面的第一个）

  • 通用兄弟 div ~ p（后面所有同级）

3、 伪类选择器

  • :hover :active :focus :visited

  • :first-child :last-child :nth-child(n)

  • :not() :checked :empty 等

4、 伪元素选择器

  • ::before ::after
  • ::first-line ::first-letter

5、 并集选择器

  • h1, h2, .box, #header

权重优先级总结

  • !important > 行内样式 > ID > 类 / 伪类 / 属性 > 标签 / 伪元素 > 通配符

  • 权重相同，后面写的覆盖前面写的（就近原则）

  • 继承样式权重最低，任何选择器都能覆盖继承样式

十三、清除浮动

1、所有浮动元素后加空标签

<div style="clear: both;"></div>

2、父元素加 overflow:hidden

3、伪元素清除浮动 (最佳)

.clearfix::after { 
    content: "";
    display: block; 
    clear: both; 
   } 
   .clearfix { 
      zoom: 1; /* 兼容 IE */ 
    }

4、父级也浮动 / 设固定高度

.parent {
    float: left; 
} 
/* 或 */ 
.parent { 
    height: 200px; 
  }

十四、标签有很多常用属性

1、a标签

  • href：链接地址(跳转链接、电话、email等)

  • target="_blank"：新标签打开/当前页

  • download：下载文件

  • rel="noopener noreferrer"：安全

  • title：提示文字

<a href="https://xxx.com" target="_blank" rel="noopener" title="打开官网">链接</a>

2、img

  • src：图片地址

  • alt：图片加载失败时的文字（SEO + 无障碍）

  • width/height：宽高

  • title：悬浮提示

  • loading="lazy"：懒加载

  • crossorigin：跨域

<img src="logo.png" alt="网站logo" width="100" loading="lazy">

3、link (引入静态资源css、图标、字体、预加载等)

  • rel="stylesheet"

  • href

  • type="text/css"

4、script (引入并执行js代码）

  • src

  • type="module"

  • async/defer：异步加载

  • crossorigin

十五、src 和 href 的区别

  • src：引入资源，(替换/填充)当前元素（img 、script 、iframe）

  • href：建立关联，不替换（a、 link）

十六、link 和 @import 引入 CSS 的区别

  • link 是 HTML 标签，并行加载，可加载 favicon

  • @import 是 CSS 语法，等 CSS 加载完再加载，老浏览器兼容差

  • 实际开发优先用 link

十七、什么是重绘、重排（回流）

  • 重排（回流）：结构 / 布局变化，重新计算布局（耗性能）

  • 重绘：样式变但布局不变（如颜色）

  • 重排一定触发重绘，重绘不一定触发重排

avatar
文章
阅读
粉丝