任务10 CSS浮动定位

2017-07-16  本文已影响0人  饥人谷_哈噜噜
浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
清除浮动指什么? 如何清除浮动? 两种以上方法
  1. clear
    在浮动元素末尾加新的空标签，给其设置属性clear：both 
html:
<div class="ct">
   <div class="box" id="box1"></div>
   <div class="box" id="box2"></div>
   <div class="box" id="box3"></div>
   <div class="empty"></div>
 </div>

css:
.ct {
      border: 3px solid #000;
      width: 300px;
}
.box {
  width: 100px;
  height: 100px;
  float: left;
}
#box1 {
  background: red;
}
#box2 {
  background: green;
}
#box3 {
  background: blue;
}
.empty {
  clear: both;
}
clear示例
  1. BFC(块级格式化上下文)
    后面详细说~
  2. ：after
    作用于浮动元素的父容器，加class="clearfix"，目前通用的清理浮动的方法
方法1：
.clearfix {
        *zoom: 1;/*页面缩放为1，可触发IE6 7 的layout特性，实现类似BFC的作用*/
}
.clearfix:after {
        content: " ";
        display: block;
        clear: left;
}

方法2：
.clearfix {
       *zoom: 1;
}
.clearfix:after {
       content: " ";
       display: table;
       clear: both;
}
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
属性值 描述
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative 生成相对定位的元素，相对于其正常位置进行定位。
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 
html:
<div class="ct">
   <div class="box" id="box1"></div>
   <div class="box" id="box2"></div>
   <div class="box" id="box3"></div>
   <div class="empty"></div>
 </div>

css:
.ct {
    border: 3px solid #000;
    width: 200px;
}
.box {
  width: 100px;
  height: 100px;
}
#box1 {
  background: red;
}
#box2 {
  background: green;
}
#box3 {
  background: blue;
}
.empty {
  clear: both;
}
普通流 
css:
.ct {
    border: 3px solid #000;
    width: 200px;
}
.box {
  width: 100px;
  height: 100px;
}
#box1 {
  background: red;
}
#box2 {
  background: green;
  position: relative;
  top: 20px;
  left: 20px;
}
#box3 {
  background: blue;
}
.empty {
  clear: both;
}
相对定位 
css:
.ct {
    border: 3px solid #000;
    width: 200px;
}
.box {
  width: 100px;
  height: 100px;
}
#box1 {
  background: red;
}
#box2 {
  background: green;
  position: absolute;
  top: 20px; 
  left: 20px;
}
#box3 {
  background: blue;
}
.empty {
  clear: both;
}
绝对定位 
css:
.ct {
    border: 3px solid #000;
    width: 200px;
   margin: 100px;/*区别position：absolute*/
}
.box {
  width: 100px;
  height: 100px;
}
#box1 {
  background: red;
}
#box2 {
  background: green;
  position: fixed;/*位置不随滚动条的改变而变*/
  top: 20px; 
  left: 20px;
}
#box3 {
  background: blue;
}
.empty {
  clear: both;
}
固定定位
z-index 有什么作用? 如何使用?
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
<div class="ct ct1">
   <div class="box" id="box1">position:relative</div>
   <div class="box" id="box2">position:relative</div>
   <div class="box" id="box3">position:relative</div>
   <div class="empty"></div>
 </div>
 <div class="ct ct2">
   <div class="box" id="box4">margin</div>
   <div class="box" id="box5">margin</div>
   <div class="box" id="box6">margin</div>
   <div class="empty"></div>
</div>

.ct {
    border: 3px solid #000;
    width: 200px;
    float: left;
}
.box {
  width: 100px;
  height: 100px;
}
#box1 {
  background: red;
}
#box2 {
  background: green;
  position: relative;
  top: 20px; 
  left: 20px;
}
#box3 {
  background: blue;
}
#box4 {
  background: red;
}
#box5 {
  background: green;
  margin-top: 20px;
}
#box6 {
  background: blue;
}
relative和margin对比
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
HTML
<body>
 <div class="ct">
  <div class="aside">
     <h4>举例：浮动元素覆盖</h4>
     <p>我是左边栏的内容</p>
  </div>
  <div class="content">
    <h4>举例：浮动元素覆盖</h4>
    <p>我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容我是右边栏的内容</p>
  </div>
 </div>
</body>

CSS
.ct {
  border: 1px solid;
}
.aside {
  width: 160px;
  height: 100px;
  border: 1px solid;
  background: red;
  float:left;
}
.content {
  margin-left: 180px;//文字不会围绕浮动元素
}
未加BFC.png
加BFC 
HTML
<body>
 <div class="ct">
   <div class="box1">
     举例：包含浮动元素
   </div>
   <div class="box2">
     举例：包含浮动元素
   </div>
 </div>
</body>

CSS
.ct {
  background: red;
  float: left; //包含浮动元素
}
.box1,.box2 {
  width: 150px;
  height: 150px;
  border: 1px solid;
  float: left;
}
未给父元素加BFC.png
给父元素加BFC.png
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
  1. 两个margin都是正值的时候，取两者的最大值；
  2. 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
  3. 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
  4. 所有毗邻的margin要一起参与运算，不能分步进行。
HTML
<body>
 <div class="box">
   <div class="content">
     举例：垂直外边距折叠
   </div>
 </div>
</body>

CSS
.box {
  width: 150px;
  height: 140px;
  border: 1pxsolid;
  background: red;
  overflow: hidden;//清除浮动
}
.content {
  background: yellow;
  margin: 40px;
}```
![未加overflow，margin无效](https://img.haomeiwen.com/i6426975/19e9cbbc2a82b22a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![加overflow.png](https://img.haomeiwen.com/i6426975/a3da06c606e29328.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


[alert效果](http://js.jirengu.com/gejuvuduju/1/edit?html,css,output)
[表单效果](http://js.jirengu.com/daritenola/1/edit?html,css,output)
[模态框效果](http://js.jirengu.com/fonukevazu/1/edit?html,css,output)
[导航栏效果](http://js.jirengu.com/gidutopexe/1/edit?html,css,output)
- **收获**：
 1. 组合选择器： .box input[type=text]

 2. 删除表单文本输入框的边框和轮廓

.box input[type=text],
.box textarea {
border: none;
display: block;
border-bottom: 1px solid #808080;
}
.box input[type=text]:focus,
.box textarea:focus {
outline: none;
}


######参考资料
[浅析BFC及其作用](http://blog.csdn.net/riddle1981/article/details/52126522)
[BFC神奇背后的原理](http://blog.sina.com.cn/s/blog_a034e55f0102ww4q.html)
[CSS中zoom:1的作用 ，小标签大作用](http://blog.sina.com.cn/s/blog_a034e55f0102wvib.html)
上一篇 下一篇

猜你喜欢

热点阅读