问答作业-2017.1.20

2017-01-22 本文已影响0人黑猫乄

内联元素如何转化为块元素？
*嗯，直接转换即可，代码如下： *
<span style="display:block">内联元素变为块元素</span>
元素类型有哪些？他们的特征分别是什么？
元素类型共有三种：块元素、内联元素、内联块元素。
1.块元素(block)
①在没有设置宽度时(仅仅是宽度，长度不可)，默认撑满一行
②默认款元素独占一行
③支持所有的css命令
2.内联元素(inline)
①宽高由内容撑开
②不支持宽高声明
③一行上可以显示继续跟同类的标签
④不支持上下的margin
⑤代码换行被解析
3.内联块元素(inline-block)
①块元素在一行显示
②行内属性标签（内联元素）支持宽高
③没有宽度的时候内容撑开宽度
④标签之间d的换行被解析
⑤ie6 ie7 不支持快属性标签的inline-block
清浮动有哪些方法?你最喜欢哪个？为什么？
清除浮动的方法：
1.加高度（扩展性不好）
2.给父级加浮动（页面中所有元素都加浮动，margin左右自动失效【floats bad】）
3.inline-block清浮动（margin左右auto失效）
4.空标签清浮动（ie6最小高度19px；【解决后ie6下还有2px偏差】）
5.br清浮动（不符合工作中：结构、样式、行为三者分离的要求）
6.after伪类清浮动【主流】
.clear:after
{ content:"";
display:block;
clear:both; }
.clear{zoom:1;}
7.overflow清除浮动；
至于说我最喜欢什么方法去清除浮动，当然是after伪类清浮动了，原因是它是一种最主流、毫无副作用的清浮动方法，适配于所有的浏览器
什么是BFC？如何才能得到一个BFC？
额，BFC（block formatting content)标准浏览器/块级元素格式化上下文，即除了ie6、ie7的浏览器（ie8算半个BFC）
触发BFC的方法：
a、float的值不为none
b、overflow的值不为visible
c、display的值为table-cell、table-caption、inline-block中的任何一个
d、position的值不为relative和static
e、width/height/min-width/min-height：（！auto）
Position的值有哪些？
a、relative（相对定位）
![1]
[1]:http://images2015.cnblogs.com/blog/762322/201701/762322-20170117235925218-623115054.jpg

生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
b、absolute（绝对定位）
![2]
[2]:http://images2015.cnblogs.com/blog/762322/201701/762322-20170118000039125-372124008.jpg

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
c、fixed（固定定位）
![3]
[3]:http://images2015.cnblogs.com/blog/762322/201701/762322-20170118000223250-1648459911.jpg
生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

说一下绝对定位，相对定位和固定定位的区别
1、相对定位不会失去文档流中的位置，而绝对定位和固定定位都会失去原来在文档流中的位置而被下面的替代；
2、无论是相对、绝对还是固定定位，当偏移量超出上面、左边浏览器窗体（或者说超出可视区域）的时候，超出的内容都会被隐藏；而超出下面和右边的时候，相对定位和固定定位会隐藏超出的部分内容，而绝对定位会出现滚动条。
3、只有固定定位在无论页面如何转动时，盒子显示的位置不变
怎么改变一个div的层级，写出代码让DIV1在DIV2下
可用z-index：某数字；改变div的层级，数字越大，层级越高，越后执行
代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>改变层级</title>
<style>
    div{
      width: 300px;
        height: 300px;
        }
    .box{
        margin: 100px auto;
        position:relative;
        
    }.div1{
        background-color: blue;
        border: 1px solid #000;
        position: absolute;
        left: -6px;
        top: -6px;
        z-index: 1;
        
    }
    .div2{
        background-color: red;
        border: 1px solid #000;
        position: absolute;
        right: -6px;
        bottom: -6px;
    }
</style>
</head>
<body>
<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>    
</div>
</body>
</html>

如何实现层叠的DIV1与DIV2，上面DIV1不透明下面DIV2透明？
透明度代码用opacity：某数字；数字取值范围为[0,1]
代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>改变层级</title>
<style>
    div{
      width: 300px;
        height: 300px;
        }
    .box{
        margin: 100px auto;
        position:relative;
        
    }.div1{
        background-color: blue;
        border: 1px solid #000;
        position: absolute;
        left: -6px;
        top: -6px;
        z-index: 1;
        
    }
    .div2{
        background-color: red;
        border: 1px solid #000;
        position: absolute;
        right: -6px;
        bottom: -6px;
                opacity:0.5;
    }
</style>
</head>
<body>
<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>    
</div>
</body>
</html>

合并行属性，合并列属性
行单元格的合并
<td colspan="2"></td> 2：合并两个行单元格
列单元格的合并
<td rowspan="2"></td> 2：合并两个列单元格
让DIV水平垂直居中
代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8"><title>无标题文档</title>
<style>.box{
              width: 200px;
              height: 200px;
              background: red;
              position:absolute;
              left:508px;
              top: 96px;
              }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

问答作业-2017.1.20

猜你喜欢

热点阅读