CSS_边框样式

2022-06-24 23:46:52

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。

padding 内边距

padding 属性接受长度值或百分比值，但不允许使用负值。

可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值（相对父元素的width）：

h1 {padding: 10px 0.25em 2ex 20%;}

1个值	表示4条边的边距
2个值	上下
3个值	上左右下
4个值	上下左右

也可以通过单独的属性指定： padding-方向(top/right/bottom/left)

<html>
    <head>
        <style type="text/css">
            .padding{
                padding:10px 20px 30px 40px;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <tr>
                <td class="padding">这个表格的内边距设置为padding:10px 20px 30px 40px; </td>
            </tr>
        </table>

    </body>
</html>

margin 外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。可以设置为 auto。更常见的做法是为外边距设置长度值

也可使用单个属性来表示外边距：
margin-top
margin-right
margin-bottom
margin-left

<html>
    <head>
        <style type="text/css">
            p.s{
                margin : 0 100px 20px 0px;
            }
        </style>
    </head>
    <body>
    <p class="s"> 这个段落的外边距为： 0 100px 20px 0px;这个段落的外边距为： 0 100px 20px 0px;这个段落的外边距为： 0 100px 20px 0px;这个段落的外边距为： 0 100px 20px 0px;这个段落的外边距为： 0 100px 20px 0px;这个段落的外边距为： 0 100px 20px 0px;这个段落的外边距为： 0 100px 20px 0px;这个段落的外边距为： 0 100px 20px 0px;这个段落的外边距为： 0 100px 20px 0px;</p>
    </body>
</html>

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

1.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

2.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

3.假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

border-style 边框风格

单独定义的

none 无边框
hidden 对于表,可用于解决边框冲突。
solid 实线
dashed 虚线
dotted 点状
double 双线
groove 凹槽边框
ridge 垄状边框
insert
outsert
inherit 继承

使用单独属性表示样式：border-方向-style(left/right/bottom/top)

<html>
<head>
<style type="text/css">
    p.dotted {border-style: dotted}
    p.dashed {border-style: dashed}
    p.solid {border-style: solid}
    p.double {border-style: double}
    p.groove {border-style: groove}
    p.ridge {border-style: ridge}
    p.inset {border-style: inset}
    p.outset {border-style: outset}
</style>
</head>

<body>
<p class="dotted">A dotted border</p>

<p class="dashed">A dashed border</p>

<p class="solid">A solid border</p>

<p class="double">A double border</p>

<p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p>

<p class="outset">An outset border</p>
</body>

</html>

border-width 边框宽度

thin 细
medium 中等
thick 粗边框
数字px 固定值
inherit 继承

border-color 边框颜色

rgb()
rgba()
transparent 透明
inherit 继承

码农公寓