盒子在父级水平居中:margin:0 auto;
文本样式操作
color:red;
text-align:center;
font: 900 30px/200px "STSong","微软雅黑";
reset操作
清除默认样式:
html,body,h1,h6,p,ul{
margin:0;
padding:0;}
高级选择器:
每一个选择器位都可以替换为任意基础|高级选择器
群组:控制多个
后代:空格|子代:>
兄弟:~ |相邻 :+
伪类(位置):nth-child(1,2n)
边界圆角:
border-redius:20px 30px;
border-radius:50%;
border-radius:10px/20px;
背景图片:(精灵图):
background:url("image/bg.png") no-repeat -200px -300px;
div:hover{
background-position-x: -400px;
}
伪类after |before
.div:after|before{
display:block;
content:"000"}
浮动布局:
浮动布局可以让块级(block)标签在父级的宽度限制下同行显示,一行显示不下,自动换行
(要达到一行显示个数固定,一定要固定父级的宽度)
需要同行排列的使用浮动布局处理
父级需要清浮动
浮动的盒子宽度不在获取父级宽度由内容撑开
语法:子级{float:left|right;}
问题:子级不在撑开父级高度(不完全脱离文档流)
脱离文档流:=>层级结构会上移,覆盖有位置重叠且没脱离文档流的标签
不完全:浮动布局后,可以重新让子级撑开父级的高度,
清浮动:让不完全脱离文档流的子级重新撑开父级的高度,这种做法就叫做清浮动
语法: 父级:after{
content:"";
display:block;
clear:both;(left,right)
}
定位布局:
固定布局:盒子相对于屏幕完成位置布局,不会随着屏幕内容的滚动(相对于屏幕窗口是静止的),且和其他界面发生重叠时,
该布局下的内容显示层次更高(覆盖其他内容)
语法:position:fixed;
固定定位:总结:
参考系为页面窗口
一旦设置定位属性,top|bottom|left|right四个方位(是定位属性盒子特有的)均可以参加布局
top:npx;
left:npx;
right:npx;
bottom:npx;
且没有完全脱离文档流的盒子添加z-index属性无用
上下同时存在取上,同理左右取左
固定定位会完全脱离文档流(永远不会撑开父级高度=>布局中父级一定需要自己设置高度)
完全脱离文档流的盒子显示层次高于不脱离文档流的盒子,两个完全脱离文档流盒子的显示层次可以z-index属性(
脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者)
绝对定位:
绝对定位兄弟标签之间不相互影响,都参照父级的显示区域来完成布局
语法:position:absolute;
父级一般情况下只是为了给子级绝对定位提供参考系,子级绝对定位下,必须要求参考系拥有定位
父级可以选取fixed|absolute定位就会成为子级的参考系,但是父级就自身的布局就会因为fixed|absolute完全脱离文档流的特性,影响自身的布局
为达到父级即能定位(为子级作参考)又不脱离文档流(自身布局不受影响)
解决方案:父级采用 相对定位 position:relative
父相子绝
绝对定位总结:
参考系为最近的定位父级(父级一班采用相对定位relative来辅助子级绝对定位)
一旦设置定位属性,top|bottom|left|right四个方位(是定位属性盒子特有的)均可以参与布局
上下同时出现取上,同理左右取左
绝对定位会完全脱离文档流(永远不会撑开父级高度==>布局中父级一定需要自己设置高度)
完全脱离文档流的盒子显示层次高于不脱离文档流的盒子,两个完全脱离盒子文档流盒子的显示层次可以z-index
属性(脱离文档流盒子特有的)改变显示层次的顺序(值大者覆盖值小者)
相对定位总结:
参考系为自身原有位置
一旦设置定位属性,top|bottom|left|right四个方位(是定位盒子特有的)均可以参加布局
top=-bottom|left=-right(上下取上,左右取左)
相对定位 不脱离文档流==>不会影响自身布局,自身布局采用的还是原来的布局
注意:相对定位定位方位只会改变显示图层不会改变盒子的原有位置,原有位置不变就不会影响兄弟盒子
过度动画:
持续时间:transition-duration:3s;
延迟时间:transition-delay:1s;
过渡属性:all|属性1|属性二 height,background-color;
transition-property:all
过渡曲线:ease(慢)|ease-in(慢快)|ease-out(慢慢)|ease-in-out(慢快慢)|linear(匀速)
cubic-bezier(0.83,1.46,0,-1.29)(曲线函数)
transition-timing-function:(过渡曲线)
持续时间|延迟时间|过渡属性们|运动的贝塞尔曲线
transition:2s 1s all cubic-bezier(0.83,1.46,0,-1.29)
可简写为:transition:.3s linear;
处理超出子级范围的内容{
overflow:hidden;}