美文网首页
盒子和边框

盒子和边框

作者: Stranger_I | 来源:发表于2018-11-24 15:32 被阅读0次

盒子模型

一个盒子分为四部分
内容区(content)
内边距(padding)
边框(border)
外边距 (margin)
盒子的大小是由(内容区、内边距、边框)决定

设置边框上下左右的宽度

.box{
    boder-top-width:10px;
}

上top、下bottom、左left、右right

设置边框上下左右的颜色

.box{
    border-top-color:
}

上top、下bottom、左left、右right

设置边框的样式

.box{
    border-style:dotted;
}

dotted(点状)、dashed(虚线)、double(双线)、solid(实线)

边框

.box{
    width:100px;
     height:100px;
    background-color:#bfa;
    border-width:10px;
    border-color:red;
    border-style:solid;
}

如果不设置边框的宽度和颜色浏览器会默认为黑色3px;

边框的简写

.box{
    width:100px;
    height:100px;
    background-color:#bfa;
    border:10px red solid;
}

自定义边框颜色

.box{
    width:100px;
    height:100px;
    background-color:#bfa;
    border-top:10px solid red;
}

上top、下bottom、左left、右right

上下左都被设置就右面不会设置边框样式

.box{
    width:100px;
    height:100px;
    background-color:#bfa;
    border:10px red solid;
    border-right:none;
}

内边距

.box{
        width: 100px;
        height: 100px;
        background-color: #bbffaa;
        border:red 10px solid;
        padding-top: 20px;
        padding-bottom:20px;
        padding-left:20px;
        padding-right:20px;
    }
.box1{
        width: 100%;
        height: 100%;
        background-color: orange;
    }

PS:内边距会影响盒子的大小

外边距

 .box{
       width: 100px;
    height: 100px;
    background-color: #bbffaa;
    border:red 10px solid;
    margin-top: 20px;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
}
.box1{
    width: 100px;
    height: 100px;
    background-color: orange;
}

PS:外边距会影响盒子的位置

margin外边距

可以设置"-"值

box{
    width: 100px;
    height: 100px;
    background-color: #bbffaa;
    border:red 10px solid;
    margin-top: -50px;
    margin-bottom:-50px;
    margin-left:-50px;
    margin-right:-50px;
}
.box1{
    width: 100px;
    height: 100px;
    background-color: orange;
}

给margin设置auto

.box{
    width: 100px;
    height: 100px;
    background-color: #bbffaa;
    border:red 10px solid;
    margin-left:auto;
    margin-right:auto;
    margin: 0 auto;
}
.box1{
    width: 100px;
    height: 100px;
    background-color: orange;
}

PS:如果设定左外边距或者有外边距的话会把外边距设为最大,垂直方向设置auto相当于0,左右同时设置auto,就会居中

相关文章

  • 盒子和边框

    盒子模型 一个盒子分为四部分内容区(content)内边距(padding)边框(border)外边距 (marg...

  • html盒子

    盒子计算公式: 盒子的宽度=width+左右内边框+左右外边框 盒子的高度=height+上下内边框+上下外边框 ...

  • css中的盒子模型

    首先来盗个图 border 盒子边框 基础语法: 或者: 盒子边框写法总述 表格标题边框线以前的表格中因为外框和内...

  • 2019-05-29

    盒子模型也叫框模型: 盒子的大小由 内容区和内边距和边框来决定的。 盒子的大小=内容区+内边距+边框的宽度 内容区...

  • 盒子模型

    border:边框宽度;padding:盒子内容到盒子边框的距离;margin:盒子之间的距离;margin-le...

  • 盒子模型

    1)作用1,进行网页布局2,网页中的盒子的组成-> border边框 盒子的边框->padding内边距 盒子与...

  • 盒模型,边框,内外边距,浏览器的默认样式,内联元素的盒模型,di

    盒子模型:一个盒子分为内容区content 内边距padding 边框border和外边距margin 盒子大小=...

  • 盒子模型、CSS边距合并、inline-block缝隙、BFC

    1 盒子模型的组成 盒子模型是由边距、边框、填充和内容组成的。其中边距、边框、填充可以在盒子模型上下左右四个方向上...

  • 盒子模型

    什么是盒子模型 CSS将网页元素都看成一个个盒子。 边框 边框有3个属性,分别color、width(粗细)和st...

  • CSS 盒子模型

    CSS盒子模型 盒子模型边框 CSS盒子模型的宽度和高度 CSS模型的填充 CSS盒子模型的边界 填充和边界的区别

网友评论

      本文标题:盒子和边框

      本文链接:https://www.haomeiwen.com/subject/bicyqqtx.html