HTML与CSS学习笔记(5)
1、文字阴影?(针对文字)
text-shadow:
例如 text-shadow: 10px 10px 10px blue;四个值分别是 x y blur color
blur表示模糊值,越大越模糊
注:阴影的默认颜色是跟文字的颜色相同;通过逗号的方式进行分割,可以设置多阴影
2、box-shadow:盒子阴影(针对容器)
x
y
blur
color
inset
多阴影
例如: box-shadow: 10px 10px 10px 30px blue inset; 前面三个属性依次是x y blur,30px表示:容器周围模糊的扩散范围;inset表示内阴影,默认情况为外阴影
注:盒子阴影默认颜色是黑色。默认就是外阴影,如果设置outset不起作用,可选的值只有inset:内阴影;同样可以设置多阴影,用逗号隔开
3、mask遮罩
属性值:url
repeat
x
y
w
h
多遮罩
注:mask目前还没有标准化,需要添加浏览器前缀;默认是x y 都平铺
4、倒影
box-reflect(也没有标准,要加浏览器前缀)
above:表示上面的方向
below:表示下面的方向
left:左边
right:右边
距离
遮罩|渐变
注:渐变:只是针对透明度的渐变不支持颜色的渐变
scaleX(-1);scale()取不同轴的负值可以达到图片翻转的效果
5、模糊与计算
blur
filter:blur()
calc:可以实现百分比与像素的计算
例如:width:calc(100% - 100px);无理父容器多大,该子容器始终保持与父容器右边框相差100px距离
四则运算
6、分栏布局
column-count:分栏的个数;与column-width冲突只能设置一个
column-width:分栏的宽度
column-gap:分栏的间距
column-rule:分栏的边线
column-span:合并分栏,比如标题
7、伪类与伪元素
在css2.1中对伪类和伪元素的区别比较模糊,css3中对这两个概念做了比较清晰的解释,并且在语法上也做了很明显的区分。
css3中规定伪类由一个冒号开始,然后为伪类的名称;伪元素由两个冒号开始,然后是伪元素的名称、
伪类本质上是为了弥补常规css选择器的不足,以便获取到更多的信息。通常表示获取不存在于DOM树中的信息,或获取不能被常规css选择器获取的信息:
:hover
:focus
:empty
...
伪元素本质上是创建了一个有内容的虚拟容器,并对该虚拟容器添加样式。这个容器不包含任何DOM元素,但是可以包含内容,另外,开发者还可以为伪元素定制样式。
::selection
::first-line/first-letter
::before/after:往容器里面添加行内元素,并且可以修改行内元素的样式,故为伪元素
...
*伪类和伪元素的区别:
伪类是为了弥补css选择器的不足,添加的样式是在实际容器上:
/* 该背景属性通过伪类hover添加到box上去了,弥补了box选择器的不足 */
.box:hover{background: red;}
伪类元素则是虚拟一个有内容的容器,并对该容器添加样式:
为box容器中被选中的内容添加样式,这里被选中的内容即为一个虚拟的容器
.box::selection{background: red;color: yellow;}
8、css Hack(了解)
CSS Hack用来解决浏览器的兼容性问题,为不同版本的浏览器定制编写不同的CSS效果,使用每个浏览器单独识别的样式代码,控制浏览器的显示样式。
Hack分类:
1、CSS属性前缀法
是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展示效果。
前缀标识 兼容浏览器
_ IE6
+、* IE6、IE7
\9 IE6~IE9
\0 IE8~IE11
2、选择器前缀法
是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
前缀标识 兼容浏览器
*html IE6
*+html IE7
:root IE9以上及现代浏览器
3、IE条件注释法
这是一种IE浏览器转悠的Hack写法,微软官方推荐使用的hack方式
前缀标识 兼容浏览器
<!--[if IE]>...<![endif]--> IE
<!--[if IE 7]>...<![endif]--> IE7
<!--[if lte IE]>...<![endif]--> IE7以下
<!--[if ! IE 7]>...<![endif]--> 非IE7
注:IE10以上已经不支持注释法了(了解即可)
9、IE低版本的BUG(部分)
常见兼容性问题
1、透明度:opacity:IE8及以下版本不识别,写成兼容性写法:filter: alpha(opacity=50);
2、双边距:
/* IE6下的双边距bug,及解决方案 */加:_display:inline;(加_表示仅针对IE6)
.box{float:left;width: 100px;height: 100px;background: red;margin-left: 50px;_display:inline;}
3、最小高度:
/* IE6下的最下高度bug,最小高度为19px */
解决方法为加overflow-hidden;
4、图片链接产生边框:
<a href="#">
<img src="../img/练习1.jpg" alt="">
</a>
解决方法: img{border: none;}
10、渐进增强与优雅降级
渐进增强:针对低版本的浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和最佳功能达到更好地用户体验。
优雅降级:一开始就构建完整的功能,然后在针对低版本浏览器进行向下兼容(用不同方式实现和高级浏览器上一样的显示效果)
11、网页布局扩展
1、等高布局:
子容器的margin如果取负值则,则会使父容器的高度小于子容器的高度:
利用margin负值和padding的组合实现:
.parent{border: 10px black solid;overflow: hidden;}
.box1{float: left;width: 100px;background:red;margin-bottom: -2000px;padding-bottom: 2000px;}
.box2{float: right;width: 100px;background:blue;margin-bottom: -2000px;padding-bottom: 2000px;}
随着box1和box2内容的变多撑大父容器漏出hidden的区域,实现一种等高效果
2、三列布局:左右固定,中间自适应
1、BFC方式
2、定位
3、浮动(双飞翼布局、圣杯布局)(了解,一般用flex来做)
终点了解:利用margin负值
4、flex弹性
HTML与CSS学习笔记(5)的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记:溢出文本省略(text-overflow)
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
随机推荐
- MyBatis中特殊符号的转义
在MyBatis中遇到特殊符号时有两种转义方式: 第一种 描述 空格 小于 大于 小于等于 大于等于 与 单引号 双引号 原符号 < > <= >= & ' " ...
- Linux内核源码分析--内核启动之zImage自解压过程【转】
转自:https://www.cnblogs.com/pengdonglin137/p/3838245.html 阅读目录(Content) zImage来历 piggy.gz压缩文件的特点 vmli ...
- Java学习笔记(5)--- Number类和Math 类,String类的应用,Java数组入门
1.Number 和 Math 类: 在实际开发过程中,我们经常会遇到需要使用对象,而不是内置数据类型(int,double,float这些)的情形. 这种由编译器特别支持的包装称为装箱,所以当内置数 ...
- 克服悲伤情绪的三个P原则
1.自责(Personalization) --不要自责 2.永久化(Permanence) --悲伤不会永远存在,一切都会过去 据科学研究发现:人遇到开心或悲伤的事情之后,心情在短期内会产生巨大的波 ...
- 浅谈JS重绘与回流
在说浏览器渲染页面之前,我们需要先了解两个点,一个叫 浏览器解析 URL,另一个就是本章节将涉及的 重绘与回流: 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新, ...
- navicat使用教程-PJ
navicat使用教程-PJ Navicat Keygen Patch是一款专门针对Navicat系列软件出品的一款小巧实用,功能强大的破解辅助工具.它能够实现对Navicat全系列版本进行激活破解, ...
- 大话设计模式Python实现-组合模式
组合模式(Composite Pattern):将对象组合成成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性. 下面是一个组合模式的demo: #!/us ...
- 学习UML类图
在类图中一共包含以下几种模型元素,分别是:类(class).接口(interface)以及类之间的关系. 1.类(class) 在面向对象编程中,类是对现象世界中一组具有相同特征的物体的抽象. 2.接 ...
- github上星星1万多的python教程推荐收藏
简单的说,Python是一个“优雅”.“明确”.“简单”的编程语言. 学习曲线低,非专业人士也能上手 开源系统,拥有强大的生态圈 解释型语言,完美的平台可移植性 支持面向对象和函数式编程 能够通过调用 ...
- 【学习笔记】动态规划—各种 DP 优化
[学习笔记]动态规划-各种 DP 优化 [大前言] 个人认为贪心,\(dp\) 是最难的,每次遇到题完全不知道该怎么办,看了题解后又瞬间恍然大悟(TAT).这篇文章也是花了我差不多一个月时间才全部完成 ...