css中内边框是什么


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

在css中,内边框是用box-sizing属性设置的,只需要给元素添加“box-sizing:border-box;”样式即可。box-sizing属性值为border-box,表示指定宽度和高度确定元素边框。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

下面我们先来看看css设置内边框的示例。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <style>

      div.container {

        width: 30em;

        height: 106px;

        border: 1em solid;

      }

 

      div.box1 {

        width: 50%;

        border: 1em solid red;

        float: left;

      }

 

      div.box2 {

        box-sizing: border-box;

        -moz-box-sizing: border-box;

        /* Firefox */

        width: 50%;

        border: 1em solid red;

        float: left;

      }

    </style>

  </head>

 

  <body>

    <div class="container">

      <div class="box1">普通边框!!</div>

      <div class="box2">内边框!!</div>

    </div>

  </body>

</html>

3C@}2UN7]ANXD)P0A4CP@5U.png

box-sizing属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

语法

1

box-sizing: content-box|border-box|inherit;

属性值:

content-box:这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

border-box:指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit:指定 box-sizing 属性的值,应该从父元素继承。

示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <style>

      div.container {

        width: 30em;

        height: 74px;

        border: 1em solid;

      }

      div.box {

        box-sizing: border-box;

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

        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>

效果图:

ME}1QS_X0V78T7S2X@F2985.png

以上就是css中内边框是什么的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

你知道怎么利用css实现内凹圆角么

css段落缩进属性是什么

css如何设置字体平滑

css 否定伪类是什么

css怎么隐藏div滚动条

css怎么让图片横着排列

css中字体加粗要怎么做?

css background-attachment属性怎么用

css border-top-color属性怎么用

css可以使用变量吗

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...