Day3
1-在一个页面中给多个元素设置同样的 id，会导致什么问题？
3-怎么让一个不定宽度的 div 实现垂直和水平居中（三种方法 代码）？
1-在一个页面中给多个元素设置同样的 id，会导致什么问题？
若获取的是对象，则获取无法获取到多个同样id的元素，只能得到一个
获取的是一个集合，虽然id的相同依然可以获取到，同名的多个id
dom获取id的方法
js中封装函数获取id 获取的是一个对象，显然不能获取集合
function getId(id){ return document.getElementById(id);}
getId('id名称')
以下两个方法不支持 IE7 及以下的浏览器。
querySelector() 通过选择器获取一个元素 -- 也是对象也不行
querySelectorAll() 通过选择器获取一组元素 会将符合条件的元素封装到一个数组中返回
*******JS获取DOM元素的方法（8种）********
通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）
2-用伪类实现一个上三角（代码）
1 .tri_top{ 2 width: 150px; 3 height: 100px; 4 background: #CCCCCC; 5 border-radius: 8px; 6 margin: 50px 50px; 7 position: relative; 8 } 9 10 .tri_top:before{ 11 content: ""; 12 width: 0px; 13 height: 0px; 14 border-left: 10px solid transparent; 15 border-right: 10px solid transparent; 16 border-bottom: 10px solid #CCCCCC; 17 position: absolute; 18 top: -10px; 19 left: 65px; 20 }
3-怎么让一个不定宽度的 div 实现垂直和水平居中（三种方法 代码）？
1.使用定位属性
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);(元素宽高一半)
<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative; } #son { background-color: green; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } </style> <div id="father"> <div id="son">我是块级元素</div> </div>
2.使用flex布局实现
设置父元素为flex定位，justify-content: center; align-items: center;
<style> #father { width: 500px; height: 300px; background-color: skyblue; display: flex; justify-content: center; align-items: center; } #son { background-color: green; } </style> <div id="father"> <div id="son">我是块级元素</div> </div>
3. 伪类:before结合display: inline-block;
<style> .container{ text-align: center; } .container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .inner { display: inline-block; } </style> <div class="container"> <div class="inner"> this is a box fixed in center of screen<br>The second line </div> </div>
4-清浮动的方式有哪些？
1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
3.使用after伪元素清除浮动（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ } <body> <div class="fahter clearfix"> <div class="big">big</div> <div class="small">small</div> <!--<div class="clear">额外标签法</div>--> </div> <div class="footer"></div> </body>
4.使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; } <div class="fahter clearfix"> <div class="big">big</div> <div class="small">small</div> </div> <div class="footer"></div>
5-如何让两个块级元素显示在同一行
改变display属性
display:inline-block;
浮动
float: left;
定位
采用flex布局：把父容器设置成弹性盒子,默认主轴方向水平