css复习笔记
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复习笔记的更多相关文章
- H5+CSS复习笔记(全)
1.自结束标签和注释 通常标签都是成对出现,如<h1></h1>,<div></div>等等.但是又些标签是没有结束标签的,成为自结束标签,如<i ...
- Html和Css学习笔记-html基础知识
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- Html和Css学习笔记-html进阶-html5属性
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- Html和Css学习笔记-html进阶-div与span
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- Html和Css学习笔记-css进阶-盒模型
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- Html和Css学习笔记-css基础知识
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- Angular复习笔记7-路由(下)
Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容 路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...
- Angular复习笔记5-指令
Angular复习笔记5-指令 在Angular中,指令是一个重要的概念,它作用在特定的DOM元素上,可以扩展这个元素的功能,为元素增加新的行为.本质上,组件可以被理解为一种带有视图的指令.组件继承自 ...
- angular复习笔记4-模板
Angular复习笔记4-模板 简介 模板是一种自定义的标准化页面,通过模板和模板中的数据结合,可以生成各种各样的网页.在Angular中,模板的默认语言是HTML,几乎所有的HTML语法在模板中都是 ...
随机推荐
- 对依赖倒置原则(DIP)及Ioc、DI、Ioc容器的一些理解
1.概述 所谓依赖倒置原则(Dependence Inversion Principle)就是要依赖于抽象,不要依赖于具体.简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了客户与实现模 ...
- 基于Java的数据采集(终结篇)
关于写过关于JAVA采集入库的三篇文章: 基于Java数据采集入库(一):http://www.cnblogs.com/lichenwei/p/3904715.html 基于Java数据采集入库(二) ...
- Python——目录操作
注意之前要import os 1.获得当前路径 在Python中可以使用os.getcwd()函数获得当前的路径.其原型如下所示. os.getcwd() 该函数不需要传递参数,它返回当前的目录.需要 ...
- JS 传递对象问题,指针引用
$(function () { var test1 = function (args) { args.name = "lcc2"; args = { name: "lcc ...
- 3D全景!这么牛!!
如果你用过网页版的百度地图,你大概3D全景图浏览是一种怎样的酷炫体验:在一个点可以360度环顾周围的建筑.景色,当然也可以四周移动,就像身临其境. 全景图共分为三种: ①球面全景图 利用一张全景图围成 ...
- Web程序员开发App系列 - 调试Android和IOS手机代码(补图)
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
- ubuntu14.04 编译安装gcc-5.3.0
最近编译个源码,要求对C++14的支持了,就GCC的编译安装最新的5.3.0,整个过程以root用户进行. 1.下载GCC源码,属于事后文档整理,已经不知道从哪下载了. 2.解压:tar -zxvf ...
- ubuntu14.04编译安装Git2.7
在开源中国看文章, 随意之间, 在软件资讯栏看到git 2.7的信息. 一直在使用在git 1.9.1, 心中突感, 这个git 2.7是个什么东西, 怎么git的版本更新有如此快么. 印象里, 老外 ...
- 基于HTML5的电信网管3D机房监控应用
先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网 ...
- CentOS6.5菜鸟之旅:关于搜索的shell命令
一.locate命令 用于模糊搜索文件(目录)的绝对路径. 示例1: // 凡是绝对路径当中含jdk字符串的文件(目录)均被搜索出来 fsjohnhuang@fsjohnhuang~# locate ...