关于CSS浮动定位的问答

  1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
    浏览器按html文件顺序一个个摆放元素时,当执行到浮动元素时,会将它从正常的文档流中删除,按照float的要求向左或向右摆放元素,直到碰到父元素的边界。若父元素没有设置宽度,则会一直向左或向右到浏览器窗口的边界。
  • 对父元素:如果父元素未设置高度,且子元素都是浮动元素,就会发生父元素高度塌陷的情况,即父元素认为它不包含任何元素,高度变为0。
  • 其他浮动元素:其他浮动元素能感受到别的浮动元素的存在,在父元素宽度不够时会发生浮动元素下移现象,如果浮动元素的高度不同,那么向下移动的时候可能被卡住。
  • 普通元素:普通元素察觉不到浮动元素的存在,在布局时不考虑浮动元素布局。
  • 文字:文字能考虑到浮动元素的存在,在布局时会绕过浮动元素。
  1. 清除浮动指什么? 如何清除浮动? 两种以上方法
    清除浮动指的是解决子元素都是浮动元素时父容器高度塌陷问题。
  2. 可以在父元素的最后加上一句<div style="clear:both;"></div>,优点是有效的清除了浮动,缺点加上了一句无意义的语句,容易使人出现理解困难。
    2.可以对父元素设置float为left或right,局限性时是使父元素也成为浮动元素,父元素的父元素可能发生高度塌陷。
  3. 可以对父元素设置overflow为hidden、auto、scroll其中的值,局限性时当父元素时导航栏或者需要展开的元素时,功能会失效。
  4. 可以对父元素设置display为table-cell、table-caption、inline-block其中的值,局限性时这样设置时,父元素的宽度如果未设置的话会发生缩短。
  5. 可以对父元素设置position为absolute或fixed,局限性是改变了父元素的定位方式,使父元素从正常的文档流中删除,位置能人为手动调整。
  6. 通用的清除浮动方式:
 .clearfix{
      *zoom:1;
  }
  .clearfix:after{
      content:"";
      display:block;
      clear:left;
  }
  1. 有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?
  • inherit:定位方式从父元素继承
  • static:默认的定位方式,由正常的文档流分配位置
  • relative:相对定位方式,先由正常的文档流分配位置,而后相对于这个位置偏移,一个萝卜一个坑,坑在原位,萝卜跑路了。一般用来微调图片等。
  • absolute:绝对定位方式,从文档流中删除,相对于除static定位以外的第一个祖先元素(如祖先元素都是static定位方式,则相对于html元素)进行定位,当元素设置了top,left(right,bottom同理)的值时,参考点为内边框;若未设置,参考点为内padding。在设置一个精确定位的元素时使用。
  • fixed:绝对定位方式,从文档流中删除,相对于浏览器窗口放置元素,不随网页变换改变位置。一般在设置弹窗,“回到顶部”的栏的时候使用。
  1. z-index 有什么作用? 如何使用?
    z-index可用来设置元素z值的大小,可设置正负的z值。z值大的元素会覆盖z值小的元素。一般 z-index会在具有很多绝对定位元素时使用。
  2. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
    形象的说,一个萝卜一个坑,position:relative是坑没走,萝卜移动了,对其他的元素无影响;而负margin是坑和萝卜一起走了,对其他的元素会有影响。
    6.BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明
    BFC是块元素格式化文本,可通过设置float为left或right,设置overflow为hidden、auto、scroll其中的值,设置display为table-cell、table-caption、inline-block其中的值,设置position为absolute或fixed来生成BFC。不同的BFC之间不会发生外边距合并,BFC不会重叠浮动元素且可以包含浮动(清除浮动,防止父容器塌陷),问题2的方法2~5就是通过BFC清除浮动。
  3. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例
    当垂直方向上外边距相互触碰(没有边框和内边距阻隔)时,会发生外边距合并,合并方式为选择两者中更大的那个外边距作为两者共同的外边距。想要不让相邻元素外边距合并可以给其中加上内边框或边框阻隔,也可以使用创建BFC,阻止外边距合并。
    范例:


    Paste_Image.png

    这是当时困惑我好久的问题,“风景如画”明明设置了16px的外边距,下外边距却消失了,但其实是发生了外边距合并,“风景如画”下外边距与整个框的下外边框0发生了合并,见下图。

Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 855评论 0 4
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 928评论 0 2
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 何谓浮动元素?有什么特征?所谓浮动...
    草鞋弟阅读 808评论 0 1
  • 问:一台18.5KW锅炉引风机安装一台18.5KW的变频器,变频器安装好后一启动,配电房分闸就跳...
    c66b2f21b001阅读 664评论 0 0