ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

第三天

2021-02-20 18:32:52  阅读:161  来源: 互联网

标签:浮动 after 元素 第三天 zoom 设置 使用


1-在一个页面中给多个元素设置同样的 id,会导致什么问题?
id一个页面只可以使用一次,class可以多次引用。
第一影响就是不能通过W3的校验
在页面显示上,目前的浏览器还都允许你犯这个错误,用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div,那就会出现错误。
2-用伪类实现一个上三角(代码)
3-怎么让一个不定宽度的 div 实现垂直和水平居中(三种方法 代码)?
方式一: 使用css方法:
父盒子设置: display: table-cell; text-align: center; vertical: middle;
div设置: display: inline-block; vertical-align: middle;
方式二: 使用css3 transform:
父盒子设置: position: relative;
div设置: left: 50%; top: 50%; transform: translate(-50% -50%);
方法三:使用CSS3 flex
父盒子设置:display:flex;justify-content:center;align-items:center;
4-清浮动的方式有哪些?
一、 额外标签法: 给谁清除浮动,就在其后额外添加一个空白标签 。
优点: 通俗易懂,书写方便。(不推荐使用)
缺点: 添加许多无意义的标签,结构化比较差。

给元素small清除浮动(在small后添加一个空白标签clear(类名可以随意),设置clear:both;即可)

 

二、 父级添加overflow方法: 可以通过触发BFC的方式,实现清楚浮动效果。必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度

优点: 简单、代码少、浏览器支持好

缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。不能和position配合使用,因为超出的尺寸的会被隐藏。

注意: 别加错位置,是给父亲加(并不是所有的浮动都需要清除,谁影响布局,才清除谁。)

 

三、使用after伪元素清除浮动: :after方式为空元素的升级版,好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after,,zoom(IE专有属性)可解决ie6,ie7浮动问题(较常用推荐)

优点: 符合闭合浮动思想,结构语义化正确,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)

缺点: 由于IE6-7不支持:after,使用zoom:1,触发hasLayout。

 

四、使用before和after双伪元素清除浮动:(较常用推荐)

优点: 代码更简洁

缺点: 用zoom:1触发 hasLayout.
5-如何让两个块级元素显示在同一行
使用float
display:inline-block;
采用flex布局:把父容器设置成弹性盒子

标签:浮动,after,元素,第三天,zoom,设置,使用
来源: https://www.cnblogs.com/haoyueyong/p/14422716.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有