CSS布局技巧大全

最新推荐文章于 2023-02-25 13:41:21 发布
最新推荐文章于 2023-02-25 13:41:21 发布
阅读量190 收藏
点赞数

参考资料：
http://www.imooc.com/article/2235

单列布局

水平居中

  1. 父元素text-align:center;子元素：inline-block;
  • 优点：兼容性好；

  • 不足：需要同时设置子元素和父元素

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中1</title>
<style>
    .parent {
        width: 500px;
        height: 400px;
        background: red;
        text-align: center;
    }
    .child {
        display: inline-block;
        width: 300px;
        height: 100px;
        background: blue;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>
  1. 子元素margin:0 auto;
  • 优点：兼容性好
  • 缺点：需要指定宽度 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
  1. 子元素{display:table;margin:0 auto;}
  • 优点:只需要对自身进行设置
  • 不足:IE6,7需要调整结构 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            margin:0 auto;
            display:table;margin:0 auto;s
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
  1. 父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半
  • 优点：兼容性好
  • 缺点：需要知道子元素的宽度 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -150px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
  1. 父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);
  • 优点：兼容性差
  • 缺点：不需要知道子元素的宽度 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%,0);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
  1. 弹性盒子：父元素：display:flex;justify-content:center;
  • 优点：简单

  • 缺点：兼容性差

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中1</title>
<style>
    .parent {
        width: 500px;
        height: 400px;
        background: red;
        display: flex;
        justify-content: center;
    }
    .child {
        width: 300px;
        height: 100px;
        background: blue;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>

垂直居中

  1. vertical-align:center; 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display:table-cell;
            vertical-align:middle;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            vertical-align:middle;
            line-height:450px;            
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
<!-- 这种方法需要知道父元素和子元素的高度，父元素的line-height的值为父元素高度减去子元素高度的一半。-->
  1. 父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%); 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;          
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 50%;
            left:0;
            transform: translate(0,-50%);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

  1. 父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;

  2. 父元素：display:flex;align-items:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display: flex;
            align-items: center;        
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

水平垂直居中

  1. 父元素：display:table-cell;vertical-align:middle;text-align:center;
    子元素；display:inline-block; 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display:table-cell;
            vertical-align:middle;
            text-align:center; 
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
  1. 父元素：position:relative;
    子元素：position:absolute
long0801
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS+DIV网页布局技巧（精髓）
09-05
一些解决 浏览器兼容问题的CSS技巧，看了之后你会觉得写出兼容的CSS代码会容易很多。不必在苦恼于控制float元素，等问题。
收藏！40 个 CSS 布局技巧
阿里云开发者
07-20 9591
简介：CSS是Web开发中不可或缺的一部分，随着Web技术的不断革新，CSS也变得更加强大。CSS的众多属性你知道了多少？具体开发中该使用什么属性才最适合恰当？如今的一些CSS属性可以让我们节约更多的时间。比如在Web布局中，现代CSS特性就可以更好的帮助我们快速实现如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等效果。淘系前端技术专家大漠将详细介绍一些不同的CSS属性来实现这些效果，希望对同学们有所帮助。一 水平垂直居中如何实现水平垂直居中可以说是CSS面试题中的经典面试题，在多年前
css布局技巧
desson
03-01 59
参考 参考 参考margin负值 参考margin负值 margin负值布局
CSS-布局技巧
王子老师
09-28 76
人生不能太过圆满，求而不得也未必是遗憾。 margin负值巧妙应用 现在每个盒子中间的边框宽度是2px 添加属性：margin-left:-1px 鼠标滑过的时候显示红色的边框： 右边的被覆盖了 解决方法1：如果li都有定位，z-index:1提高层级 方法2：使用相对定位，占有原来的位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title.
css.布局技巧
m0_73782968的博客
02-25 62
当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。当前，新冠疫情的防疫已进入新常态
CSS网站布局技巧几则总结
12-11
W3C对于XHTML与CSS都有检测工具可用，请见http://validator.w3.org。请注意，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。　...
CSS高级技巧:网页布局
09-27
上一篇CSS教程 文章：CSS高级技巧:文字环绕图片布局CSS至关重要的作用, CSS的设计初衷.CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现...
css布局小技巧分享(必看)
09-24
下面小编就为大家带来一篇css布局小技巧分享(必看)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS网页布局全精通
12-10
相关文章：CSS网页布局开发小技巧24则 稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕过它的方法.也将分享一个以CSS达成等宽栏位的简单秘密. 要如何以CSS作出两栏版面布局? 答案是...
CSS 布局小技巧
yanzhou1224的专栏
03-14 213
1. ul在IE7，IE6下的解释和FireFox，IE8 不同，前者默认margin的值，后者默认padding的值，因此设置的时候要把margin和padding都设置为0。但是当有border的时候，点还是会显示出来，所以还要设置list-style:none. 虽然预设标记不错，但是却没有办法精确控制，所以在实际应用中并不推荐使用，还是用背景图片来代替。2. Id的权重比class要大。3.定义链接的四种状态要注意先后顺序： Link Visited Hover Active, 否则可能影响效果。4
css布局小技巧
蒹葭的博客
10-28 1139
文章目录一、左右布局1. 使用display: inline-block;2. 使用浮动定位float，3. 使用绝对定位position: absolute;4. 使用display：flex,6. 其他方法,二、左中右布局---基本与上面的无异，稍作修改宽度就可以了三、水平居中1. margin2. 绝对定位3. flex布局四、垂直居中1.transform五等其他小技巧 一、左右布局 1....
CSS常见布局技巧
月光晒了很凉快的博客
07-22 205
1.如果盒子没有定位，则鼠标经过添加相对定位即可。/*3.上边框宽度要大，右边框宽度稍小，其余的边框该为0*//*2.如果li都有定位，则利用z-index提高层级;/*1.只保留右边的边框有颜色*//*左边和下边的边框设置为0*//*2.样式都是solid*//*把上边框宽度调高*/...
CSS-常见布局技巧
qq_52822043的博客
03-06 344
目录 1. margin负值的运用 2. 文字围绕浮动元素 3. 行内块的巧妙运用 4. css三角强化 1. margin负值的运用 让每个盒子margin往左侧移动-1px 正好压住相邻盒子的边框 鼠标经过某个盒子的时候，提高当前盒子的层级即可，如果没有定位则加相对定位（保留位置），如果有定位则加z-index <style> ul li { position: relative; f
CSS---常见布局技巧
IDApprentice的博客
03-10 433
1. margin负值的运用 2. 文字围绕浮动元素 3. 行内块的巧妙运用 4. CSS三角强化 1. margin负值运用 经过边框盒子变色: 例子: 标签:hover { border: 1px solid 颜色; } 2. 文字围绕浮动元素巧妙运用 利用浮动元素不会压住文字的特性 首先 准备一个大盒子 里面拥有文字 然后 在左侧的图片添加浮动 3. 行内块的巧妙运用 ...
CSS·常见布局技巧
qq_52227199的博客
10-01 75
CSS·常见布局技巧 一.margin负值的运用 让每个盒子margin往左侧移动-1px正好压住相邻盒子边框。 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位则加z-index）。 ul li{ position:relative; float:left; list-style:none;/*去掉小点*/ width:150px; height:200px; border:1px solid red; margin-left:-
html+css布局技巧
let4897
10-04 282
(一）、父元素的宽高的变化子元始终素铺满父元素   &lt;body&gt; &lt;div class="parent"&gt; &lt;div class="child"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;style type="text/css"&gt;
关于html和css布局的一些小技巧
LGui的博客
03-26 225
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> <div style="background: #0000DE;width: 420px;overflow: hidden;di...
div css布局大全
最新发布
06-12
2. CSS Tricks - 一个专门介绍 CSS 技巧和技术的网站，其中有很多关于布局的教程。 3. A Complete Guide to Flexbox - 一个非常全面的 Flexbox 教程，适用于那些想要使用 Flexbox 进行网页布局的人。 4. A ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值