演示box-sizing属性，常见属性的居中 -

首页 > 博客列表 > 演示box-sizing属性，常见属性的居中

博主信息

博文 16

粉丝 0

访问量 22620

专题推荐

更多>

box-sizing属性：

开发者可以通过box-sizing属性设置当前页面使用哪种盒子模式，box-sizing有2个值，border-box;content-box;

1、border-box ：ie盒子模式，它包含padding和border，（把内边距和边框计算到内容区域）盒子不会被撑开。

2、content-box : w3c盒子，默认盒子样式，它不包含padding和border，（把内边距和边框计算在内容区域外）盒子会不撑开。

代码演示：

 <title>实例演示box-sizing属性,可以由开发者选择使用哪种盒子模型</title>
    <style>
        .one{
            border: 20px solid red;
            width: 150px;
            height:120px;
            /* ie盒子模型，包含padding和border，盒子不会被撑开 */
            box-sizing: border-box;
            padding:5px;
            background-color: violet;
            margin:10px;
            background-clip: content-box;
        }
        .two{
            border:20px solid blue;
            width:150px;
            height:120px;
            /* w3c盒子模型，（默认）不包含padding和border，盒子会被撑开 */
            box-sizing:content-box;
            background-color: skyblue;
            margin:10px;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <p>1. 实例演示box-sizing属性; </p>
    <div class="one">box-sizing</div>
    <div class="two">box-sizing2</div>
</body>

常用属性居中方式

1、table-cell
支持响应式，水平垂直居中

text-align:center 这个只能对行内元素进行水平居中，比如图片，文字，按钮，但是IE 6,7可以对任何元素居中；

2、line-height
如果只有一行文字，并且不多的情况下用，水平垂直居中；

3、margin 0 auto 加宽度
水平居中，利用margin自动计算，但是对于浮动和绝对定位元素无效；

4、绝对定位居中
父元素设置relative，子元素设absolute，同时上下左右设为0，margin设为auto ，要定义高宽；

演示代码

  <style>
        .one {
            border: 20px solid red;
            width: 150px;
            height: 120px;
            /* ie盒子模型，包含padding和border，盒子不会被撑开 */
            box-sizing: border-box;
            padding: 5px;
            background-color: violet;
            margin: 10px;
        }
        .two {
            border: 20px solid blue;
            width: 150px;
            height: 120px;
            /* w3c盒子模型，（默认）不包含padding和border，盒子会被撑开 */
            box-sizing: content-box;
            background-color: skyblue;
            margin: 10px;
        }
        .three {
            border: 1px red solid;
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        .four{
            /* span不支持定义宽和高，它的宽和高是由内容尺寸决定的 */
            width:300px;
            height:100px;
            border: 1px red solid;
            font-size:100px;
            }
        .five{
            margin:20px;
            width:200px;
            height:200px;
            border:2px solid blue;
        }   
        .five>div{
            width:50px;
            height:50px;
            background-color: red;
            /* 让它居中 */
            margin:75px auto;
        } 
    </style>
</head>
<body>
    <p>实例演示常用的元素居中方式 </p>
    <div class="one">box-sizing</div>
    <div class="two">box-sizing2</div>
    <div class="three">块元素的居中div3</div>
    <span class="four">块元素的居中pp</span>
    <div class="five">
        <div>内嵌div</div>
    </div>
</body>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html一些基本概念

2020-12-14 19:10:02