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>