coderwhy–前端知识整合包–html/css07

一、浮动float

1、定位方案：

normal flow：标准流
float：浮动
绝对定位：absoulte position
浮动和绝对定位都会让元素脱离标准流已达到灵活布局效果

2、常见取值

none、left、right

3、浮动规则

浮动元素会脱离标准流（若浮动元素跟标准流元素的行内级位置冲突，标准流的元素会跟在浮动元素之后），朝着向左或向右方向移动知道自己的元素边界紧贴着其他块（一般是父元素）或者其他浮动元素边界

层叠关系：定位元素>浮动元素>标准流元素
```
span{
background-color:#0f0;
}
strong{
background-color:#00f;
float:left;
}
<span>123</span>
<strong>5555</strong>
```

浮动元素不能与行内级元素层叠，行内级内容将会被浮动元素推出（比如所有的行内级元素、inline-block元素、块级元素的文字内容）

strong{
background-color:#00f;
float:left;
}
span{
background-color:#0f0;
}
div{
background-color:#f00;
width:100px
}
<div>kll<strong>4545454545</strong>klklkkkkk kkkkkkkkk kkkkkkkkkkkkkkkkkkkk<span>4444</span>
</div>

行内级元素、inline-block元素浮动后其顶部将与所在行顶部对齐

strong{
background-color:#00f;
float:left;
}
span{
background-color:#0f0;
}
div{
background-color:#f00;
width:100px
}
<div>kllewr werwer we w rwe w w w w ew e w ewe w rwr we w we rt dfdfsda ds sdfsdf s d s s s s sd s sf df w  j hhfdg jdf<strong>4545454545</strong>klklkkkkk kkkk kkkkk kkkkk kkkk kkkkkkk kkkk<span>4444</span>
</div>

.inner1{
width：100px;
height:100px;
background-color:#0f0;
}.inner2{
width：100px;
height:200px;
background-color:#00f;
}
.box{
height:600px
background-color:#f00;
}
<!--1、inner2进行左浮动/有浮动时候，只会在当前自己行内浮动2、inner1进行左浮动，inner2没有浮动inner2会出现在inner1下因为层叠关系3、inner1进行左浮动，inner2没有浮动但里面有文本，文本会在inner2不被inner1层叠部分排布4、inner1和inner2同时进行左浮动那么都会在第一行显示5、inner1和inner2同时左浮动，但父元素没有设置高度，那么父元素高度会坍塌-->
<div class="box"><div class="inner1"></div><div class="inner2">wo his</div>
</div>

如果元素向左/右浮动，浮动元素左/右元素边界不能超出包含块的左/右边界
浮动元素之间不能层叠
- 如果一个元素浮动，另外一个浮动元素已经在哪个位置，后浮动的元素会紧贴着前一个浮顶元素（左找左右找右）
- 如果水平方向剩余空间不够显示浮动元素，浮动元素会向下移动到有足够空间的位置浮动

浮动元素顶部不能超出包含块顶部，也不能超过之前所有浮动元素的顶端

.inner{
width:300px
height:100px
background-color:#0f0;
float:left;
}
.inner1{
width:200px
height:100px
background-color:#0ff;
float:left;
}
.inner2{
width:100px
height:50px
background-color:#000;
float:left;
}
/*emmet语法*/
.one>.inner+.inner1+.inner2

4、为什么大部分采用浮动布局而不是inline-block

inline-block的缺陷：

若内容有文本极易发生基线对齐，布局大概率出错
两个inline-block的之间距离无法固定，用浮动直接紧挨着

浮动可以完美解决上述问题

5、多出的margin处理方式

（1）伪类选择器nthchild（有兼容性问题，ie8以下没有伪类，不推荐）

（2）最后一个item单独设置

（3）或者这样container固定宽度>.wrap+负margin>很多item（最优解）

 .content{
width:990px;
height:500px;
background-color:red;
margin :0 auto;
}
.wrap{margin-right:-10px;
}
.section{
float:left;
}
<!--前提border-width和padding-width为0，一般情况下就是0-->
<!--width of block=content-width+margin-left+margin-right+padding+border990=content-width+0+-10pxcontent-width=990+10=1000-->
<div class="conten"><div class="wrap"><div class="section"></div><div class="section"></div><div class="section"></div><div class="section"></div><div class="section"></div><div class="section"></div><div class="section"></div><div class="section"></div><div class="section"></div><div class="section"></div></div>
</div>

    <style>.content{width: 990px;background-color: aqua;height: 500px;}.item{float: left;}.box2{height: 500px;width: 580px;margin-left: -2px;}.itema{height: 500px;width: 200px;background-color: black;margin-right: 5px;}.itemb{height: 245px;width: 285px;background-color: blue;margin-left: 5px;margin-top: 5px;}</style>
</head>
<body><div class="content"><div class="item itema"></div><div class="item itema"></div><div class="item box2"><div class="item itemb"></div><div class="item itemb"></div><div class="item itemb"></div><div class="item itemb"></div></div></div>
</body>

    <style>.header{width: 1100px;height: 49px;/* background-color: burlywood; */margin: 0 auto;}.header-left ul li{display: inline-block;margin-left: 5px;}h2{padding: 0;margin: 0;/* display: inline-block; */}.header-left ul, .header-left span,.header-left h2, .header .header-left{margin-right: 20px;float: left;}.header-left h2{font-size: 22px;}.header-left ul,.header-left span{margin-top: 5px;}.header-left ul li a:hover{text-decoration: underline;}.header .header-right{float: right;margin-top: 5px;}.header .header-right a:hover{color: crimson;}</style>
</head>
<body><div class="header"><div class="header-left"><h2>美妆专区</h2><span>热搜词：</span><ul><li><a href="">面膜</a></li><li><a href="">口红</a></li><li><a href="">眼霜</a></li><li><a href="">精华</a></li></ul></div><div class="header-right"><a href="#">更多好货 > </a></div></div>
</body>

6、clear属性

（1）取值

left：要求元素顶部低于之前生成的所有左浮动元素的底部

right：要求元素顶部低于之前生成的所有右浮动元素的底部

both：要求元素顶部低于之前生成的所有浮动元素的底部

7、清除浮动（clear）

（1）给父元素设置固定高度（不推荐）

扩展性不好

（2）在父元素外边增加一个空的块级子元素，并且让他设置css属性：clear：both（不推荐）

会增加很多无意义的空标签，维护麻烦；违反了结构与样式分离规则

    <style>.content{width: 990px;background-color: aqua;/* height: 500px; */}.item{float: left;}.box2{height: 500px;width: 580px;margin-left: -2px;}.itema{height: 500px;width: 200px;background-color: black;margin-right: 5px;}.itemb{height: 245px;width: 285px;background-color: blue;margin-left: 5px;margin-top: 5px;}.content2{background-color: aquamarine;width: 990px;height: 40px;/* margin-top: 5px; *//* clear: both; */}.fengge{margin-top: 20px;margin-bottom: 20px;clear: both;}</style>
</head>
<body><div class="content"><div class="item itema"></div><div class="item itema"></div><div class="item box2"><div class="item itemb"></div><div class="item itemb"></div><div class="item itemb"></div><div class="item itemb"></div></div></div><div class="fengge"></div><div class="content2"></div>
</body>

（3）在父元素最后增加一个br标签<br clear=“all”（不推荐）

会增加很多无意义的空标签，维护麻烦；违反了结构与样式分离规则

    <style>.content{width: 990px;background-color: aqua;/* height: 500px; */}.item{float: left;}.box2{height: 500px;width: 580px;margin-left: -2px;}.itema{height: 500px;width: 200px;background-color: black;margin-right: 5px;}.itemb{height: 245px;width: 285px;background-color: blue;margin-left: 5px;margin-top: 5px;}.content2{background-color: salmon;width: 990px;height: 40px;/* margin-top: 5px; *//* clear: both; */}.fengge{margin-top: 20px;margin-bottom: 20px;clear: both;}</style>
</head>
<body><div class="content"><div class="item itema"></div><div class="item itema"></div><div class="item box2"><div class="item itemb"></div><div class="item itemb"></div><div class="item itemb"></div><div class="item itemb"></div></div>
<!--父元素会显示颜色，因为使用这种方式相当于让父元素包裹中所有内容，即使父元素没有高度--><br clear="all"></div><!-- <div class="fengge"></div> --><div class="content2"></div>
</body>

为父元素css添加伪元素after并设置clear：both

注意任何元素一旦使用伪元素都需要重新设置display，使用伪元素默认变成行内级元素

二、css–tranfrom

1、简介

允许你旋转缩放倾斜或者平移给定元素

2、常见函数transform function：

一般基于原点变化transform-origin设置原点； transform-origin：center center是默认的值

deg为角度单位

（1）平移：translate（x，y）

（2）缩放：scale(x,y)

一个值scale（2）x与y相同缩放

不同值x缩放y缩放

（3）旋转：rotate(deg)

（4）倾斜：skew(deg,deg)

三、css–transition（与transform经常使用的过渡动画属性）

transition-property：指定应用动画的属性名称

可以写all表示所有可动画属性
属性是否支持动画文档查看

transition-duration：制定过渡动画所需时间

单位可以是s或ms

transition-timing-function：指定动画变化曲线

transition-delay：指定过度动画执行之前等待时间

    <style>.one{background-color: red;width: 100px;height: 100px;margin: 0 auto 0;transition: width 1s linear 2s;}.one:hover{width: 400px;/* transform: scale(2,1); */}</style>
</head>
<body><div class="one"></div>

四、css–vertical-align属性

行盒：对于div来说内容部分每一行都称为行盒，只要宽度能包裹内容，无论高度都会被行盒包裹，且所有内容基线对齐

就算没有文本内容，div内部也默认基线对齐，这就会导致div内容底部会多出几个像素虽然后面空白单仍然认为空白部分拥有基线，

eg：假设一个div内容物如下显示，那这个div就有两个行盒，这两个行盒高度之和为div的高度

4545454545454 4 545 4 545

45 45 45 45 45 45 45 4 54 54

.one{
w1920+h600
background-color:green
}
span{
display:inline-block;
h400
background-color:red
}
<div class="one">4545454 45 454 54 5454 54 54 54 5445 454 54 <span>4454545  4545</span>
</div>

知道了行盒和基线对齐，一切就好办了

css属性vertical-align默认值baseline（基线对齐）

文本baseline是字母x的下方
inline-block默认的baseline是margin-bottom底部
inline-block有文本，baseline是最后一行文本的x下方

但就算这样，也不能算真正居中，因为字体样式原因，原点会下沉，不信话演示会发现上面比下面空的多，所以一般先设置父元素字体大小为0，干脆就不能有文本

    <style>.one{background-color: red;width: 300px;height: 60px;line-height: 60px;font-size: 0;vertical-align: middle;/* margin: 0 auto ; *//* vertical-align:middle; *//* transition: width 1s linear 2s; */}img{/* margin-left: 50px; *//* margin-top: 5px; */vertical-align: middle;}span{font-size: 10px;}</style>
</head>
<body><div class="one"><img src="./image/shopping.png" alt=""><!--<span>5454545</span>--></div>
</body>

补充

1、定位方案对比标准流、绝对定位、浮动应用场景

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SzcPjm9t-1600922637339)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200722143417945.png)]

2、真正居中方式(真正靠谱的)

img{
position:relative;
top:50%;
tranform:translate(0,-50%);
}
div{
width:300px;
height:400px;
}
<div><img src="./image/xx.png" alt=""/>
</div>

img{
/* margin-left: 50px; /
/ margin-top: 5px; */
vertical-align: middle;
}
span{
font-size: 10px;
}

```

补充

1、定位方案对比标准流、绝对定位、浮动应用场景

[外链图片转存中…(img-SzcPjm9t-1600922637339)]

2、真正居中方式(真正靠谱的)

img{
position:relative;
top:50%;
tranform:translate(0,-50%);
}
div{
width:300px;
height:400px;
}
<div><img src="./image/xx.png" alt=""/>
</div>