讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > html教程 > 正文

使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版) - 前端小豪

php中文网
发布： 2016-05-20 16:51:05
原创
2244人浏览过

实现css水平垂直居中的方法有很多，在这里我简单的说下四种比较常用的方法：

1.使用CSS3中的Flex布局

对于flex，我们要了解的是它是一个display的属性，而且必须要给他的父元素设置flex属性(flex必须配合绝对定位使用！！！！！)，除了设置display：flex之外，还有另外两个属性需要设置，分别是justify-content和align-items，他们的意思分别是水平居中和垂直居中。HTML+CSS代码如下：

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> flex</span>;<span style="color: #ff0000;">
    justify-content</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    align-items</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.parentNode </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #f00</span>;
}
登录后复制
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="parentNode"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
登录后复制

当需求改变时，比如我们要在此div里面嵌套一个div，根据我上面提到的，要想子DIV垂直水平居中，我们也要给父DIV同样这样设置

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        * </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
        body </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">; // flex必须配合absolute使用才会生效</span><span style="background-color: #f5f5f5; color: #ff0000;">
            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> flex</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            justify-content</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            align-items</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
        .parentNode </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 400px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 400px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #f00</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> relative</span><span style="background-color: #f5f5f5; color: #000000;">;  // 这里必须用relative 原因是 相对于 body这个父标签定位 如果用absolute会找上级的relative，如果没有，就到顶级的document</span><span style="background-color: #f5f5f5; color: #ff0000;">
            display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> flex</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            justify-content</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            align-items</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
        .childNode </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="parentNode"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="childNode"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
登录后复制

立即学习“前端免费学习笔记（深入）”；

2.使用CSS3中的transform

<span style="color: #800000;">.parentNode </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #f00</span>;<span style="color: #ff0000;"> 
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">  
    left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(-50%, -50%)</span>;
}
登录后复制

 

3.当你知道元素的width与height时，使用CSS2中的最普通不过的margin

<span style="color: #800000;">.parentNode </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #f00</span>;<span style="color: #ff0000;"> 
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">  
    left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> -200px 0 0 -200px</span>;
}
登录后复制

 

4.使用比较特殊的margin：auto

<span style="color: #800000;">.parentNode </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #f00</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">  
    margin</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">      // 在标准流的情况下，让 margin-top 以及 margin-bottom 都为0
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">  
    top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> right</span>:<span style="color: #0000ff;"> 0</span>;  // 使浏览器对其元素所在的区域内重新渲染，四个值都设为0目的是让整个窗口都为该元素的重新渲染区域，之后margin-top以及margin-bottom都相等  
}
登录后复制

现在让我们来使用强大的SASS重构一下这几个样式，先拿flex开刀吧，

<span style="color: #800000;">@mixin center </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> flex</span>;<span style="color: #ff0000;">
    justify-content</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    align-items</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
body </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;"> 
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;"><span style="color: #0000ff;">
    @include</span> center;<br />
    <span style="color: #993300;">.parentNode</span> {
        width</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
        background</span>:<span style="color: #0000ff;"> #f00</span>;<span style="color: #ff0000;">
        position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;"><span style="color: #0000ff;">  
        @include</span> center;<br />
        <span style="color: #993300;">.childNode</span> {
           width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
           height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
           background</span>:<span style="color: #0000ff;"> #fff</span>;
        }<span style="color: #800000;">
    }
}</span>
登录后复制

如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用"$"变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义,@mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。center 是混合宏的名称。大括号里面是复用的样式代码。@include为调用混合宏。除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，并且在里面还可以写更加复杂的逻辑。

下面我将会用到if else语句以及@mixin混合宏来封装我们上面的第2,3,4方法。

Musho
Musho

AI网页设计Figma插件

Musho 90
查看详情 Musho

我们的思路是先将DIV的左上角绝对定位到容器的中心位置，然后为 mixin 添加两个可选参数($width,$height)，分别代表元素的宽高，如果传递了参数，那么就使用负向 margin 的方法实现居中；如果没有传递参数，就使用 CSS3的transform 的方法。

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 为子元素设定定位上下文
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.parent </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 让子元素绝对居中于父容器
 * 没有向 Sass mixin 传递宽和高，使用 CSS transform 属性实现居中效果
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.child-with-unknown-direction </span>{<span style="color: #ff0000;">
    @include center;
</span>}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 让子元素绝对居中于父容器
 * 向 Sass mixin 传递了宽度，所以就使用负向 margin 处理水平位置，
 * 使用 CSS transform translateY 处理垂直位置 
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.child-with-known-width </span>{<span style="color: #ff0000;">
    @include center(400px);
</span>}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 让子元素绝对居中于父容器
 * 向 Sass mixin 传递了高度，所以就使用负向 margin 处理垂直位置，
 * 使用 CSS transform translateX 处理水平位置 
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.child-with-known-height </span>{<span style="color: #ff0000;">
    @include center($height</span>:<span style="color: #0000ff;"> 400px)</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">*
 * 让子元素绝对居中于父容器
 * 向 Sass mixin 传递了高度和宽度，所以就使用负向 margin 处理水平和垂直位置
 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.child-with-known-direction </span>{<span style="color: #ff0000;">
    @include center(400px, 400px);
</span>}
登录后复制

现在我们开始封装@mixin，由上面的CSS分析知，要实现居中必须先让元素绝对定位

<span style="color: #800000;">@mixin center($width: null, $height: null) </span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 50%</span>;
}
登录后复制

然后根据下面的逻辑搭建@mixin的骨架

width height solution
null null translate
defined defined margin
defined null margin-left + translateY
null defined margin-right + translateX

 

 

 

 

 

<span style="color: #800000;">@mixin center($width:null,$height:null)</span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> flex</span>;<span style="color: #ff0000;">
    justify-content</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    align-items</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
    @if $width and $height {
        // do margin
    </span>}<span style="color: #800000;"> @else if not $width and not $height </span>{<span style="color: #ff0000;">
        // do transform translate(-50%,-50%)
    </span>}<span style="color: #800000;"> @else if not $width </span>{<span style="color: #ff0000;">
        // do margin-top and transform translateX
    </span>}<span style="color: #800000;"> @else </span>{<span style="color: #ff0000;">
    // do margin-left and transform translateY
    </span>}<span style="color: #800000;">
}</span>
登录后复制

最后我们把具体的代码插入到不同的条件中去

<span style="color: #800000;">@mixin center($width:null,$height:null)</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
            top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
            left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    @if $width and $height {
            // do margin
            width</span>:<span style="color: #0000ff;"> $width</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> $height</span>;<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> -($height / 2) #{0 0</span>}<span style="color: #800000;"> -($width / 2);   //这里如果直接写 0 0 他会编译为 margin: xx 0 xx 而不是 margin：xx 0 0 xx，所以用 <span style="color: #0000ff;">#{0 0</span><span style="color: #000000; line-height: 1.5;">}</span><br />
    } @else if not $width and not $height </span>{<span style="color: #ff0000;">
            // do transform translate(-50%,-50%)
            transform</span>:<span style="color: #0000ff;"> translate(-50%,-50)</span>;
    }<span style="color: #800000;"> @else if not $width </span>{<span style="color: #ff0000;">
            // do margin-top and transform translateX
            height</span>:<span style="color: #0000ff;"> $height</span>;<span style="color: #ff0000;">
            margin-top</span>:<span style="color: #0000ff;"> -(height / 2)</span>;<span style="color: #ff0000;">
            transform</span>:<span style="color: #0000ff;"> translateX(-50%)</span>; 
    }<span style="color: #800000;"> @else </span>{<span style="color: #ff0000;">
            // do margin-left and transform translateY
            width</span>:<span style="color: #0000ff;"> $width</span>;<span style="color: #ff0000;">
            margin-top</span>:<span style="color: #0000ff;"> -(width / 2)</span>;<span style="color: #ff0000;">
            transform</span>:<span style="color: #0000ff;"> translateY(-50%)</span>; 
    }<span style="color: #800000;">
}</span>
登录后复制

最后我们可以通过Koala软件离线编译也可以通过http://www.sassmeister.com/在线编译，下面是编译好的结果

@charset "UTF-8";
/**
 * 为子元素设定定位上下文
 */
.parent {
  position: relative;
}

/**
 * 让子元素绝对居中于父容器
 * 没有向 Sass mixin 传递宽和高，使用 CSS transform 属性实现居中效果
 */
.child-with-unknown-direction {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50);
}

/**
 * 让子元素绝对居中于父容器
 * 向 Sass mixin 传递了宽度，所以就使用负向 margin 处理水平位置，
 * 使用 CSS transform translateY 处理垂直位置 
 */
.child-with-known-width {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  margin-top: -width/2;
  transform: translateY(-50%);
}

/**
 * 让子元素绝对居中于父容器
 * 向 Sass mixin 传递了高度，所以就使用负向 margin 处理垂直位置，
 * 使用 CSS transform translateX 处理水平位置 
 */
.child-with-known-height {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 400px;
  margin-top: -height/2;
  transform: translateX(-50%);
}

/**
 * 让子元素绝对居中于父容器
 * 向 Sass mixin 传递了高度和宽度，所以就使用负向 margin 处理水平和垂直位置
 */
.child-with-known-direction {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin: -200px 0 0 -200px;
}
登录后复制

　　

 

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：我的第一个html计算器 - 珍惜des 下一篇：按钮效果 css - daxia11
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
html5视频怎么全屏_HTML5用requestFullscreen API或F11让视频全屏【全屏】 可通过requestFullscreenAPI实现视频元素级全屏、F11键触发浏览器窗口级全屏、CSS伪全屏覆盖视口、监听fullscreenchange事件检测状态，以及适配移动端原生全屏限制。
2025-12-23 05:37:19
170
浏览器怎么运行html文件路径_浏览器运html文件路径方法【教程】 拖拽HTML文件到浏览器可直接加载页面；2.通过菜单“打开文件”或快捷键Ctrl+O选择文件；3.地址栏输入file:///加路径访问，注意斜杠格式；4.双击文件用默认浏览器打开，推荐新手使用拖拽或Ctrl+O方式。
2025-12-23 04:31:12
192
html5乱码怎么设置_html5用meta charset=utf-8设编码防页面乱码【设置】 HTML5中文乱码需四步解决：一、在首行添加
2025-12-22 22:03:41
710
html5怎么添加文字_HTML5用p/span等标签加CSS设字体颜色添文字【添加】 在HTML5中设置文字颜色需结合语义化标签（如p、span）与CSS样式，支持内联style、内部style标签、外部CSS文件、选择器定位及CSS变量等多种方式实现灵活精准控制。
2025-12-22 22:02:03
149
html5怎么横向排版_HT5用flex或float布局实现元素横向排列【排版】 HTML5中实现元素横向排列有五种方式：一、Flexbox（推荐），设container为display:flex；二、Float，子元素float:left并清除浮动；三、inline-block，设display:inline-block并处理空白符；四、CSSGrid，用grid-template-columns定义列；五、table布局，用display:table/table-cell模拟。
2025-12-22 22:02:03
268
HTML表单如何排列整齐_CSS布局优化方案【指南】 表单整齐排列可通过Flexbox、Grid、浮动、CSS变量及语义化结构五种方案实现：Flexbox适用于一维对齐；Grid适合复杂二维布局；浮动兼顾旧版IE；CSS变量提升维护性；语义化结构加CSS重置保障兼容与一致性。
2025-12-22 22:01:18
927
html5怎么测框架_HT5用浏览器F12或测试工具检测框架兼容性【测试】 确认HTML5框架兼容性需四步：一、用开发者工具检查语义化标签解析与DOCTYPE声明；二、通过HTML5Test网站量化评估语义元素与表单支持；三、用Modernizr检测API并动态降级；四、借BrowserStack在真实设备中验证交互与iframe表现。
2025-12-22 22:01:02
102
HTML5怎么文本聚焦_HTML5用JS focus()方法让input/textare获焦点【聚焦】 可通过focus()方法使文本框自动获焦，具体包括：一、用ID获取元素后调用focus()；二、用querySelector按选择器聚焦；三、用setTimeout延迟聚焦防渲染未完成；四、结合scrollIntoView确保可见；五、表单验证失败时聚焦首个错误字段。
2025-12-22 22:00:38
310
html5怎么水平居中_HT5用margin:0 auto或flex让元素水平居中【居中】 HTML5中实现元素水平居中的五种可靠方案：一、margin:0auto（需块级+定宽）；二、Flexboxjustify-content:center；三、Flexbox下子元素margin:auto；四、text-align+inline-block；五、绝对定位+transform。
2025-12-22 21:57:36
835
html如何显示空格_html空格显示方法【详解】 HTML中空格被合并时，可用 、标签、white-space属性、letter-spacing/word-spacing或加margin-left五种方法精确控制空格显示。
2025-12-22 21:51:07
248
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部