欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:22选5河南最新开奖今 > CSS入门 >

Css中的布局样式和过渡变行

22选5河南最新开奖今 www.gsf5k.cn  

1. 定位方式position

static:默认,元素为普通元素,文档流定位,从上到下

relative(相对的):元素的位置是相对于普通的位置定位的 ,位移之前的位置 其他元素用不了,一般不做太大的改动 ,对某个元素位置进行微调 ,只能使用top,left 我感觉他是相对于他之前的位置移动的

fixed(固定的):相对于浏览器窗口来定位 ,位移之前位置不会被占用, 上下左右都可以使用, 小广告常用手法, 滚动条不断移,他的位置也不变 ,他会脱离文档流,漂浮于文档流上边,他这个上下左右是相对于边的位置,比如:top50px 不是向上移动50px ,而是元素相对于顶部边框距离50px 设置buttom也同样可以使用,而且拉动滚动条也不会变化位置

absolute(绝对的):元素相对position值不为static的一个祖先元素定 子元素依据祖先元素变化 祖先元素不能为static 依据谁变化,谁不可以为static(默认为static),发生在父子 或 祖先元素与后代元素之间的位移定位

2. 定位布局

top/bottom/left/right

3. z-index

用来设置元素 和 元素 的显示层数,正数 负数 都可以

必须配合position使用

过渡,变形

1. 过渡

过渡:元素由一种样式逐渐变为另一种样式

属性:

transition-delay:设置过渡前的延时

transition-duration:设置过渡用时

transition-property:设置过渡参与的属性

transition-timing-function:过渡速率(linear匀速)

transition:简写形式(property duration timing-function delay)

反向过渡:

hover中设置的,粘贴到div,就可以了

2. 变形

transform: 指定如何变形

transform: scaleX/Y(1.5) 缩放1.5

transform: rotate(360deg) 旋转360 deg代表度数,配合过渡时间 效果很好

transform: skew(X轴角度,Y轴角度) 倾斜的角度

transform: translate(X轴距离,Y轴距离) 移动的距离

 

如需转载,请注明文章出处和来源网址://www.gsf5k.cn/rumen/r39123.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
22选5河南最新开奖今文章修订日期:2017-09-09 13:54 原创:22选5河南最新开奖今
本文22选5河南最新开奖今 www.gsf5k.cn DIVCSS5版权所有。

  • 震后十年·追忆与新生:关于2008年的那场地震,陕西有记忆 2019-03-24
  • 瑞典南部城市发生枪击案致5人伤 警方:与恐袭无关 2019-03-24
  • 樱桃-热门标签-华商生活 2019-03-24
  • 紫光阁中共中央国家机关工作委员会 2019-03-24
  • 黔江:1000余亩蓝莓成熟 市民乐享“莓”好时光 2019-03-24
  • 紫光阁中共中央国家机关工作委员会 2019-03-23
  • 【学习时刻】中央党校徐浩然:把“人民”二字镌刻在党的旗帜上 2019-03-23
  • 外贸持续稳中向好透露出哪些信息? 2019-03-23
  • 公众论坛官方网站首页·南方都市报·南方报业传媒集团 2019-03-23
  • 评论:抓实支部 责任上肩 2019-03-22
  • 袁隆平:即使海水稻已经成功,我的压力依然很大袁隆平压力 2019-03-22
  • 海外版望海楼:“五大观念”的时代价值 2019-03-22
  • 充分发挥人民政协职能优势 2019-03-22
  • 文化山西:晋中是“和”文化的发祥地 2019-03-21
  • 陈飞宇出席Vogue Film时装电影展 潮酷少年初长成 2019-03-21
  • 329| 639| 61| 522| 484| 254| 369| 737| 163| 854|