11、css布局与定位

.xxx用于class=xxx；#zzz，用于id选择符；>yyy，用于标签就是yyy

div的高度由其内部文档流元素的高度的总和决定

什么是文档流呢：文档内元素的流动方向
怎么流的呢：内联元素从左往右流，遇到阻碍就换行。
块状元素从上往下，每个换一行。
内联元素span的高度由其对应字体的建议高度和其他相关设定决定，如：建议行高为1.4，font-size为100px，那么就是140px了,一旦涉及内联元素就高度不可控了)

继续实现：

一、导航条脱离文档流

.topNavBr{position:fixed; top:0; left:0}

此时这个导航条会缩起来（重点）

失败方案一：width：100%（又是个危险的bug携带者，实际开发中能不写就不写），然后发现导航条比他爸还宽。
失败方案二：把导航条那个16px的左右删掉，然后发现很丑、

解决方案：在topnavbar下面再加个层级（注意其他受影响的设定也要及时更新哦）

<div class="topNavBar-inner clearfix">在这里设置padding左右16px，完美。

二、处理背景的那个光盘大图片，
<div class="banner"><div class="mask"></div></div>
特地建了个mask做样式（不是内容部分啦）
.banner{
height : 515px;
background-image: url(./img/rs-cover-2-2-1-1.jpg);
background-position: center center;
background-size: cover;
}
.banner.mask{
height: 515px;
background: rgba(0,0,0,0.8)
}

三、弄卡片（内联元素可以直接center，块状规定了宽度，加2个auto即可）
先量宽度，然后max-width（可以自适应）：940px
在让它居中 margin-left: auto； margin-right: auto;

四、开始鼓捣hello
第一种方法：
.userCard .welcome{
background: #e6685a;
color: #ffffff;
width: 70px;
height: 29px;
line-height: 29px；
display: inline-block;
text-align：center;}
我们用了width: 70px; height: 29px;发现没有用，因为是span内联元素，所以通过display:inline-block对一个对象指定inline-block属性，可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。
然后在加上一个和height一样的 line-height: 29px;就达到垂直方向的居中效果了，但是这个仅仅适用于像素比较小的时候，在加上text-align：center；达到水平居中的效果
这种一般是新手的法子，实际上不建议使用width和height

第二种方法：由内而外
.userCard .welcome{
background: #e6685a;
color: #ffffff;
padding: 4px 16px;
display: inline-block;
line-height: 22px;}

五、红色三角形
div{
border:10px solid red;
width:0px;
height:10px;
border-top-color:transparent;
border-left-color:transparent;
border-right-color:transparent;
}
这里width为0，像是一个实木盒子
但是上面的是正三角形，我们要的是直角三角形
在hello那个span内加上一个span，标签加上block
.triangle{
border:100px solid transparent;
width:0px;
height:0px;
border-left-color:red;
border-top-width:0px;
display:block;
}
三角形绝对定位（之前的fix不同，这里是相对于父元素定位），即在子元素上面写position：absolute，父元素上面写position：relative,这里是通过top和left定位到左下角，最终结果：
.userCard .welcome{
background: #e6685a;
color: #ffffff;
padding: 4px 16px;
display: inline-block;
line-height: 22px;
position: relative;
}
.userCard .welcome .triangle{
border:10px solid transparent;
width:0px;
height:0px;
border-left-color:#e6685a;
border-top-width:0px;
display: block;
position: absolute;
left:4px;
top:100%;
}

六、调整照片到card边缘的距离，如果在usecard上面加会变胖，一般在里面的元素标签上面加padding，这个技巧要掌握哦

七、调个人信息
.userCard dl dt,
.userCard dl dd{
float: left;
}
.userCard dl dt{
width: 30%;
}
.userCard dl dd{
width:70%;
}

八、开始做下面的红色条条，有个网站叫iconfont我们可以在这个里面找一些网站比如知乎的图形logo,具体的添加过程见这个网站上的帮助
然后以svg的语法给它加上属性(注意svg的语法哦)
.userCard svg{
width: 30px;
height: 30px;
fill :white;
}
在居中画圆等等
.userCard > footer.media{
text-align: center;
}
.userCard svg{
width: 30px;
height: 30px;
fill:white;
vertical-align: top;
}
.userCard > footer.media >a{
border:1px solid black;
display:inline-block;
border-radius: 50%;
width:40px;
line-height:30px;
padding: 5px 0;
}