css 学习小结(1)

 之前学习都是把知识点记在本子上,现在重新复习梳理一下,将知识点做个小结:

1、块元素:从上向下流(各元素之间有一个换行);

  内联元素:水平方向上相互挨着,总体上从左上方流向右下方;

2、对于图像,通常不仅会设置外边距,还会设置内边距和边框;

3、如果要浮动(float)一个元素,则必须为这个元素设置一个宽度;浮动元素会从正常流中取出,浮动到左边或右边;

4、居中技巧:

  1. margin:auto;     //浏览器会根据需要扩展内容区,还会确保左和右外边距相同,所以内容会居中;
  2. top:50%;  left:50%; webkit-transperent:translate(-50%);

5、position的位置

  1. absolute:  浏览器首先要做的是将它从流中完全删除,然后浏览器将这个元素放置在top和right属性指定的位置上。(也可以使用bottom和left指定位置);  
  2. fixed:浏览器会将它从正常流中删除;
  3. relative:会让元素正常的流入页面;

可以对任何元素指定绝对位置,包括块元素和内连元素;

6、动画animate

        animate(params,[duration],[easing],[callback])   (后面三个参数是可选的)

  1. params: options,一组包含作为动画属性和终值的样式属性及其值的集合;
  2. duration:三种预订速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如:1000);
  3. easing:要使用的擦除效果的名称(需要插件支持),默认jQuery提供“linear”和“swing”;
  4. callback: Function,在动画完成时执行的函数;
时间: 2024-10-21 19:13:35

css 学习小结(1)的相关文章

CSS学习小结

接触了B/S的东西之后才发现自己需要学习的东西太多了,html.xml.JavaScript.jquery.HTMLdom.VBScript.ajax.jquery.json等等技术都是需要我们一一研究的! 刚刚接触了CSS部分的知识,但仅仅是这一小小的技术就让自己瞠目结舌,看似不起眼的东西却实现了自己日常网页操作中非常多的功能--信息的自动检测.友好的弹窗.绚丽的动态效果.体贴的个性化服务,让自己产生了很大的共鸣.总体来说这一块的知识并不是很多,但是要做好一个能够兼容性良好的页面也确实需要下一

DIV+CSS学习小结

DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统的通过表格布局定位的方式不同,它可以实现网页页面与表现想分离. 因为在牛腩还有JS都有大量的接触到CSS,到现在再学习DIV+CSS的时候,就不再感觉陌生了,都是共鸣~~ 无论怎么设置CSS样式,都少不了选择器和样式表. 样式表 样式表最主要的有三种.分别为嵌入式样式表,外部样式表和内联样式表. 嵌入式样式表 在html的<head></head>标签之间添加样式表. 示例: <head> <title

JavaWeb基础—CSS学习小结

重点记忆:四种结合方式 三种基本选择器 1.CSS:层叠样式表 相当于皮肤 提高了可维护性.样式与内容分离(注释格式/* */) 2.CSS与HTML结合的四种方式:内联式.嵌入式.外部式  1.每个标签上都有一个style[属性]来控制 sytle="key:value;key:value" <div style=""> 2.使用style标签:<style type="text/css">div{key:value}&

CSS学习(二)—浮动

一. 定义 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 解决的问题:"如何在一行显示多个div元素" 二. 浮动与不浮动区别 图1 图2 区别 不浮动的框是由上往下独占一行的,而浮动的框是紧靠着排列的.图2中d1.d2.d3都是向左浮动的,所以先把d1放在紧靠着父框摆放,然后把d2紧靠着d1摆放,最后d3紧靠着d2摆放.向右浮动亦与之类似. 语法: float : none | left |right 参数: none : 对象不浮动 left :

前端html、Javascript、CSS技术小结

简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页,只需要找找内部是否有html5的标志性标签就行了.然而平时虽然写了不少html,却没怎么关注它的发展史: GML(Generalized Marcup Language)通用标记语言 和SGML(Standard Generalized Markup Language)标准通用标记语言. 由Tim

《Pro AngularJS》学习小结-01

<Pro AngularJS>该书以一个SportsStore案例为主线铺开. 一.开发环境设置 该书中所用的server开发环境是Deployed,从来没听说过,而且作者也说该server没什么人用,我干脆弃用之.其他的环境包括 NodeJS--这个必须装 karma--测试环境,前期还没有用到,以后认真研究,毕竟AngularJS一大特点是Unit Test bootstrap--这个现在应该普遍使用了,O(∩_∩)O webstorm--现在唯一支持AngularJS插件的IDE 我基本

varnish学习小结

大纲 一.Varnish 简介 二.Varnish 特点 三.Varnish 与 Squid 对比 四.Varnish 设计结构 五.Varnish 工作流程 六.Varnish 状态引擎(state engine) 七.安装与配置 Varnish 一.Varnish 简介 Varnish是一款高性能的开源HTTP加速器,挪威最大的在线报纸 Verdens Gang 使用3台Varnish代替了原来的12台Squid,性能比以前更好. Varnish 的作者Poul-Henning Kamp是F

CSS+DIV小结

        第一次接触CSS,了解到CSS主要是为了弥补传统HTML语言要实现页面美工上的不足,维护困难,标记不足和定位困难等劣势而产生的.感觉还是挺有意思的,下面附图一张,算是初步小结,以后会不断完善的.有不足的地方欢迎指正~~                  总结:CSS的这部分学习东西相对基础,但都比较琐碎,在学习的过程中需要保持一定的耐心和细心.使用CSS制作网页时,一个基础要求就是主流的浏览器之间的显示效果要基本一致,通常的做法是一遍编写HTML和CSS代码,一边在两个不同的浏览

ExtJs学习笔记之学习小结LoginDemo

ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/res