美文网首页
盒子模型的创建和设置

盒子模型的创建和设置

作者: 常伟波 | 来源:发表于2018-07-10 14:48 被阅读0次

    盒子模型分为:内容区(content) 内边距(padding) 边框(border) 外边距(magin)

    1.内容区
    用width和height指定内容区的宽和高
    2.边框
    border-width:10px 顺序:四周 设置4个边的边框宽度
    border-width:10px 20px 30px 40px 顺序:上右下左 设置边框的宽度
    border-width:10px 20px 30px 顺序: 上,左右,下 设置边框的宽度
    border-width:10px 20px 顺序:上下,左右 设置边框的宽度


    还可以单独设置一边的边框高度,或者是颜色:border-top-width:10px 上边框的宽度设置为10px border-top-color:red 上边框的颜色设置为红色


    可以通过border-sytle设置边框的样式(solid实线,dotted点状虚线……)

    border: 颜色 样式 宽度 同时设置4个边的颜色,央视和宽度
    border-top:颜色 样式 宽度 同时设置上边框的颜色,样式,宽度

    3.padding内边距
    padding:100px 4个边的内边距都是100px
    padding:100px 200px 顺序:上下,左右
    padding:100px 200px 300px 顺序: 上,左右,下
    padding:100px 200px 300px 400px 顺序:上右下左
    4.margin-left/right/top/bottom:100px 设置 左/右/上/下 的外边距 (可以设置负值,向反方向移动)
    margin-left:auto/margin-right:auto 这两个都是设置水平居中

    margin设置的方式跟padding一样,

    margin:50px auto 10px 设置水平居中,auto就是根据父元素的自动调整

    如果 垂直方向上的 相邻 的两个外边距都被设置了, 会用最大值,而不是和

    如果 父子元素的上边距相邻,会一起移动,想要分离子元素,1.gei 给父元素设置上边框 或 上内边距


    注意!

    内联元素 无内容区的宽,高,水平方向的外边距求和


    display

    display:block 显示为块元素
    display:none 元素不会被显示,也不会占地方
    display:inline 元素显示为内联元素
    display:inline-block 元素显示为行内块元素

    相关文章

      网友评论

          本文标题:盒子模型的创建和设置

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