李洪强和你一起学习前端之(8)CSS复习
今天是2017年3月24日周五
每一天都是余生当中最好的一天,珍惜当下.
CSS基础复习
1 复习
1.1Css第一天
css层叠样式表
基础选择器
标签选择器
p{属性: 值;}
类选择器
.自定义类名{}
通过class调用
id选择器
#自定义名{}
通配符选择器
*{} 所有元素选中
复合选择器
标签指定式选择器
标签名.(#)选择器{}
后代选择器
选择器 选择器 {}
标签关系包含嵌套关系
并集选择器
选择器 选择器 {}
属性选择器
/*属性选择器*/
input[type][id]{
color: red;
}
子代选择器
/*子代选择器*/
div > span{
color : red;
}
注意: 子代选择器,直接选择父元素中的直接子元素
<div>
<p>
<span>p中的span</span>
</p>
<span>
div中的span
</span>
</div>
注意: div中的span元素会被选中
1.2Css第二天
->内嵌式写法
->外联式写法
使用link标签中的 Href = ""属性将外部样式表引入到当前页面中
行内式写法
分类:
->块级元素
->行内元素
->行内块元素
Display: block
Display: inline-block
Display: inline
三大特性:
->层叠性
->继承性
有关文字的属性都可以实现继承
a不能直接继承父元素中的文字大小
标题标签不能直接继承父元素中的文字大小
->优先级
继承的权重为0
权重会叠加
伪类:
a : link{
} 超链接默认样式
a: visited{
} 访问过后的样式
a: hover{
} 鼠标移动到元素上的样式
:active{
}超链接激活的样式
:focus{
}获取焦点的样式
1.3Css第三天
行高可以继承
行高单位
单独给一个标签设置行高
Font-size: 20px
Px em % 不带单位
盒模型
border
padding
盒子内容距离盒子边框之间的距离
边框和内边距可以影响盒子大小
继承的盒子padding值在父元素宽度范围内,不影响盒子大小
margin
垂直外边距合并
外边距盒子坍陷问题
->给父盒子设置border值
->给父盒子设置overflow: hidden
1.4Css第四天
浮动
->浮动的元素不占位置(脱标)
->设置浮动可以实现元素模式的转换
->块级元素在一行上显示
->图片文字环绕
->网页布局
定位
Position
->静态定位
->绝对定位(看脸型)
脱标
模式转换
相对定位
->没有脱标
->子绝父相
固定定位
脱标
模式转换
李洪强和你一起学习前端之(8)CSS复习的更多相关文章
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类
亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...
- 李洪强和你一起学习前端之(1)Html基础
1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试) Ctrl + c 复制 Ctrl + v 粘贴 Ctrl + a ...
- 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动 特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素 作 ...
- 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
- 李洪强和你一起学习前端之(4)HTML5介绍
1.1认识HTML5 html的版本: html4 Xhtml1.0 目前: html5是最高的版本 再怎么变化,无非是多了一些标签而已,但是不单单是提供了一些标签 比如: 开发网页游戏 我们可以开发 ...
- 李洪强iOS经典面试题144-数据存储
李洪强iOS经典面试题144-数据存储 数据存储 sqlite中插入特殊字符的方法和接收到处理方法. 除'其他的都是在特殊字符前面加"/",而 ' -> '' .方法:k ...
- 李洪强iOS经典面试题142-第三方框架及其管理
李洪强iOS经典面试题142-第三方框架及其管理 第三方框架及其管理 使用过CocoaPods吗?它是什么?CocoaPods的原理? CocoaPod是一个第三方库的管理工具,用来管理项目中的第 ...
随机推荐
- Sata win7 热插拔(AHCI)
主板支持AHCI,把sata模式改成AHCI,在bios打开SATA热插拔开关 开启AHCI,需要修改注册表:HKEY_LOCAL_MACHINE\System\CurrentControlSet\S ...
- IntelliJ IDEA的几种常见的快捷键
在编写代码的时候直接输入psv就会看到一个psvm的提示,此时点击tab键一个main方法就写好了. psvm 也就是public static void main的首字母. 依次还有在方法体内键入f ...
- linux面试题目--1
Linux面试题目 填空题1. 在Linux系统中,以 (文件)方式访问设备 .2. Linux内核引导时,从文件/etc/fstab 中读取要加载的文件系统.3. Linux文件系统中每个文件用i节 ...
- Unity3D新手教学,让你十二小时,从入门到掌握!(一) [转]
http://blog.csdn.net/aries_h/article/details/47307799 版权声明:本文为Aries原创文章,转载请标明出处.如有不足之处欢迎提出意见或建议,联系QQ ...
- Chrome DevTools快捷键
- r与java整合(转)
http://jliblog.com/archives/10 R是统计计算的强大工具,而JAVA是做应用系统的主流语言,两者天然具有整合的需要.关于整合,一方面,R中可以创建JAVA对象调用JAVA方 ...
- leetcode 题解 || Letter Combinations of a Phone Number 问题
problem: Given a digit string, return all possible letter combinations that the number could represe ...
- openerp js调用Python类方法
转自:http://blog.csdn.net/kuaileboy1989/article/details/42875497 js调用.py文件中定义的类 形式如下: //创建product.prod ...
- linux下的QQ执行玩法:pidgin-lwqq
安装pidgin: sudo apt-get install pidgin 安装pidgin-lwqq: sudo add-apt-repository ppa:lainme/pidgin-lwqq ...
- FTP命令使用详解
FTP命令是Internet用户使用最频繁的命令之一,不论是在DOS还是UNIX操作系统下使用FTP,都会遇到大量的FTP内部命令.熟悉并灵活应用FTP的内部命令,可以大大方便使用者,并收到事半功倍之 ...