margin在布局中的多樣使用
三欄布局兩種方式：
掌握行內元素和塊狀元素的水平及居中方法
了解居中的幾種方法
熟練運用負margin屬性來設定消除邊框距離，margin重疊
了解三欄布局的兩種方式並掌握
水平居中**
text-align
: center;
height
:100px;
line-height
:100px;
元素行高與外框高度一致margin
: 0 auto;
text-align
:center;
/*塊級元素上下之間初始距離為0*/
已知需要居中的元素高度，**如下：
margin-top
: -50px;
height
:100px
/* 設定為負一半高度 */
/*html**/*
class
="center04"
>
class
="li-main"
>
未知高度：
class
="block0"
>
高度100的divdiv
>
li>
ul>
/*css***/
.center04 li.li-main
/*html***/
"li-maing-center01">
css**段
/* 居中一張：方法1 */
.img-center01
.img-center01 img
/* 居中一張：方法2 */
/.img-center01
.img-center01 img
/* 居中一張：方法3 */
.img-center01
.img-center01::after
.img-center01 img
class
="container"
>
>
>
子元素1li
>
>
子元素2li
>
>
子元素3li
>
>
子元素4li
>
>
子元素5li
>
>
子元素6li
>
>
子元素7li
>
>
子元素8li
>
ul>
div>
css**
.container
.container li
.container ul
/*html**段*/
class
="box03 margin-box01"
>
第乙個盒子div
>
class
="box03 margin-box02"
>
第二個盒子div
>
/*css**段*/
.box03
.margin-box01
.margin-box02
實現內容：通過margin設定的邊框距離，取最大部分（即重疊部分消除功能）
/*html**段*/
"box1">
"center">聖杯布局中間彈性區域
"left">左固定
"right">右固定
/*css**段*/
.box1
.box1 .left
.box1 .right
.box1 .center
剩下兩個div排版第二行用float:left;+margin:left來設定佔比首行div；
乙個通過負marin屬性設定margin-left:-100%到首行首列，另乙個通過負margin屬性設定margin-left:自身寬度到首行末列，再通過設定首div左右占屏寬度為剩下兩個div寬度達到中間彈性功能
實現原理：設定四個div，第乙個div裡外面巢狀乙個div，第一div設定寬度設定百分百占屏width：100%；
剩下兩個div排版第二行用float:left;+margin:left來設定佔比首行div；
乙個通過負marin屬性設定margin-left:-100%到首行首列，另乙個通過負margin屬性設定margin-left:自身寬度到首行末列，在巢狀的外面div上設定
**：
width
: 100%;
float
: left;
布局篇 Grid布局
特點 1 可以定義任意數量的行和列 2 行的高度和列的寬度可以使用絕對值 相對比例或自動調整的方式，可設定最大值和最小值 3 內部元素可以設定自己所在的行 列，還可以設定跨越幾行 幾列 4 可以設定內部元素的對齊方向 grid類具有columndefinitions和rowdefinitions兩個...
QML元素布局
屬性 用法add 1.當有元素被新增到定位器內且是該定位器的子元素時或有元素變成定位器的子元素時會執行該過渡動畫 2，當該定位器有子元素的屬性item visible由false轉變為true時,會執行該過渡動畫 toppadding bottompadding leftpadding rightp...
WPF布局篇 Canvas布局（一）
前言 1.本編主要總結canvas 的用法 canvas 是乙個最基本的布局容器，它不會自動調整內部控制項的大小 位置，它僅支援顯示座標定位。canves內部控制項的預設位置是左上角，可通過設定left,right,top,bottom屬性來調整控制項在canvas中的位置，canvas預設不會自動...