黑马程序员技术交流社区

标题: 【长沙校区】2017最新web前端经典面试题之脱离文档流的方... [打印本页]

---

作者: 长沙-小知姐姐    时间: 2017-4-13 10:50
标题: 【长沙校区】2017最新web前端经典面试题之脱离文档流的方...

脱离文档流的方式

对面试官心里揣测：对基本功的考核，首先可以从块级和行内元素聊起。在讲脱离文档流的方式。{:8_536:}

1.block元素独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

• inline元素不会独占一行，多个相邻的会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
• inline元素设置width、height属性无效。
• inline元素的margin和padding属性。
• 水平方向的padding-left, ..-right,..-left, ..-right都产生边距效果；但竖直方向的padding-top, ..-bottom, ..-top, ..-bottom不会产生边距效果。
• 这些是以上两个的文档流排列方式？
  

2.文档流：元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流的方式：绝对定位absolute和浮动float。

3.脱离文档流：

   也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

     

              使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。

      

                     而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

                           Fixed,固定定位！

---

作者: 长沙-小知姐姐    时间: 2017-4-13 16:48
沙发

---

作者: 彭小豆    时间: 2017-4-14 09:09
来来来来来来来来过   

---

作者: 彭豆豆    时间: 2017-4-17 14:24

---

作者: wowandy    时间: 2018-1-8 20:14
inline 有padding ，上下左右都有

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2