page contents

CSS盒子模型的属性总结

一、width 和 height width 属性指定了元素内容区的宽度 height 属性指定了元素内容区的高度。 取值: 长度单位(px值)百分比    参照的是其包含块的宽度/高度auto    浏览器将会为指定...

attachments-2021-06-z3vY8FBm60b5a2eecadda.png

一、width 和 height

width 属性指定了元素内容区的宽度

height 属性指定了元素内容区的高度。

取值:

长度单位(px值)
百分比
    参照的是其包含块的宽度/高度
auto
    浏览器将会为指定的元素计算并选择一个宽度.

语法

    width: 200px; height: 200px;
            初始值 auto
            是否是继承属性 否

注意:

块级元素width为auto:

当前元素width = 包含块width - 当前元素padding,border,margin之和。


二、 min-width 和 max-width

min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。

max-width 属性用来给元素设置最大宽度值。定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大.。

取值:与width一致 没有auto。有none

取值为null时,代表元素未设置最大最小值

语法:

    max-width:none
    min-width:none
        初始值:none
        是否是继承属性 否


三、 padding

padding属性设置一个元素的内边距,padding 区域指一个元素的内容和其边界之间的空间,该属性不能为负值。

padding本质上是padding-bottom,padding-left,padding-right,padding-top的简写属性。

取值:

长度单位(px)
百分比
    参照于包含块的width

语法:

padding: 1em 3px 30px 5px
        初始值 
            padding-bottom: 0
            padding-left: 0
            padding-right: 0
            padding-top: 0
是否是继承属性 否

注意:

指定一个值时 ,该值指定四个边的内边距;

指定两个值时 ,第一个值指定上下两边的内边距 第二个指定左右两边的内边距;

指定三个值时 ,第一个指定上边的内边距.第二个指定左右两边 第三个指定下边;

指定四个值时分别为上 右 下 左(顺时针顺序);


四、border

CSS的border属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值: border-width, border-style, border-color。

1、 border-width

border-width属性用来决定盒子边框的宽度。border-width本身也是border-top-width,border-right-width,border-bottom-width,border-left-width的简写属性。

取值:

关键字
    thin    ,medium ,thick  
    长度单位(px值)

语法:

border-width: 5px;
    初始值:
        border-top-width: medium
        border-right-width: medium
        border-bottom-width: medium
        border-left-width: medium
    是否是继承属性 否


2、 border-style

border-style用来设定元素所有边框的样式。是 border-top-style

border-right-style,border-bottom-style,border-left-style的简写属性,

取值:

attachments-2021-06-2T8h8WWa60b5a35b3dcdc.png

语法:

border-style: dashed;
    初始值:
        border-top-style: none
        border-right-style: none
        border-bottom-style: none
        border-left-style: none
    是否是继承属性 否


3、border-color

CSS属性 border-color 是一个用于设置元素四个边框颜色的快捷属性: border-top-color, border-right-color, border-bottom-color, border-left-color

是否是继承属性 否


五、margin

margin属性为给定元素设置所有四个(上下左右)方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是: margin-top, margin-right, margin-bottom 和 margin-left 。指定的外边距允许为负数

取值:

长度单位(px)
百分比
    参照于包含块的width
auto:元素的水平居中

语法:

margin: 1em 3px 30px 5px
    初始值 
        margin-bottom: 0
        margin-left: 0
        margin-right: 0
        margin-top: 0
  是否是继承属性   否

注意:

指定一个值时 该值指定四个边的内边距;

指定两个值时 ,第一个值指定上下两边的内边距 第二个指定左右两边的内边距;

指定三个值时 ,第一个指定上边的内边距.第二个指定左右两边 第三个指定下边;

指定四个值时分别为上 右 下 左(顺时针顺序);

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群:805358732

如果你想用Python开辟副业赚钱,但不熟悉爬虫与反爬虫技术,没有接单途径,也缺乏兼职经验
关注下方微信公众号:Python编程学习圈,获取价值999元全套Python入门到进阶的学习资料以及教程,还有Python技术交流群一起交流学习哦。

attachments-2022-06-EvioHCvT62ac1c9d55bf3.jpeg

0 条评论

请先 登录 后评论
轩辕小不懂
轩辕小不懂

2403 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1474 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章