2019-03-07 入门CSS

1.左右布局

首先在html文件里的body内创建一个大的div包裹两个小的div分别是作为left菜单和right主体

<div>
        <!-- 左侧固定宽度菜单 -->
        <div class="left">
            <p>我是左侧菜单</p>
        </div>
        <!-- 右侧宽度自适应（占据剩余宽度）主体内容 -->
        <div class="right">
            <p>我是右侧主体内容</p>
        </div>
    </div>

接下来可以在本页style内写css

<style>
html, body, div {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow:hidden;
        }
        .left {
            float: left;
            width: 140px;
            background-color: #fff;
            height: 100%;
        }
        .right{
            display: block;
            overflow: hidden;
            background-color: #000
        }
</style>

---

2.左中右布局
左右浮动法

html,body{margin:0;height:100%;}
#main{height:100%;margin:0 22%;background-color:hotpink;}
#left,#right{width:20%;height:100%;background-color:pink;}
#left{float:left;}
#right{float:right;}

<div id="left"></div>
<div id="right"></div>
<div id="main"></div>

//不能随意改变元素顺序，主体部分放在最后。
//注意需要清除浮动

---

3.水平垂直居中
3.1用css3的calc()动态计算:

.wrap{
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  height: 400px;
  background-color: #ccc;
  .content{
    padding: -webkit-calc(~"(100% - 100px) / 2");
    padding: calc(~"(100% - 100px) / 2");
    width: 100px;
    height: 100px;
    background-color: #333;
    background-clip: content-box;
  }
}

<div class="wrap">
  <div class="content"></div>
</div>

3.2absolute + margin : auto

html,body{
  width: 100%;
  height: 100%;
  margin: 0;
}
.wrap{
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  .ele{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: #333;
  }
}

<div class="wrap">
  <div class="ele"></div>
</div>

---

4.其他小技巧
4.1什么是伪类?
所有的非空标签都有伪类.(1.不是真元素2.无法选中)
4.2什么是伪元素?
::after
::before
4.3块级元素的高度由什么决定的?
div 高度 由其内部文档流元素 的高度 总和决定
4.4内联元素的高度由什么决定的?
内联元素的高度和字体格式有关,高度不可控.除非强制设置高度line hight=100
内联元素span从左往右流动,若浏览器宽度不够则另起一行继续
4.5什么是文档流?
文档流:内联元素的流动方向(从左往右),块级元素从上往下(.每一个块级元素都会另起一行)
position:fixed;可以脱离文档流
4.6fload+clearfix解决大部分布局问题