精华内容
下载资源
问答
  • 记得先点web前端学习圈关注我哦~本篇文章主要探讨盒模型,以及内边距、边框、外边距的面试题思考,也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章中第一问:什么是盒模型?...

     是新朋友吗?记得先点web前端学习圈关注我哦~

    f1365f7caede10b9dbd5c935d9d1abe7.png

    95e1b6134c9dd9a8867be9757abb5e91.png
    本篇文章主要探讨盒模型,以及内边距、边框、外边距的面试题与思考,也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章中
    ca11187667b2a75ae3c4a9977f5fc34a.png

    第一问:什么是盒模型?

    可以说,页面就是由一个个盒模型堆砌起来的,每个HTML元素都可以叫做盒模型,盒模型由外而内包括:外边距(margin)、边框(border)、填充(亦称内边距)(padding)、内容(content)。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。

    但是,盒模型有标准盒模型和IE的盒模型。

    第二问:两者的区别是什么?

    我们先来看两张图:

    标准的(W3C)盒模型:

    082a19f7a82d5469c1ff01924ee108f9.png

    IE盒模型:

    1be6ceb929fa5c11fdab3f6d77fdbae3.png

    第三问:怎么设置这两种模型呢?

    很简单,通过设置 box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果。

    第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法

    • 第一种:

    dom.style.width/height

    这种方法只能获取使用内联样式的元素的宽和高。

    • 第二种:

    dom.currentStyle.width/height

    这种方法获取的是浏览器渲染以后的元素的宽和高,无论是用何种方式引入的css样式都可以,但只有IE浏览器支持这种写法。

    • 第三种:

    window.getComputedStyle(dom).width/height

    这种方法获取的也是浏览器渲染以后的元素的宽和高,但这种写法兼容性更好一些。

    • 第四种:

    dom.getBoundingClientRect().width/height

    这种方法经常使用的场所是,计算一个元素的绝对位置(相对于视窗左上角),它能拿到元素的left、top、width、height 4个属性。

    第五问:描述一下下面盒子的大小,颜色什么的(content-box模型)

      body{    background-color: gray;  }  div{    color: blue;    width: 100px;    background-color: pink;    border: 10px solid;    padding: 20px;  }  

    有一说一,当时被字节面试官问到这个问题,我是挺蒙蔽的,因为他这里不指考了一点,问题列一下:

    1. 整个盒子的大小

    2. padding的颜色

    3. border的颜色

    4. height为0了,看得见盒子吗?

    答案:如图所示

    1840ae073d23e4841dc685f01adb43e0.png
    1. 整个盒子的大小 = 0 (因为height为0)

    2. padding的颜色 = pink(继承content的颜色)

    3. border的颜色 = blue(继承color字体的颜色,默认为black)

    4. height为0了,看得见盒子吗?(虽然height为0,但是看得见盒子,因为有border和padding)

    这里需要注意

    1. 如果没有写border-style,那么边框的宽度不管设置成多少,都是无效的。

    2. border-color的颜色默认跟字体颜色相同

    3. padding颜色跟背景颜色相同

    第六问:当small盒子设置成圆形时,内容会超出圆形吗?为什么

      body{    background-color: gray;  }  .big{    width: 400px;    height: 400px;    background-color: pink;  }  .small{    width: 100px;    height: 100px;    background-color: red;    border-radius: 50%;    overflow-wrap: break-word;  }  
    ddddddddddddddddddddddddddddddddddddddddddd

    会超出圆形。原因如图所示,是因为border-radius只是改变视觉上的效果,实际上盒子占据的空间还是不变的。

    5dcdf10a92d095d9dcdaf45fb972764a.png

    第七问:当元素设置成inline-block会出现什么问题?怎么消除?

    这是网易有道的小姐姐面试官的问题,我承认我确实不知道这个问题!

    真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子

    我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:

    .space a {    display: inline-block;    padding: .5em 1em;    background-color: #cad5eb;}
    4ded13efa2838687a8cfdb3296155dfb.png

    去除inline-block元素间间距的N种方法

    1. 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:

    惆怅 淡定 热血

    或者是:

    或者是借助HTML注释:

    1. 使用margin负值

    2. 让闭合标签吃胶囊

    3. 使用font-size:0

    详细的可以看看这篇文章去除inline-block元素间间距的N种方法

    第八问:行内元素可以设置padding,margin吗?

    • 第一:行内元素与宽度宽度不起作用

    span {  width:200px;}

    没有变化

    • 第二:行内元素与高度高度不起作用

    span{  height:200px;}

    没用变化

    • 第三:行内元素与padding,margin

    span{  padding:200px;}

    影响左右,不影响上下 ,span包裹的文字左右位置改变,上下位置不变,但背景色会覆盖上面元素的内容。如图所示:

    d861c24425442b1e8b0c3d35cbe9fd93.png

    行内元素(inline-block)的padding左右有效 ,但是由于设置padding上下不占页面空间,无法显示效果,所以无效

    第九问:padding:1px2px3px;则等效于什么?

    对于我们来说,我们经常写的简写是两个值或者一个值或者四个值,而三个值的,会比较少写,所以当时,我确实有点蒙了,因为我对于这个三个值各代表什么是死记硬背的!后来才发现,原来遵循一条非常简单的规则:

    简单来说就是 这四个值,分别代表上、右、下、左。如果没有写下的话,那就下复制上的,同理左复制右的值。

    因此, 你应该明白了

    1. 当padding的值只有一个时,就是后面三个都复制了第一个

    2. 当写两个时,就是写了top和right,因此bottom复制top,left复制right

    3. 当写了三个时,就是写了top,right,bottom,因此left复制right。

    这么简单的规则,再也不会忘记了吧。

    第十问:内边距的百分数值是这么计算的

    我们知道,padding可以这么设置

    padding:100px

    也可以

    padding:20%

    那当是百分比时是怎么计算的呢?

    这不是很简单的问题吗?

    就是根据父元素的宽度计算的

    第十一问:那为什么不根据自己的宽度呢?而要根据父元素

    好家伙,我说怎么问那么简单的问题,原来是为了这个问题做铺垫

    这个问题可以这么思考,如果不根据父元素,而是根据本身的宽度的话。那么当padding生效后,本身的宽度不就变大了吗?那么padding不是也要变大吗?这就陷入了死循环(哇塞!)。

    或者要是本身没有宽度,那岂不是怎么设置padding都是无效的!!!

    第十二问:什么是边距重叠?什么情况下会发生边距重叠?如何解决边距重叠?

    边距重叠:两个box如果都设置了边距,那么在垂直方向上,两个box的边距会发生重叠,以绝对值大的那个为最终结果显示在页面上。

    边距重叠分为两种:

    1. 同级关系的重叠

    同级元素在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个**

            .fat {          background-color: #ccc;      }      .fat .child-one {          width: 100px;          height: 100px;          margin-bottom: 30px;          background-color: #f00;      }
      .fat .child-two {      width: 100px;      height: 100px;      margin-top: 10px;      background-color: #345890;  }

       ```

    1. 父子关系的边距重叠

    父子关系,如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距。

    给父元素添加 overflow:hidden 这样父元素就变为 BFC,不会随子元素产生外边距,但是父元素的高会变化

            #fat {          background-color: #f00;          overflow: hidden;      }      #fat .child {          margin-top: 10px;          height: 100px;          background-color: blue;      }  

    第十三问:第二种哪里算是外边距重叠???

    实际上,这也是第一种的变形。

    header {  background: goldenrod;}h1 {  margin: 1em;}  

    Welcome to ConHugeCo

    e9b3506509385efdf436f939275eeda3.png

    可以看到其实是header的margin为0,然后h1的margin为1em,因此header和h1的margin发生了重叠,然后header的margin就取1em和0两个值中最大的值了,所以当然取1em啦。

    (网上有说是因为margin的传递性,但我并不同意,因为我实践了一下,发现不管父盒子有没有margin-top,父盒子只会选择两者值中的最大值,跟传递性似乎没啥关系)

    第十四问:为什么回出现margin重叠的问题?粗俗点就是问设计者的脑子有问题吗?

    这个就是问设计了margin重叠的巧妙用处。

    这个曾经有位面试官问过我,我不知道,我请教了他,他说,在flex布局前,要实justify-content:space-evenly的效果,利用浮动布局,然后给每个盒子设置margin-right,margin-left就可以实现了,这样就不用去单独地再去设置第一个盒子的margin-left和最后一个盒子的margin-right,那时候我信了。

    后来越想越不对,不是说margin水平方向不会发生重叠问题吗????

    但是根据面试官的思路来的话,在垂直方向似乎就讲的通了。

      body{    background-color: gray;  }  ul{    width: 300px;    height: 170px;    background-color: blue;    border: 1px solid;  }  li{    margin-top: 20px;    margin-bottom: 20px;    width: 40px;    height: 30px;    background-color: orange;  }                
    e3221925d76ad7377062f98a09e0a5ad.png

    或许你有更好的说法,欢迎下方留言评论补充!!!

    那该怎么解决margin边距重叠的问题呢?

    解决方法就是生成BFC

    第十五问:什么是BFC?

    BFC的基本概念–BFC就是“块级格式化上下文”的意思,也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。通俗的讲,就是一个特殊的块,内部有自己的布局方式,不受外边元素的影响。

    第十六问:那么BFC的原理是什么呢?

    1. 内部的Box会在垂直方向上一个接一个的放置

    2. 垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠(塌陷),与方向无关。)

    3. 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)

    4. BFC的区域不会与float的元素区域重叠

    5. 计算BFC的高度时,浮动子元素也参与计算

    6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

    第十七问:BFC由什么条件创立?

    1. float属性不为none

    2. position属性为absolute或fixed

    3. display属性为inline-block、table-cell、table-caption、flex、inline-flex

    4. overflow属性不为visible(- overflow: auto/ hidden;)

    总结:pdfo

    第十八问:BFC的使用场景有哪些呢

    1. 可以用来自适应布局。

                          #layout{            background: red;          }          #layout .left{            float: left;            width: 100px;            height: 100px;            background: #664664;          }          #layout .right{            height: 110px;            background: #ccc;            overflow: auto;          }                            
    1. 可以清除浮动:(塌陷问题)

              #float{        background: #434343;        overflow: auto;      }      #float .float{        float: left;        font-size: 30px;      }    
    我是浮动元素
    1. 解决垂直边距重叠:

                #margin{            background: pink;            overflow: hidden;        }        #margin>p{            margin: 5px auto 25px;            background: red;        }        #margin>div>p {            margin: 5px auto 20px;            background: red;        }    

    1

    2

    3

    第十九问:清除浮动的方法(最常用的4种)

    这时候很多人会想到新建标签clear:both和float 方法,但是这两种方法并不推荐使用!

    什么是clear:both

    clear:both:本质就是闭合浮动, 就是让父盒子闭合出口和入口,不让子盒子出来

    1. 额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)

                    Document        .fahter{        width: 400px;        border: 1px solid deeppink;    }    .big{        width: 200px;        height: 200px;        background: darkorange;        float: left;    }    .small{        width: 120px;        height: 120px;        background: darkmagenta;        float: left;    }    .footer{        width: 900px;        height: 100px;        background: darkslateblue;    }    .clear{        clear:both;    }    
    big
    small
    额外标签法
    808c27673f538f324acfdca3c126aa4d.png

    如果我们清除了浮动,父元素自动检测子盒子最高的高度,然后与其同高。

    优点:通俗易懂,方便

    缺点:添加无意义标签,语义化差

    不建议使用。

    1. 父级添加overflow属性(父元素添加overflow:hidden)(不推荐)

    通过触发BFC方式,实现清除浮动

    .fahter{    width: 400px;    border: 1px solid deeppink;    overflow: hidden;}

    优点:代码简洁

    缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素

    不推荐使用

    1. 使用after伪元素清除浮动(推荐使用)

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/    content: "";    display: block;    height: 0;    clear:both;    visibility: hidden;}.clearfix{    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/}    
    big
    small

    优点:符合闭合浮动思想,结构语义化正确

    缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.

    推荐使用

    1. 使用before和after双伪元素清除浮动

     .clearfix:after,.clearfix:before{    content: "";    display: table;}.clearfix:after{    clear: both;}.clearfix{    *zoom: 1;} 
    big
    small

    优点:代码更简洁

    缺点:用zoom:1触发hasLayout.

    推荐使用

    1. 浮动父元素

    img{  width:50px;  border:1px solid #8e8e8e;  float:left;}

    这种方式也不推荐,了解即可。

    如果有不对的地方欢迎留言交流与补充 也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章中

    源自:https://juejin.im/post/6880111680153059341

    声明:文章著作权归作者所有,如有侵权,请联系小编删除。

    感谢 · 转发欢迎大家留言

    60f5e231d1fbeaaf62e047a124613b56.png

    展开全文
  • 记得先点web前端学习圈关注我哦~本篇文章主要探讨盒模型,以及内边距、边框、外边距的面试题思考,也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章中第一问:什么是盒模型?...

     是新朋友吗?记得先点web前端学习圈关注我哦~

    1eb0c3c271431436d41dfc7061cd47bf.png

    3fdb50b67903745406d4ea841894c734.png
    本篇文章主要探讨盒模型,以及内边距、边框、外边距的面试题与思考,也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章中
    1b10d521185cfc138216543a2a8f0055.png

    第一问:什么是盒模型?

    可以说,页面就是由一个个盒模型堆砌起来的,每个HTML元素都可以叫做盒模型,盒模型由外而内包括:外边距(margin)、边框(border)、填充(亦称内边距)(padding)、内容(content)。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。

    但是,盒模型有标准盒模型和IE的盒模型。

    第二问:两者的区别是什么?

    我们先来看两张图:

    标准的(W3C)盒模型:

    2992af3ab8e2e8a729ba856b0694563a.png

    IE盒模型:

    15737de88568d1c59077db1e1b91bb37.png

    第三问:怎么设置这两种模型呢?

    很简单,通过设置 box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果。

    第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法

    • 第一种:

    dom.style.width/height

    这种方法只能获取使用内联样式的元素的宽和高。

    • 第二种:

    dom.currentStyle.width/height

    这种方法获取的是浏览器渲染以后的元素的宽和高,无论是用何种方式引入的css样式都可以,但只有IE浏览器支持这种写法。

    • 第三种:

    window.getComputedStyle(dom).width/height

    这种方法获取的也是浏览器渲染以后的元素的宽和高,但这种写法兼容性更好一些。

    • 第四种:

    dom.getBoundingClientRect().width/height

    这种方法经常使用的场所是,计算一个元素的绝对位置(相对于视窗左上角),它能拿到元素的left、top、width、height 4个属性。

    第五问:描述一下下面盒子的大小,颜色什么的(content-box模型)

      body{    background-color: gray;  }  div{    color: blue;    width: 100px;    background-color: pink;    border: 10px solid;    padding: 20px;  }  

    有一说一,当时被字节面试官问到这个问题,我是挺蒙蔽的,因为他这里不指考了一点,问题列一下:

    1. 整个盒子的大小

    2. padding的颜色

    3. border的颜色

    4. height为0了,看得见盒子吗?

    答案:如图所示

    c4364ad222314165aebbb643132e2142.png
    1. 整个盒子的大小 = 0 (因为height为0)

    2. padding的颜色 = pink(继承content的颜色)

    3. border的颜色 = blue(继承color字体的颜色,默认为black)

    4. height为0了,看得见盒子吗?(虽然height为0,但是看得见盒子,因为有border和padding)

    这里需要注意

    1. 如果没有写border-style,那么边框的宽度不管设置成多少,都是无效的。

    2. border-color的颜色默认跟字体颜色相同

    3. padding颜色跟背景颜色相同

    第六问:当small盒子设置成圆形时,内容会超出圆形吗?为什么

      body{    background-color: gray;  }  .big{    width: 400px;    height: 400px;    background-color: pink;  }  .small{    width: 100px;    height: 100px;    background-color: red;    border-radius: 50%;    overflow-wrap: break-word;  }  
    ddddddddddddddddddddddddddddddddddddddddddd

    会超出圆形。原因如图所示,是因为border-radius只是改变视觉上的效果,实际上盒子占据的空间还是不变的。

    a3c1a8470654fc888759d360975ba0ac.png

    第七问:当元素设置成inline-block会出现什么问题?怎么消除?

    这是网易有道的小姐姐面试官的问题,我承认我确实不知道这个问题!

    真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子

    我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:

    .space a {    display: inline-block;    padding: .5em 1em;    background-color: #cad5eb;}
    d0c56a31b50030a9c4fc9c54848ea69c.png

    去除inline-block元素间间距的N种方法

    1. 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:

    惆怅 淡定 热血

    或者是:

    或者是借助HTML注释:

    1. 使用margin负值

    2. 让闭合标签吃胶囊

    3. 使用font-size:0

    详细的可以看看这篇文章去除inline-block元素间间距的N种方法

    第八问:行内元素可以设置padding,margin吗?

    • 第一:行内元素与宽度宽度不起作用

    span {  width:200px;}

    没有变化

    • 第二:行内元素与高度高度不起作用

    span{  height:200px;}

    没用变化

    • 第三:行内元素与padding,margin

    span{  padding:200px;}

    影响左右,不影响上下 ,span包裹的文字左右位置改变,上下位置不变,但背景色会覆盖上面元素的内容。如图所示:

    456c1280e2819cede2faa92338e56dbd.png

    行内元素(inline-block)的padding左右有效 ,但是由于设置padding上下不占页面空间,无法显示效果,所以无效

    第九问:padding:1px2px3px;则等效于什么?

    对于我们来说,我们经常写的简写是两个值或者一个值或者四个值,而三个值的,会比较少写,所以当时,我确实有点蒙了,因为我对于这个三个值各代表什么是死记硬背的!后来才发现,原来遵循一条非常简单的规则:

    简单来说就是 这四个值,分别代表上、右、下、左。如果没有写下的话,那就下复制上的,同理左复制右的值。

    因此, 你应该明白了

    1. 当padding的值只有一个时,就是后面三个都复制了第一个

    2. 当写两个时,就是写了top和right,因此bottom复制top,left复制right

    3. 当写了三个时,就是写了top,right,bottom,因此left复制right。

    这么简单的规则,再也不会忘记了吧。

    第十问:内边距的百分数值是这么计算的

    我们知道,padding可以这么设置

    padding:100px

    也可以

    padding:20%

    那当是百分比时是怎么计算的呢?

    这不是很简单的问题吗?

    就是根据父元素的宽度计算的

    第十一问:那为什么不根据自己的宽度呢?而要根据父元素

    好家伙,我说怎么问那么简单的问题,原来是为了这个问题做铺垫

    这个问题可以这么思考,如果不根据父元素,而是根据本身的宽度的话。那么当padding生效后,本身的宽度不就变大了吗?那么padding不是也要变大吗?这就陷入了死循环(哇塞!)。

    或者要是本身没有宽度,那岂不是怎么设置padding都是无效的!!!

    第十二问:什么是边距重叠?什么情况下会发生边距重叠?如何解决边距重叠?

    边距重叠:两个box如果都设置了边距,那么在垂直方向上,两个box的边距会发生重叠,以绝对值大的那个为最终结果显示在页面上。

    边距重叠分为两种:

    1. 同级关系的重叠

    同级元素在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个**

            .fat {          background-color: #ccc;      }      .fat .child-one {          width: 100px;          height: 100px;          margin-bottom: 30px;          background-color: #f00;      }
      .fat .child-two {      width: 100px;      height: 100px;      margin-top: 10px;      background-color: #345890;  }

       ```

    1. 父子关系的边距重叠

    父子关系,如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距。

    给父元素添加 overflow:hidden 这样父元素就变为 BFC,不会随子元素产生外边距,但是父元素的高会变化

            #fat {          background-color: #f00;          overflow: hidden;      }      #fat .child {          margin-top: 10px;          height: 100px;          background-color: blue;      }  

    第十三问:第二种哪里算是外边距重叠???

    实际上,这也是第一种的变形。

    header {  background: goldenrod;}h1 {  margin: 1em;}  

    Welcome to ConHugeCo

    d1b59cf01840c8bbe82df367b05a7127.png

    可以看到其实是header的margin为0,然后h1的margin为1em,因此header和h1的margin发生了重叠,然后header的margin就取1em和0两个值中最大的值了,所以当然取1em啦。

    (网上有说是因为margin的传递性,但我并不同意,因为我实践了一下,发现不管父盒子有没有margin-top,父盒子只会选择两者值中的最大值,跟传递性似乎没啥关系)

    第十四问:为什么回出现margin重叠的问题?粗俗点就是问设计者的脑子有问题吗?

    这个就是问设计了margin重叠的巧妙用处。

    这个曾经有位面试官问过我,我不知道,我请教了他,他说,在flex布局前,要实justify-content:space-evenly的效果,利用浮动布局,然后给每个盒子设置margin-right,margin-left就可以实现了,这样就不用去单独地再去设置第一个盒子的margin-left和最后一个盒子的margin-right,那时候我信了。

    后来越想越不对,不是说margin水平方向不会发生重叠问题吗????

    但是根据面试官的思路来的话,在垂直方向似乎就讲的通了。

      body{    background-color: gray;  }  ul{    width: 300px;    height: 170px;    background-color: blue;    border: 1px solid;  }  li{    margin-top: 20px;    margin-bottom: 20px;    width: 40px;    height: 30px;    background-color: orange;  }                
    9a8e76af406cb1b15d69535ea5a96859.png

    或许你有更好的说法,欢迎下方留言评论补充!!!

    那该怎么解决margin边距重叠的问题呢?

    解决方法就是生成BFC

    第十五问:什么是BFC?

    BFC的基本概念–BFC就是“块级格式化上下文”的意思,也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。通俗的讲,就是一个特殊的块,内部有自己的布局方式,不受外边元素的影响。

    第十六问:那么BFC的原理是什么呢?

    1. 内部的Box会在垂直方向上一个接一个的放置

    2. 垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠(塌陷),与方向无关。)

    3. 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)

    4. BFC的区域不会与float的元素区域重叠

    5. 计算BFC的高度时,浮动子元素也参与计算

    6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

    第十七问:BFC由什么条件创立?

    1. float属性不为none

    2. position属性为absolute或fixed

    3. display属性为inline-block、table-cell、table-caption、flex、inline-flex

    4. overflow属性不为visible(- overflow: auto/ hidden;)

    总结:pdfo

    第十八问:BFC的使用场景有哪些呢

    1. 可以用来自适应布局。

                          #layout{            background: red;          }          #layout .left{            float: left;            width: 100px;            height: 100px;            background: #664664;          }          #layout .right{            height: 110px;            background: #ccc;            overflow: auto;          }                            
    1. 可以清除浮动:(塌陷问题)

              #float{        background: #434343;        overflow: auto;      }      #float .float{        float: left;        font-size: 30px;      }    
    我是浮动元素
    1. 解决垂直边距重叠:

                #margin{            background: pink;            overflow: hidden;        }        #margin>p{            margin: 5px auto 25px;            background: red;        }        #margin>div>p {            margin: 5px auto 20px;            background: red;        }    

    1

    2

    3

    第十九问:清除浮动的方法(最常用的4种)

    这时候很多人会想到新建标签clear:both和float 方法,但是这两种方法并不推荐使用!

    什么是clear:both

    clear:both:本质就是闭合浮动, 就是让父盒子闭合出口和入口,不让子盒子出来

    1. 额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)

                    Document        .fahter{        width: 400px;        border: 1px solid deeppink;    }    .big{        width: 200px;        height: 200px;        background: darkorange;        float: left;    }    .small{        width: 120px;        height: 120px;        background: darkmagenta;        float: left;    }    .footer{        width: 900px;        height: 100px;        background: darkslateblue;    }    .clear{        clear:both;    }    
    big
    small
    额外标签法
    7d39b5ce28165e708c121ca4a2fe1b33.png

    如果我们清除了浮动,父元素自动检测子盒子最高的高度,然后与其同高。

    优点:通俗易懂,方便

    缺点:添加无意义标签,语义化差

    不建议使用。

    1. 父级添加overflow属性(父元素添加overflow:hidden)(不推荐)

    通过触发BFC方式,实现清除浮动

    .fahter{    width: 400px;    border: 1px solid deeppink;    overflow: hidden;}

    优点:代码简洁

    缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素

    不推荐使用

    1. 使用after伪元素清除浮动(推荐使用)

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/    content: "";    display: block;    height: 0;    clear:both;    visibility: hidden;}.clearfix{    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/}    
    big
    small

    优点:符合闭合浮动思想,结构语义化正确

    缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.

    推荐使用

    1. 使用before和after双伪元素清除浮动

     .clearfix:after,.clearfix:before{    content: "";    display: table;}.clearfix:after{    clear: both;}.clearfix{    *zoom: 1;} 
    big
    small

    优点:代码更简洁

    缺点:用zoom:1触发hasLayout.

    推荐使用

    1. 浮动父元素

    img{  width:50px;  border:1px solid #8e8e8e;  float:left;}

    这种方式也不推荐,了解即可。

    如果有不对的地方欢迎留言交流与补充 也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章中

    源自:https://juejin.im/post/6880111680153059341

    声明:文章著作权归作者所有,如有侵权,请联系小编删除。

    感谢 · 转发欢迎大家留言

    92d9df41b353392af3449338169ba79b.png

    展开全文
  • 内外边距:2.1margin:外部盒子盒子,外边距2.2padding:盒子和物体,那边距2.3Border:边框2.4content:盒子内容,文本图片2.5塌陷问题:只会出现在垂直方向!兄弟塌陷:如果上下两个元素都有设置相对的margin值,...

    Web-css


    1.地址:绝对,相对

    图片,链接,css


    2.内外边距:

    2.1margin:外部盒子与盒子,外边距

    2.2padding:盒子和物体,那边距

    2.3Border:边框

    2.4content:盒子内容,文本与图片

    2.5塌陷问题:只会出现在垂直方向!

    兄弟塌陷:如果上下两个元素都有设置相对的margin, 则选择大的添加, 小的不添加.同级

    父子塌陷:如果父级 div 中没有 border,   padding,   inline content(文本), 子级 div margin 会一直往上找,直到找到某个标签包括 border,  padding,   inline content(文本) 中的其中一个, 然后按此 div 进行 margin.

       

      

      




    2.6 padding 三种写法:4个为顺时针

    padding20px 40px 50px; /* 设置顶部内边距为20px,左右内边距为40px,底部内边距为50px */ 上(左右)下

    padding20px 40px; /* 设置上下内边距为20px,左右内边距为40px*/  (上下)(左右)

    padding20px; /* 设置四边内边距为20px */ 四周

    2.7margin padding相同

    外间距居中技巧 

    如果子元素是元素,且它的宽度小于父元素,可以将子元素左右设置auto来水平居中子元素

    /* 子元素上下外边距设为0,左右设置为auto */

    margin:0px auto;




    3.盒子模型: 

    3.1 盒子:把元素叫做盒子,设置对应的样式分别为:盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)

    一般所说的设置宽高指的是内容:

    也就是说设置盒子的宽度,此宽度是指盒子内容的宽度,不是盒子整体宽度(难点);设置盒子的高度,此高度是指盒子内容的高度,不是盒子整体高度(难点)



    4.列表:标签

    4.1无序:

    一般应用在布局中的新闻标题列表和文章标题列表以及菜单

     写法:   ul>li{列表标题}*3.   

    ul>(li>a[href=#]{列表标题 $})*3  一般是超链接

    4.2 有序列表:

    写法:        ol>li{列表标题}*3


    5.表单:form

    5.1 属性:

    action

    method get port

    5.2 表单标签

    label:文字标注

        注:for属性可以和inputid属性一致,可以点击label触发input focus效果。

    input

    type属性:文本框text,密码框password,单选框radiocheckbox复选框,file上传文件,submit提交表单,reset重置表单,button普通按钮。

    value属性:表单值

    name:表单元素名称,一般提交表单时键名

    textarea:多行文本 输入框

    placeholder:默认提示信息

    cols 列数。  rows行数

    select>option*n:下拉表单组合



    6.表格:

    Table  表格标签—Tr行标签—Td列标签—Th列中标题标签

    Cols 列合并,水平 rows 行合并,垂直。

    border-collapse 设置表格的边线合并

    如:border-collapse:collapse;

    border='1'  可以设置table的边框大小

    text-align  可以设置对齐方式:  left  right  center



    7.css 进阶

    7.1文本属性:

    text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中

    text-indent 设置文字首行缩进,如:text-indent:32px; 设置文字首行缩进32px


    7.2display属性:设置元素类型及隐藏

    none   元素隐藏且不占位置

    block  此元素会被显示为块元素, 若无内容,也为隐藏

    inline 此元素会被显示为内联元素,若无内容,相当于隐藏

    inline-block 行内块元素 ( 了解 )





    7.2.font属性补充: 




    7.3.css溢出


    Overflow

    visible 默认值。内容不会被修剪,会呈现在元素框之 外。  

    hidden 内容会被修剪,并且其余内容是不可见的。

    scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

    auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。





    展开全文
  • 菜鸟小笔记3 2019年8月29日周四 20:57 重庆 以下内容来自老师授课时所摘抄笔记,如有冒犯,接受私信~ ...外边距与内边距的区别: 外边距是元素之间的距离,而内边距是内容与边界的距离; 外边距不会增加元素...

    菜鸟小笔记3

    2019年8月29日周四 20:57 重庆
    以下内容来自老师授课时所摘抄笔记,如有冒犯,接受私信~

    今日内容

    1、常用样式规则(day04里“CSS常用样式规则-边距.html”)
    ①边框(border:宽度 样式 颜色)
    ②边框圆角(border-radius:数字+单位)
    ③边距
    外边距与内边距的区别:

    • 外边距是元素之间的距离,而内边距是内容与边界的距离;
    • 外边距不会增加元素本身宽高,而内边距则会增加自身宽高
    何时使用内外边距
    • 外边距设置在子级元素上且父级元素没有外边距或者未脱离文档流的情况之下,子级元素的外边距会作用与父级元素之上,此时若想拉开子级元素和父级元素的距离,应用内边距
    • 内边距在需要给元素增加宽度或者高度时使用,可直接设置内容在一定区域之内居中并且不需要设置固定宽高,可由内容决定
    边距方向设置
    • 边距属性名+top/left/right/bottom:数字+单位
    • (四个取值) 边距名: 上边距 右边距 下边距 左边距;
    • (三个取值) 边距名: 上边距 左右边距 下边距;
    • (两个取值)上下边距 左右边距;
    • (一个取值) 边距名:上下左右边距;
    盒子模型(box-sizing)
    • content-box(内容盒子模型/默认值)
      1. 元素网页显示宽高 = 宽高 + 内边距 + 边框
      2. 元素网页实际宽高 = 宽高 + 内边距 + 边框 + 外边距
    • border-box(边框盒子模型)
      1. 元素网页显示宽高 = 宽高(边框与内边距会压缩内容)
      2. 元素网页实际宽高 = 宽高 + 外边距
    • content-box VS border-box
      1. content-box元素宽高不可控,border-box一旦设置宽高,就固定死了宽高,不会随着内边距和边框的增加而发生宽度与高度的改变
      2. 没有设置固定宽高时,没有content-box与border-box,但通常网页编写都会将所有的元素设置borderbox,方便计算
    *{margin: 0;padding: 0;}
            .box01,.box02{
                width: 200px;
                height: 200px;
                padding: 10px;
                margin: 10px;
            }
            .box01{
                background: blue;
                border: 5px solid pink;
                box-sizing: content-box;
            }
            .box02{
                background: red;
                border: 5px solid orange;
                box-sizing: border-box;
            }
            ·
            ·
            <div class="box01">box-sizing:content-box</div>
            <div class="box02">box-sizing:boder-box</div>
    

    ⑤元素转换属性(display)

    • block(块级元素显示)
    • inline(行内元素显示)
    • inline-block(行内块级元素显示)
    • none(空即没有)
    注意行内元素与行内块级元素受文本对齐属性控制

    ⑥背景图片覆盖

    • repeat(图片重复(默认值))
    • repeat-x(沿x轴重复)
    • repeat-y(沿y轴重复)
    • no-repeat(不重复)
    背景图片定位(background-position:X轴偏移值 Y轴偏移值)
    • 偏移值取值:(数字+单位)
      1. X轴正值向右,负值向左
      2. y轴正值向下,负值向上
    • 偏移值取值:(单词)
      1. x轴:left/center/right
      2. y轴:top/center/bottom
    以上属性简写background: url("") repeat position color;

    ⑧背景图片大小(background-size)

    • 取值:数字+单位
    • 取值:cover(横向填充直至铺满)
    背景图片固定(background-attachment:fixed)
    *{margin: 0;padding: 0;box-sizing: border-box}
            html,body{
                width: 100%;
                height: 100%;
            }
            .box01,.box02,.box03{
                width: 100%;
                height: 100%;
            }
            .box01{
                background: url("image/img05.jpg") no-repeat center center;
                background-size: cover;
                background-attachment: fixed;
            }
            .box02{
                background: url("image/img06.jpg") no-repeat center center;
                background-size: cover;
                background-attachment: fixed;
            }
            .box03{
                background: url("image/img07.jpg") no-repeat center center;
                background-size: cover;
                background-attachment: fixed;
            }
            ···
            <div class="box01"></div>
            <div class="box02"></div>
            <div class="box03"></div>
    

    透明属性(opacity:0-1)

    2、 浮动布局(元素脱离文档流,进行横向排列则是浮动,即解决行内块级元素默认间距)
    浮动只适用PC端且浮动不会对图片、文字进行覆盖
    ①浮动带来的影响(day04里“浮动带来的影响.html”)

    • 浮动元素周围会自动排列未浮动的文字或者图片
    • 子级元素浮动,父级未浮动,父级元素无法随着子级的高度而增加自身高度
    ②清除浮动(clear有五种方法)
    • 同级别清除(clear:left/right/both)
    • 子级元素浮动,父级无高度
      1. 给父级元素添加高度
      2. 在父级元素的末尾自行编写一个块级元素,无宽高,无内容,添加clear属性即可
      3. 给父级元素添加内容溢出属性为隐藏,如 parentNode{overflow:hidden;} (parentNode指父级元素)
      4. 利用伪类选择器清除
    parentNode:after{
            content: "";
            display: block;
            clear: both;
           }
    

    今日份收获

    1、如何查看图片坐标与宽高:

    • 打开PS;
    • ctrl+K 打开首选项》“单位与标尺”》将“单位”下的“标尺”“文字”的单位都改为“厘米”;
    • Fn+F8 打开属性信息;
    • 打开标尺,将其x和y轴都对准图片的“最x点”“最y点”;
    # 注意事项
    1. content-box、border-box
    2. clear有五种方法
    3. 背景图片固定(background-attachment:fixed)
    4. day04下的“CSS常用属性-背景图片.html”很有意思
    5. margin:0;padding:0;clear:left 因为p有默认间距(可在html里寻找查看相关案例,即*先设置)

    作业

    1、classwork和classworkT试试结合(类选择器的叠加没有熟练,致老师代码比自己的简洁)且多个相同div复制时出现“一个div一个div复制会出现错乱”,整理时可见。
    2、做网页顶部时错误,待下次一起整理,同学在阅时自己有很多没用的代码。

    补充

    1. 内边距会改变自身宽高
      行内元素无法设置宽高

    快捷键webstorm

    1、同一文本不同位置一次粘贴:需要复制的文本ctrl+c,按住alt 用光标点需要 ctrl+v的位置

    展开全文
  • 一、什么是“块级元素”“行内元素”?能够在同一行显示的标签就是,行内元素。不能够在同一行显示的标签,就是块级元素。...替换行内元素(设置内外边距)非替换行内元素(不能设置垂直的外边距,可以设置左...
  • 为子元素添加距上的外边距,作用于父元素上:为父元素设置上边框(可以使用透明色)或者为父元素添加顶部的内边距padding-top:0.1px; 二、内边距:元素内容元素边框之间的距离 padding:10px; 设置上...
  • 块级元素行内元素块级元素: 在默认情况下,块级元素可以独占一行 块级元素可以设置宽和高 如果不设置宽高,其中宽就是默认填满父元素,高是由内容决定(由内容撑起) 如果设置,就是设置的宽和高 给块级元素...
  • WEB开发设计1

    2020-03-11 01:16:53
    高度、行高以及外边距内边距都可控制; c.宽度默认是它容器的100%,除非设定一个宽度; d.他可以容纳内联元素和其他块元素。 <div> <form> <h1> <hr>:水平分隔线 <li> <ol> &...
  • 1、盒模型是CSS的基石之一,每个元素被看做是一个矩形框,这个框有元素的内容、内边距、边框和外边距组成。如果给元素添加背景,则背景处于元素以及其内边距组成的区域。 CSS2.1还支持outline属性,border属性...
  • 文章目录盒子模型1. 基础概念2. 外边距3. 边框1) 边框实现2) 单边...​ 盒子模型分别由外边距、边框、内边距和标签内容组成。 2. 外边距 属性:margin 作用:调整标签标签之间的距离 特殊: 1)margin:0;...
  • 边框以外是外边距外边距默认是透明的,因此不会遮挡其后的任何元素。 默认情况下,元素的宽度高度计算方式如下: width(宽) + padding(内边距) + border(边框) = 元素实际宽度 height(高) + padding(...
  • web前端的基本知识

    2013-02-02 22:28:08
    DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。DOM操作——怎样添加、移除、移动、复制、创建和查找节点。事件——怎样使用事件...盒模型——外边距内边距和边框之间的关系,IE 块级元素
  • web初探-css-盒模型

    2019-08-03 15:14:50
    盒模型: 相框边框 - > border 画和相框边框的距离 -> padding 相框之间的距离 ->...用 padding 设置内边距 外边距 用 margin 设置外边距 网页布局盒模型 1,标准文档流 标准文档流:指在不使用其他...
  • web@css盒模型详解

    2018-10-14 18:07:00
    Margin(外边距) - 清除边框外的区域,外边距是透明的。/*上 右 下 左*/ 上 左右 下 /*上下 左右*/ 四方 /Border(边框) - 围绕在内边距和内容外的边框. 可以用来画图形Padding(内边距) - 清除内容周围的区域,内边距...
  • ③宽高 高度 外边距 内边距可以控制(块级元素特点) 元素显示模式的转换 (1)行内元素转块级元素 display:block;√ (2)块级元素转换为行内元素 display:inline; (3)行内块 元素 display:inline-block√...
  • 网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模式都具备这些属性。   这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模式...
  • JAVA web中的盒子模型

    2021-02-03 19:27:14
    每个矩形都由元素的内容、内边距、边框、外边距组成。 例: 认识盒子模型 盒子中包含的内容 2.标记: division意为 区域、分割。是一个区块容器标记,可以将网页分割成独立的、不同的部分,以实现网页的规划和...
  • 01大前端开发和全栈开发的定义.avi 02前端开发基础视频-视频内容介绍.avi 03前端开发基础视频-操作系统常用设置.avi 04前端开发基础视频-操作系统通用快捷键操作... 95前端开发基础视频-CSS外边距margin的详解.avi
  • 最明显的是ul标签内外边距问题,ul标签在IE-7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距。 解决办法:*{margin:0;padding:0;} IE8不兼容总结点我查看 input 聚焦框颜色样式不同 ...
  • 页面元素皆为框(盒子),定义了元素框处理元素内容,内边距外边距以及边框的计算方式。 二、外边距 围绕在元素边框外的空白距离(元素元素之间的距离) 语法:margin,定义4个方向的外边距 1、单边定义:margin-...
  • 一填空题共10题 1.CSS样式定义优先级顺序是 _ 2.对ul li的样式设成无应该...改变元素的外边距用_改变元素的内边距用_ 7.在Table中th是,tr是_td是_ 8.请将下面五行代码进行缩写注意代码缩写规范 #box { background-posi
  • 1.前端页面有哪三层构成,分别是什么?作用是什么? a....解决了页面”内容是什么”的问题。 b.... c....解决了页面上“内容应该如何对...盒子有四个边界:外边距边界margin, 边框边界border, 内边距边界padding内容边界cont
  • CSS 行内元素块级元素 元素的类型 CSS中将元素...之相反span 和 strong 等元素称为行内元素这是因为它们的内容显示在行中即行内框也称为行内元素在布局页面时行内元素不会独占一行同时垂直内边距边框和外边距不影响
  • 1.简介 页面中所有元素都可以看成一个盒子,并占据着一定的页面空间。一个页面上很多这样的盒子组成,盒子间相互影响。 盒子模型由下面4个属性组成,还有宽度width高度height两大辅助... (内边距)用于定义内容...
  • 内边距 padding *** 外边距 margin *** 列表样式 * 鼠标形状 *** 定位 ***** 默认定位(static定位) ***** 如何修改 默认定位情况 元素分类: ***** 相对定位 ***** 绝对定位 ***** 固定定位 ***** ...
  • CSS盒子模型怪异盒模型盒子模型(Box Modle)可以用来对元素进行布局,包括内边距(padding),边框(border),外边距(margin),和实际内容(content)这几个部分。标准盒模型标准盒模型中盒子的大小是指:content + ...
  • CSS教程 介绍 CSS是什么? CSS的工作原理 ...盒状模型——外边距内边距 盒状模型——边框 盒状模型——高度和宽度 浮动元素(float) 元素的定位 用z-index进行层次堆叠 Web标准验证
  • 1.前端页面有哪三层构成,分别是什么?作用是什么? ...解决了页面”内容是什么”的问题。 表示层:由CSS负责创建,解决了页面...盒子有四个边界:外边距边界margin, 边框边界border, 内边距边界padding内容边界content

空空如也

空空如也

1 2 3
收藏数 48
精华内容 19
关键字:

web外边距与内边距