码迷,mamicode.com
首页 > Web开发 > 详细

css盒子布局,浮动布局以及显影与简单的动画

时间:2019-08-05 20:23:29      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:简单   none   内容   col   isp   居中   重点   dash   自动获取   

08.05自我总结

一.盒子布局

1.盒子布局的组成

  • margin
  • border
  • padding
  • content

2.margin

margin是外边距,控制盒子的显示位置相对于他的上一级

left、top控制自身,right、bottom影响兄弟

3.border

  • 宽度:border-width

  • 颜色:border-color

  • 透明度:transparent

  • 样式:border-style:

    常用的样式

    • none:没有边框
    • solid:实线
    • dashed虚线
    • dotted点或者方框根据浏览器不同样式有有点区别
  • 透明度:颜色里面的用rgb颜色第四个参数来控制来控制

4.content

content是宽x高,作为内容或子标签的显示区域

padding与边框之间的距离

5.盒子阴影

box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色

6.重点

  • 盒模型:margin、padding协调操作,能用padding尽量用padding,再考虑用margin
  • 父子级顶端产生距离,建议使用padding
  • margin、padding的参数auto自动获取留白区域适用根据留白地方居中使用

二.浮动布局

1.浮动布局

float

1.子集浮动参照父级宽度
2.子集浮动不再撑开父级高度
3.父级高度需要自己处理,否则会影响兄弟布局,采用清浮动处理

2.after|before

after与before是伪类

他们与CSS选择器直接用:连接

after元素出现后

before元素出现前

3.清浮动

父级清浮动,就是在自己宽度是否确定下,都能保证父级的高度刚刚好包裹子集

需要左右排列的block采用浮动布局,且父级一定要清浮动

方法一:

.浮动的标签:after {
    content: '';
    display: block;
    clear: both;
}

方法二:

.浮动标签下一个要显示的标签(会受到他浮动影响的):before {
    content: '';
    display: block;
    clear: both;
}

三.动画

1.显隐

? 1)display:none | block 不可以做动画
? 2)opacity: 0 | 1 可以做动画
? 3)width:0 | height: 0 可以做动画

2.动画

transition: 动画时间(.5s) 延迟时间(.1s) 动画属性(all) 运动曲线(ease)

css盒子布局,浮动布局以及显影与简单的动画

标签:简单   none   内容   col   isp   居中   重点   dash   自动获取   

原文地址:https://www.cnblogs.com/pythonywy/p/11305228.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!