9.布局
display:block,inline,inline-block,none
position:relative,absolute,fixed,top/right/left/ z-index
flot:clear
flex:方向:direction,wrap,flow,order
flex弹性:flex-basis,grow,shrink,flex
flex对齐:justify-content,align-items,align-self,align-content
CSS布局:
定位机制:
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|fixed
position:relative
相对定位的元素仍在文档流中,并按照文档流中的顺序进行排列,参照物为自身,类似bounds
最常用的目的是改变元素层级和设置绝对定位的参照物
position:absolute
建立以包含块为基准的定位,其随即拥有偏移属性和z-index属性
默认宽度为内容宽度
脱离文档流,参照物为第一个定位祖先(relative)或者根元素(<html>)
position:fixed
默认宽度为内容宽度,脱离文档流,参照物为窗口//top,left/right/bottom
用于设置元素边缘和参照物边缘的距离,可以是负值.在同时设置相对方向时,元素将被拉伸.
z-index栈:父类容器的z-index优于子类的z-index
float:浮动布局left|right|none|inherit
float仅影响文档流中下一个紧邻的元素
默认宽度为内容宽度,脱离文档流,指的方向一直移动
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-visibility
skew倾斜 backface-visibility设置背面的可视性
动画:
transition:transition-property,duration,delay,timing-function
animation:animation-name,duration,timing-function,iteration-count,direction,delay,play-state,fill-mode,@keyframes
transition:left 2s ease 1s,color 2s
animation: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>
