微信小程序界面设计CSS3在小程序中样式精通课程-第32课-框大小box-sizing_小程序中CSS3_前端样式教程

小程序中CSS3: 微信小程序界面设计CSS3在小程序中样式精通课程-第32课-框大小box-sizing
时间：2019/1/13 14:33:27  作者：互联网  来源：网络转载  查看：23830  评论：0
内容摘要：框大小 box-sizing通用语法box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。实例规定两个并排的带边框方框： div.containe...
框大小 box-sizing

通用语法

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

实例

规定两个并排的带边框方框：

<!DOCTYPE html>

<html>

<head>

<style>

div.container

{

width:30em;

border:1em solid;

}

div.box

{

box-sizing:border-box;

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

width:50%;

border:1em solid red;

float:left;

}

</style>

</head>

<body>

<div class="container">

<div class="box">这个 div 占据左半部分。</div>

<div class="box">这个 div 占据右半部分。</div>

</div>

</body>

</html>

效果图

小程序应用

Wxml代码

<view class='c01'>

01

</view>

<view class='c02'>

02

</view>

<view class='c03'>

03

</view>

<view class='c04'>

04

</view>

Wxss代码

.c01{

    width: 50px;

    height: 50px;

    border: 1px solid blue;

}

.c02{

    width: 50px;

    height: 50px;

    padding: 25px;

    border: 1px solid red;

}

.c03{

    width: 50px;

    height: 50px;

    border: 1px solid blue;

   box-sizing: border-box;

}

.c04{

    width: 50px;

    height: 50px;

    padding: 25px;

    border: 1px solid red;

    box-sizing: border-box;

}

page{

background-color: gainsboro;

}

效果图

欢迎大家收看我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程


标签：框大小box-sizing 微信小程序界面设计入门课程 wxss中css3入门在线视频课程
上一篇：没有了
下一篇：微信小程序界面设计CSS3在小程序中样式精通课程-第31课-外形修饰（outline-offset）

相关文章

相关评论

微信小程序界面设计CSS3在小程序中样式精通课程-第32课-框大小box-sizing

框大小 box-sizing

通用语法

实例

效果图

小程序应用

Wxml代码

Wxss代码

效果图