margin:

1. 当有三个值时第一个值为上,第二个值为左右,第三个值为下。

2.margin外边距折叠,水平没有,垂直会折叠,且折叠后以两者最大值为准。另外,当一个元素包裹另一元素时也会发生折叠。折叠条件:垂直,包含。

3.margin用于来居中时auto要作用于左右,margin上下值会忽略auto。

padding:

1.padding不接受负值,margin接受负值且很重要,用于垂直居中。

2.padding对auto无效。

3.不存在内边距折叠。

overflow:

属性值有:visible(默认)hidden(隐藏不显示)scroll(滚动条)auto(必要时才显示滚动条)。

float:

属性值有:left,right,none(默认)。

块级元素设置浮动后会取消块级元素的“扩展适应”,也就是在没有制定高和宽的情况下有原来的占满整行变为自适应内容大小。

浮动之后他们的外边距不再折叠。

浮动元素会当作块级元素来对待。

浮动的元素只影响紧跟其后的元素,对于前面相邻的元素没有影响。

清除浮动:

对于段落(文字环绕)来说:在受影响的元素上设置

                                    1.clear:both

                                    2.设置宽度width:100%(或固定值(清除对父元素的影响是width可为具体值)),再设置overflow:hidden(非visible)

                                    3.添加换行标签<br/> <br/> (不推荐,无意义)

                                    4.在浮动元素后添加空标签<div>在css中设置其clear:both;

5.同样的思想。使用伪元素:after :befor (注意要配合content)

                                    

                                    二、对于因子元素浮动导致父元素塌陷的问题,对父元素设置clear无效,因为clear用于浮动元素后的元素。要采用width:100%和overflow:hidden来清除父   
元素的塌陷问题

z-index:

z-index还可以接受负值。默认auto。且只对定位的元素起作用。opacity:0.9(opacity小于1)能改变元素层级。

top,right,bottom,left默认值为:auto。

结构化伪类:

:last-child 选中最后一个子元素。

:first-child 选中第一个子元素。

:nth-child(n)选中第n个子元素,n的范围(1-n)。

:first-letter 选中第一个字母。

:first-line 选中第一行。

+ 选中下一个兄弟元素,直接相邻兄弟。

~ 间接相邻兄弟。

> 选中子元素。(排除孙子元素)

[ ] 属性选择器,例如input[ name] 只选中具有name属性的input。

input[name='username']只选中name属性为username的input元素。

input[id$='name']只选中id属性值以name结束的input元素。即:nameXX。

input[id^='name']只选中id属性值以name开始的input元素。即:XXname。

input[id*='name']只选中id属性值包含name的input元素。即:XXnameXX 或 XXname或nameXX。

css复习笔记的更多相关文章

  1. H5+CSS复习笔记(全)

    1.自结束标签和注释 通常标签都是成对出现,如<h1></h1>,<div></div>等等.但是又些标签是没有结束标签的,成为自结束标签,如<i ...

  2. Html和Css学习笔记-html基础知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  3. Html和Css学习笔记-html进阶-html5属性

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  4. Html和Css学习笔记-html进阶-div与span

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  5. Html和Css学习笔记-css进阶-盒模型

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  6. Html和Css学习笔记-css基础知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  7. Angular复习笔记7-路由(下)

    Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容 路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...

  8. Angular复习笔记5-指令

    Angular复习笔记5-指令 在Angular中,指令是一个重要的概念,它作用在特定的DOM元素上,可以扩展这个元素的功能,为元素增加新的行为.本质上,组件可以被理解为一种带有视图的指令.组件继承自 ...

  9. angular复习笔记4-模板

    Angular复习笔记4-模板 简介 模板是一种自定义的标准化页面,通过模板和模板中的数据结合,可以生成各种各样的网页.在Angular中,模板的默认语言是HTML,几乎所有的HTML语法在模板中都是 ...

随机推荐

  1. ODAC (V9.5.15) 学习笔记(二十)大数据量获取处理

    ODAC获取数据的效率比较高,在Web程序中希望能够更快获取第一页的数据时,可以有几种方式: 1.在数据库中进行分页处理: 2.获取所有数据,只是快速返回第一页数据. 第一种方案对应用服务器资源消耗最 ...

  2. 在自己的框架中引用 PHPExcel

    如果直接在框架中的controller中直接引用 xxxx/PHPExcel.php,由于框架中有autoload 与PHPExcel的autoload冲突(加载目录原因), 那么在不想做太多修改的情 ...

  3. js类(继承)(二)

    1. 定义js类 js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Sh ...

  4. Base64 算法原理,以及编码、解码【加密、解密】 介绍

    Base64编码,是我们程序开发中经常使用到的编码方法.它是一种基于用64个可打印字符来表示二进制数据的表示方法.它通常用作存储.传输一些二进制数据编码方法!也是MIME(多用途互联网邮件扩展,主要用 ...

  5. Java后端书架

    本书架主要针对Java后端开发与架构. 更新记录:4.0版把第五部份-具体技术的书整块拿掉了.<TCP/IP详解 卷1:协议>出到了第二版,增加<SRE:Google运维解密> ...

  6. gulp-clean----gulp系列(五)

    前面说过,当css,img,js出现删除操作的时候,虽然watch会监听,但是并不会删除相应文件. 现在实现clean任务,执行任务前先删除一次build目录. 先配置JS任务,设置删除目录. 在系列 ...

  7. 哀悼我的第一次"创业"经历

    下周考完最后一科,大学四年时光基本上算是落下帷幕,剩下的就只是整整毕业设计了.如果按照正常的节奏,这个学期应该能够搞完毕业设计的2/3,但无奈还在广州的一家公司里面实习,没有多少时间弄,得拖到3月了. ...

  8. Dictionary序列化和反序列化

    public class SerializeHelper { public static string XmlSerialize(List<CustomSearchEntity> obj) ...

  9. 三、Authentication & sessionid

    客户在访问Django的某些敏感资料时,被要求需要先登录,客户通过/admin/login进行登录,客户登录成功后,Django给客户分配一个sessionid,后续的访问过程,客户端只需在http头 ...

  10. eclipse中去掉Js/javsscript报错信息

    1.首先在problem>errors中删除所有js错误: 如下图 2.然后再勾选掉javascript Validator: 3.clean下项目吧,你会发现再也不出现js红叉叉了,哈哈.