【青训营】css基础-一一网

浮动

浮动的一些特性

浮动元素可以向左或向右移动，直到它的外边缘碰到包含父元素或另一个浮动元素的边框为止
浮动元素不在文档流中，所以下面的非浮动元素会填补到浮动元素下方(浮动元素提升层级)
内联元素也可以浮动，并且可以设置其宽高

浮动引起的一些问题

问题一：父元素的高度无法被撑开
问题二：与浮动元素同级的非浮动元素会填补到浮动元素下方(遮盖现象)

问题一的一些解决方法

为父元素设置固定高度
为父元素设置 overflow:hidden
添加伪元素，可以给父元素添加after伪类(可以给所有浮动元素追加通用类clearfix清除浮动)

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}
复制代码

问题二的一些解决方法

在父元素内部，浮动元素的最后面，添加一道“墙”，设置属性clear:both

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clear">我叫墙</div>
</div>
复制代码

.container{
    width:100%;
    border:2px solid #000000;
}
.left{
    width:100px;
    height:100px;
    background-color:rgb(52,128,250);
    float:left;
}
.right{
    width:100px;
    height:100px;
    background-color:rgb(52,128,250);
    float:left;
}
.clear{
    clear:both;
}
复制代码

定位position

几种定位方式

static：默认值，即没有定位
relative：相对定位，相对本身所在正常文档流的位置(即未移动时的位置)进行定位
absolute：绝对定位，相对最近一级(父元素)定位(从直接父元素向上，直到根元素)进行定位
fixed：固定定位，相对于浏览器可视区进行定位
sticky：粘性定位，可以认为是相对定位和固定定位的结合，结合实例感受(需要自己拖动滚动条尝试，与relative比较)

<div class="prev">prev</div>
<div class="container"></div>
<div class="next">next</div>
复制代码

.prev{
    width:100px;
    height:100px;
    background-color:yellow;
}
.container1{
    position:sticky;
    border:2px solid black;
    width:300px;
    height:300px;
    top:40px;
}
.next{
    width:100px;
    height:2000px;
    background-color:yellow;
}
复制代码

position和float异同

均可对内联元素设置float和absolute，可以让元素脱离文档流，可以设置其宽高

位于非浮动元素之后的浮动元素碰到该非浮动元素的边框为止，不会覆盖该浮动元素(这里有点绕。。)；而对于absolute,当设置top、left…可能会覆盖上面的元素。

来个例子，下面当给next类加上float:left时，类名为next盒子碰到container边框就停止了。而当给next类加上position:absolute;top:300px;时，类名为next盒子覆盖在container盒子上面。

<div class="prev">prev</div>
<div class="container"></div>
<div class="next">next</div>
复制代码

.prev{
    width:100px;
    height:100px;
    background-color:yellow;
    float:left;
}
.container{
    border:2px solid black;
    width:300px;
    height:300px;
    /*float:left*/
    /*position:absolute;top:300px;*/
}
.next{
    width:100px;
    height:100px;
    background-color:yellow;
}
复制代码

块级元素与行内元素

一些块级标签

div、h1-h6、p、ol、ul、li、dl、table、br、form等。换行显示、可设宽高、可套行和块。

一些行内属性的标签

span、a、em、strong、select、option、img、input、textarea等。行内显示、只能套用行标签(还有一些特殊的行标签也不能套用)、不可设宽高(其中img、input、textarea例外，可设宽高)。

关于display

display的一些值

block：块类型，默认宽度为父元素宽度，可设宽高，换行显示
inline：行内元素，默认宽高为内容宽度，不可设宽高，同行显示
inline-block：行内块级元素，默认宽高为内容宽度，可设宽高，同行显示
none：元素不会显示，脱离文档流
inherit：从父元素继承display属性的值

display:none与visibility:hidden

display:none 隐藏对应的元素，脱离文档流(即在文档流中不在给它分配空间，它周围的元素会合拢)
visibility:hidden 隐藏对应的元素，但是在文档流中仍然保留原来的空间

css中一些可继承与不可继承的样式

可继承：font-size、font-family、color
不可继承：border、padding、margin、width、height

与字体有关的可以继承，与尺寸相关的通常不能继承

css优先级

!important > style(内联) > id(权重100) > class(权重10) > 标签、伪类(权重1) > *

选择器组合使用的一些加减法

经常用到的居中

给定宽高

.father{
    position:relative;
    width:100%;
    height:100%;
}
.son{
    position:absolute;
    width:100px;
    height:100px;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}
/*更多...*/
复制代码

未给宽高

.father{
    position:relative;
    width:100%;
    height:100%;
}
.son{
    position:absolute;
    width:100px;
    height:100px;
    top:50%;
    left:50%;
    transform:tanslate(-50%,-50%);
}
/*更多...*/
复制代码