李洪强和你一起学习前端之(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
->静态定位
->绝对定位(看脸型)
脱标
模式转换
相对定位
->没有脱标
->子绝父相
固定定位
脱标
模式转换
最新文章
- centos6.6 安装jdk1.7
- 新提交审核app保留检查更新入口将被拒绝(读取App Store 版本号的)
- SQL语句中&;、单引号等特殊符号的处理
- $.extend abc
- while (cin&;gt;&;gt;str)退出死循环
- build/core/config.mk
- JS获取年月日时分秒
- numastat的理解
- Python 异常处理
- 【JDK1.8】JDK1.8集合源码阅读——总章
- 【Python】 关于import和package结构
- BZOJ_3944_Sum_杜教筛
- 总结vue中父向子,子向父以及兄弟之间通信的几种方式
- curl请求
- 宝塔搭建laravel所需要的lnmp环境linux-nginx-mysql-php-composer-git
- Go学习笔记01-环境搭建
- 关于tcp的三次握手与四次挥手,以及粘包
- 通过修改EIP寄存器实现32位程序的DLL注入
- [非常重要的总结] Linux C相关函数
- StringBuffer类的常用方法
热门文章
- [Linux] Linux smaps接口文件结构
- 《Go语言实战》笔记之第四章 ----数组、切片、映射
- Java数据库编程——事务
- python学习:两个py文件间的函数调用
- TensorFlow------TFRecords的读取实例
- Hibernate异常:Unable to locate appropriate constructor on class
- NDK下vfork+execl启动程序
- easyui中combotree只能选子选项,父级不被选中
- Android studio及eclipse中的junit单元測试
- 如何监控Tomcat服务器