HTML學習筆記2

時間 2019-11-11
標籤 html 學習筆記欄目 HTML 简体版
原文原文鏈接
9.佈局    display:block,inline,inline-block,none    position:relative,absolute,fixed,top/right/left/ z-indexflot:clearflex:方向:direction,wrap,flow,orderflex彈性:flex-basis,grow,shrink,flexflex對齊:justify-content,align-items,align-self,align-contentCSS佈局:定位機制:1.標準文檔流2.浮動3.絕對定位標準文檔流:從上到下,從左到右輸出文檔內容,有塊級元素和行級元素組成,都是盒子模型.display:設置元素的顯示方式block: 默認父元素寬度 能夠設置寬高 起始位置換行inline:內容寬度 不可設置寬高 起始位置同行inline-block:內容寬度 可設置寬高 起始位置同行默認block的元素:div,p,h1~h6,ul,ol,form,table,header,nav,...默認inline的元素:span,a,label,cite,em,i...默認inline-block:input,textarea,select,button,display:none不顯示元素,與visiblity:hidden區別,display-none不顯示且不佔位,:hidden不顯示但站位三種定位形式:static,relative,absolute|fixedposition:relative相對定位的元素仍在文檔流中,並按照文檔流中的順序進行排列,參照物爲自身,相似bounds最經常使用的目的是改變元素層級和設置絕對定位的參照物position:absolute創建以包含塊爲基準的定位,其隨即擁有偏移屬性和z-index屬性   默認寬度爲內容寬度   脫離文檔流,參照物爲第一個定位祖先(relative)或者根元素(<html>)position:fixed默認寬度爲內容寬度,脫離文檔流,參照物爲窗口//top,left/right/bottom用於設置元素邊緣和參照物邊緣的距離,能夠是負值.在同時設置相對方向時,元素將被拉伸.z-index棧:父類容器的z-index優於子類的z-indexfloat:浮動佈局left|right|none|inheritfloat僅影響文檔流中下一個緊鄰的元素默認寬度爲內容寬度,脫離文檔流,指的方向一直移動float元素在同一個文檔流中,當進行float時會按照文檔中的順序排列(當全部父元素中的全部  元素脫離文檔流後,父元素將失去原有的默認的內容高度                               )float元素是半脫離文檔流,對元素是脫離文檔流,對於內容是在文檔流中的(即元素重疊,內容不重疊)clear:left,both,right,none,inherit應用於後續元素,塊級元素使用方法:1.clearfix於父元素2.浮動後續空白元素3.塊級元素能夠使用<br>,但不建議,影響HTML結構4.爲受到影響的元素設置overflow:hidden亦可flex:彈性佈局,用於多行自適應,多列自適應,間距自適應,和任意對齊建立:                                <div style="display: flex;">                                    <div>Block Element</div>                                    <!-- flex item: YES-->                                    <span>Inline Element</span>                                    <!-- flex item: YES-->                                    <div style="position:absolute;">Absolute Block Element</div>                                    <!-- flex item: YES-->                                </div>10.變形   2d:transform:rotate(),transform-origin,translate,scale,skew    3d:rotateY(),perspective,perspective-origin,translate3d(),    scale3d(),rotate3d(),transform-style,backface-visibilityskew傾斜  backface-visibility設置背面的可視性動畫:transition:transition-property,duration,delay,timing-functionanimation:animation-name,duration,timing-function,iteration-count,direction,delay,play-state,fill-mode,@keyframestransition:left 2s ease 1s,color 2sanimation:abc 2s ease 0s 1 normal none running動畫能夠自動運行,transition須要觸發                                <!-- 寫法一 -->                                @keyframes abc {                                from {opacity: 1; height: 100px;}                                to {opacity: 0.5; height: 200px;}                                }                                <!-- 寫法二 -->                                @keyframes abcd {                                0% {opacity: 1; height: 100px;}                                100% {opacity: 0.5; height: 200px}                                }                                @keyframes flash {                                0%, 50%, 100% {opacity: 1;}                                25%, 75% {opacity: 0;}                                }                                <!-- 例子 -->                                animation: abc 0.5s both;                                animation: flash 0.5s both;                                animaiton: abc 0.5s both, flash 0.5s both;常見佈局示例:自動居中一列布局                                <style type="text/css" media="screen">                                    article {                                        width: 800px;                                        margin: 0 auto;                                    }                                </style>                                <body>                                <article>                                    <h1>Title</h1>                                    <p> 正文內容</p>                                </article>                                </body>橫向2列布局                                <style type="text/css" media="screen">                                    .clearfix:after {                                        content: "."; /* Older browser do not support empty content */                                        visibility: hidden;                                        display: block;                                        height: 0;                                        clear: both;                                    }                                    .clearfix {zoom: 1;} /* 針對 IE 不支持 :after */                                    body {                                        width: 930px;                                        margin: 0 auto; /* 橫向居中 */                                    }                                    article {                                        width: 800px;                                        float: left;                                        margin-right: 10px;                                    }                                    aside {                                        width: 120px;                                        float: right;                                    }                                </style>                                <body class="clearfix">                                <article>                                    <h1>Title</h1>                                    <p>段落正文內容.</p>                                </article>                                <aside>                                    <h3>Aside Title</h3>                                    <p>段落正文內容</p>                                </aside>                                </body>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。