盒子模型基础知识2

一.水平布局

     1.水平方向能影响到inner所占位置的因素有哪些

           margin-left, border-left, padding-left ,width ,padding-right ,border-right ,margin-right    

     2.什么是过度约束:

            浏览器规定,元素水平方向7个值相加,必须要等与其父元素内容区的宽度,

            如果不等于,浏览器就会进行调整,让等式成立

            margin-left+border-left+padding-left + width + padding-right +

            border-right+ margin-right=父元素内容区的宽度

     3. 浏览器如何调整

        1、如果水平方向7个值当中没有auto,浏览器会自动调整margin-right的值

              40+20+0+100+0+20+ 420 =600

        2、7个值当中,有3个值可以设置auto,margin-left width margin-right

          (1) 设置1个auto   谁是auto,浏览器就调整谁

          (2)设置2个auto

                  margin-left width    调整width

                 width margin-right    调整width

                margin-left margin-right   同时调整margin-left margin-right

         (3)设置3个auto

                margin-left width margin-right  调整的就是width

      总结:

          1、如果7个值当中有auto,调整的顺序

                width > margin-left margin-right

        2、如果想让块元素水平方向居中,必须要width为固定值,左右外边距为auto

二.垂直布局

    1.  块元素默认情况下,宽度是父元素内容区的100%,高度是被内容撑开

       在垂直布局中,一般情况下,我们是不设置高度的,让元素被内容撑开

    2 . 使用overflow属性设置父元素如何处理溢出的子元素

          可选值:

            visible 默认值  文本正常显示

            hidden  裁剪掉多余的内容

            scroll  生成双向的滚动条,可以通过滚动条查看完整的内容

            auto    根据实际的内容出现滚动条

           overflow-x  对水平方向溢出的内容进行设置,垂直方向根据实际需要自动生成

           overflow-y  对垂直方向溢出的内容进行设置,水平方向根据实际需要自动生成

三.垂直外边距的重叠

   1.兄弟元素

        如果两个值都是正值,谁大听谁的

        如果两个值是负值,谁小听谁的(绝对值谁大听谁的)

        如果是一正一负,那最终的值,两者相加  

       兄弟元素的外边距重叠,一般情况对我们的开发是有利,不需要做特殊处理

  2.父子元素

       如果父子元素的垂直外边距相邻了,则子元素的外边距会传递给父元素,

      导致父元素的位置发生变化,会影响到父元素下面的布局,

      所以这个问题必须要解决

      1、不要用margin

      2、将父子外边距隔开,例如可以用边框,添加一个空表格

      3、开启元素的隐含属性BFC  overflow:hideen;

四.内联元素盒子

       内容区 :行内元素盒子模型不可以设置内容区的大小,它的内容区的大小都是被内容撑开

      内边距 :行内元素盒子模型可以设置内边距,而且垂直方向的内边距不会影响其他的元素的位置

      边框 :行内元素盒子模型可以设置边框,而且垂直方向的边框也不会影响其他的元素的位置

     外边距:水平方向的外边距可以设置成功的,而且水平方向的外边距不会重叠

             垂直方向的外边距不可以设置

五.默认样式

 1:手动去除   

                 这种方式一般情况只适用一些小的案例,小的项目

 *{
    margin:0;
    padding:0;
      }
      li{
        list-style:none;
      }
       a{
      text-decoration: none;
    }

 2:引入重置样式表

    这个表就是网上的大神列举出来的所有的标签的默认样式

    reset.css,normal.css

    我们使用的时候,只需要引入到对应的html文件内就可以

六.盒子的大小

      默认情况下:盒子可见宽的大小由内容区,内边距,边框共同决定

          设置width,height特指内容区的宽高

           box-sizing  用来设置盒子尺寸的计算方式  用来规定width,height指的谁

          可选值:

            content-box  width,height指的是内容区宽高,默认值

            border-box   width,height指的就是内容区,内边距,边框加起来的大小

七.阴影与圆角

   1.box-shadow

          用来设置元素的阴影效果,不会影响到页面布局

            第一个值:水平偏移量  正->右  负->左  必写

            第二个值:垂直偏移量  正->下  负->上  必写

            第三个值:模糊半径   选写,默认值是0

            第四个值:颜色       选写,默认值是黑色

2.border-radious

          a、border-radius 用来设置圆角  

             可以同时设置多个值,规则跟我们之前归纳的border-width一样

          b、单独设置某一角的圆角

              border-top-left-radius:;

              border-top-right-radius:;

              border-bottom-left-radius:;

              border-bottom-right-radius:;

          c、设置圆形

           border-radius: 50%;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值