奇舞-布局-笔记

布局

• float
• position
• inline-block
• table
• flex
• grid

居中
水平居中

• 行级元素：text-align:center
• 块级元素：margin:auto

//html

	<article>
		<h1>Take honour from me and my life is undone.</h1>
		<p>The fulvous whistling duck (Dendrocygna bicolor) is a tropical and subtropical bird in the family of ducks, geese and swans. It breeds in much of Mexico and South America, the West Indies, the southern US, sub-Saharan Africa and the Indian subcontinent. It has mainly reddish </p>
	</article>
//css

	article {
		margin-left: auto;
		margin-right: auto;
		padding: 1em;
		background: lightblue;
		line-height: 1.8;
		max-width: 40em
	}

垂直居中

• 单行文字：line-height
• 行级盒子：vertical-align：middle
• 绝对定位：top：50%；left：50% transform: translate(-50%,-50%);

//html
	 <p>
	 	<em>共享</em> 未安装人群	
	 </p>
//css

p{
		padding: 0 1em;
		background: #eee;
		line-height: 2;
		font-size: 16px;
	}

	em {
		font-size: 12px;
		background: #0c7cd5;
		display: inline-block;
		vertical-align: middle;
		line-height: 1.5;
		padding: 0 0.5em;
		font-style: normal;
		color: #fff;
	}

//块级元素居中
//html
	 <div class="modal" role='dialog'>
	 	  <h3>出错啦</h3>
	 	   <p> 服务器 暂时无法处理您提交的数据，请稍后再试。</p>
	 	   <div class="actions">
	 	   	   <button type="">确定</button>
	 	   </div>
	 </div>
//css
	.modal {
		position: fixed;
		font-size: 14px;
		width: 20em;
		height: 10em;
		padding: 1em;
		top: 50%;
		left: 50%;
		margin-left: -10em;
		margin-top: -5em;
		border:1px solid #ccc;
		box-shadow: 1px 1px 5px rgba(0,0,0,.3);
	}

float-based layout

//html

    <main>
    	<aside>aside</aside>
    	<article>
    		The fulvous whistling duck (Dendrocygna bicolor) is a tropical and subtropical bird in the family of ducks, geese and swans. It breeds in much of Mexico and South America, the West Indies, the southern US, sub-Saharan Africa and the Indian subcontinent. It has mainly reddish 
    	</article>
    </main>
//css

aside {
		width: 10em;
		float: left;
		background: lightblue;
		min-height: 20em;
	}
	article {
		overflow: hidden;
		background: coral;
		min-height: 20em;
	}

方案2 （个人感觉这种方案并不好 始源于圣杯布局）

//html
    <main>
        <article>
            The fulvous whistling duck (Dendrocygna bicolor) is a tropical and subtropical bird in the family of ducks, geese and swans. It breeds in much of Mexico and South America, the West Indies, the southern US, sub-Saharan Africa and the Indian subcontinent. It has mainly reddish
        </article>
         <aside>aside</aside>
    </main>
//css
main {
	font-size: 14px;
	padding-left: 10em;
}


article {
    float: left;
    width: 100%;
    background: coral;
    min-height: 20em;
}
aside {
	width: 10em;
	float: left;
	margin-left: -10em;
	position: relative;
	left: -100%;
	min-height: 20em;
	background: lightblue;
}

(伪等高)

//父级overfloa：hidden 子元素：padding-bottom：999px；margin-bottom：-999px；

//html
    <main>
        <article>
            The fulvous whistling duck (Dendrocygna bicolor) is a tropical and subtropical bird in the family of ducks, geese and swans. It breeds in much of Mexico and South America, the West Indies, the southern US, sub-Saharan Africa and the Indian subcontinent. It has mainly reddish
        </article>
        <aside>aside</aside>
    </main>
//css

main {
    font-size: 14px;
    padding-left: 10em;
    overflow: hidden;
}


article {
    float: left;
    width: 100%;
    background: coral;
    padding-bottom: 999px;
    margin-bottom: -999px;
}

aside {
    width: 10em;
    float: left;
    margin-left: -10em;
    position: relative;
    left: -100%;
    background: lightblue;
    padding-bottom: 999px;
    margin-bottom: -999px;
}

position

//html

    <main>
        <article>
            The fulvous whistling duck (Dendrocygna bicolor) is a tropical and subtropical bird in the family of ducks, geese and swans. It breeds in much of Mexico and South America, the West Indies, the southern US, sub-Saharan Africa and the Indian subcontinent. It has mainly reddish
        </article>
        <aside>aside</aside>
    </main>
//css
main {
    font-size: 14px;
    position: relative;
}


article {
    background: coral;
    margin-left: 10em;
}

aside {
    width: 10em;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: lightblue;
}

table

//html

    <table>
        <caption>table title and/or explanatory text</caption>
        <thead>
            <tr>
                <th>header</th>
                <th>header</th>
                <th>header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
        </tbody>
    </table>

//css

    table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }
    th,td {
        border: 1px solid #666;
        padding: 1em; 
    }
    tr > :first-child {
        width: 8em;
    }

fixed table layout

//使每个单元格等宽
<table>
        <caption>table title and/or explanatory text</caption>
        <thead>
            <tr>
                <th>header</th>
                <th>header</th>
                <th>header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
        </tbody>
    </table>
//css
    table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 14px;
    }
    th,td {
        border: 1px solid #666;
        padding: 1em; 
    }
   tr > th {
    width: 8em;
   }

不要使用表格标签布局

display:table

    display: table;  /* <table> */
    display: table-cell;/* <td> */
    display: table-row;/* <tr> */
    display: table-column;/* <col> */
    display: table-column-group;/* <colgroup> */
    display: table-header-group;/* tfood */
    display: table-footer-group;/* <thead> */

//例子
//html
         <a href="#">Home</a>
         <a href="#">HTML</a>
         <a href="#">CSS</a>
         <a href="#">JavaScript</a>
         <a href="#">HTTP</a>
     </nav>

//css
   nav {
        width: 100%;
        display: table;
        border-collapse: collapse;
        font-size: 14px;
        line-height: 3;
    }
    nav a {
        display: table-cell;
        text-align: center;
        border: 1px solid #fff;
        text-decoration: none;
        color: rgba(255,255,255,.8);
        background: hsl(181,58%,52%); 
    }
    nav a:hover {
        color: #fff;
        background: hsl(181, 58%, 45%);
    }

表格垂直居中

//html
    <div class="container">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/075d0962663241.Y3JvcCw5MDYsNzA5LDMxLDA.jpg">
    </div>
 //css
    .container {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        width: 400px;
        height: 400px;
        background: lightblue;
    }

flexbox(真正为解决布局问题而生的规范)

flex 可控制子元素

• 水平或者垂直排成一行
• 控制子元素对其方式
• 控制子元素的宽度/高度
• 控制子元素显示顺序
• 控制子元素是否折行

diaplay:flex

• 将元素变为flexbox
• 子元素在容器内水平(默认)或垂直摆放

//html
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
   </ul>
//css

    ul {
        display: flex;
        padding: 0;
        background: lightblue;
    }
    li {
        list-style: none;
        padding: 1em;
        background: lightblue;
    }

flex-direction /direction 方向/

• 子元素排列方向
• 取值 row | row-reverse | column | column-reverse
  

flex-grow(设置的值是子元素 控制子元素占空间比例)

• 定义每一个子元素在盒子内的弹性
• 扩展盒子剩余空间的能力
• 取值 默认0

flex-shrink

• 元素收缩的能力
• 取值 ： 默认1

//html
    <ul>
        <li class="item-1">Item 1 Content</li>
        <li class="item-2">Item 2 Content</li>
        <li class="item-3">Item 3 Content</li>
    </ul>
//css
ul {
    display: flex;
    padding: 0;
    background: lightblue;
}

li {
    list-style: none;
    padding: 1em;
}

.item-1 {
    background: #add8e6;
    flex-grow: 1;
    flex-shrink: 0;
}

.item-2 {
    background: #dfdf56;
    flex-grow: 1;
}

.item-3 {
    background: red;
    flex-grow: 1;
}

flex-wrap (在父元素上设置 控制子元素是否折行)

• 元素在主轴方向摆放时，能否换行
• 取值 ： nowrap | wrap | wrap-reverse
  

justify-content (设置在父元素)

• 子元素沿主轴方向摆放
• 取值 flex-start | felx-end | center | space-between | space-around

flexbox 语法变化

    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction:normal;
    -webkit-box-orient:horizontal;
    -webkit-flex-direction:row;
    flex-direction: row;
    -webkit-flex-wrap:nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack:start;
    -webkit-justify-content:flex-start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    align-content: stretch;

grid

不同布局属性浏览器兼容性

布局

正常文档流
书写模式
Float
绝对定位
粘性定位
Table 布局
Flex 布局
Grid 布局