CSS3中相关的笔记
(一)结构伪类选择器
常见的结构伪类选择器：
:first-child选取首个子元素:last-child选取最后一个子元素:nth-child(n)匹配属于父元素的地n个子元素 n的值，0.1.2.3…- 匹配偶数位置的子元素
:nth-child(even)或:nth-child(2n) - 匹配奇数位置的子元素
:nth-child(odd)或:nth-child(2n-1)或:nth-child(2n+1)
- 匹配偶数位置的子元素
nth-last-child与nth-child语法相同，不过nth-last-child是从最后一个元素开始的;nth-child:是从第一个元素开始的
实例
li:first-child{} /*选取首个子元素*/
li:last-child{} /*选取最后一个子元素*/
li:nth-child(n){} /*第n个子元素 n的值，0.1.2.3...*/
/*匹配偶数位置的子元素*/
li:nth-child(even){}
li:nth-child(2n){}
/*匹配奇数位置的子元素*/
li:nth-child(odd){}
li:nth-child(2n-1){}
li:nth-child(2n+1){}
(二)结构伪类选择器
:target目标伪类选择器，选择器可用于选取当前活动的目标元素
实例
<style>
/*:target目标伪类选择器，选择器可用于选取当前活动的目标元素*/
:target{color: red;}
</style>
<a href="#top">锚点</a>
<div id="top">
我是本页面锚点的内容点
</div>
(三)清除浮动
语法
在CSS中，clear属性用于清除浮动，基本语法如下：
选择器 { clear : 属性值 }
| 属性值 | 描述 |
|---|---|
| left | 清除左侧浮动 |
| right | 清除右侧浮动 |
| both | 清除左右两侧的浮动 |
用法
- 额外标签法
示例：
<div style="clear: both"></div>
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化比较差
- 给父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果
示例：
可以给父级添加： overflow : hidden | auto | scroll
优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏
- 使用after伪元素清除浮动
示例：
/*使用after伪元素清除浮动*/
.clearfix::after{
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
/*IE6 IE7专有*/
.clearfix{
*zoom: 1;
}
优点：符合闭合浮动思想，结构语义化正确
缺点：IE6.7不支持after
- 双伪元素清除浮动(推荐使用)
示例：
/*双伪元素清除浮动*/
.clearfix:before,.clearfix:after{
content: ".";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
(四)CSS的溢出与隐藏
1.防止文本框拖拽
<style>
textarea{
resize: none; /*防止文本域进行拖拽*/
}
</style>
<textarea name="name" id="" ></textarea>
2.溢出的文字隐藏
word-break:自动换行
- normal 使用浏览器默认的规则
- break-all 允许在单词内换行
- keep-all 只能在空格或者连字符处换行
**注意**主要处理英文单词
while-space:设置或检索对象文本显示方式，通常使用于强制一行显示内容
- normal 默认处理方式
- nowarp 强制所有文本在一行显示，直到遇到br
text-overflow文字溢出
- clip 不显示省略标记，只是简单的裁切
- elipsis 当对象文本溢出时显示省略标记(…)
text-overflow： clip | elipsis;
设置或检索是否使用一个省略标记(…)表示文本溢出
==注意：==一定要首先强制一行内显示，再次和 overflow 属性搭配使用。如下图：
white-space: nowrap; /*强制在一行显示*/
overflow: hidden; /*超过的部分隐藏*/
text-overflow: ellipsis;/*超出的部分用省略号(...)代替*/
(五)字体图标
第一步：在样式里面声明字体：告诉别人我们自己定义的字体 兼容不同浏览器
@font-face {
font-family: ">>==icoom==<<";
src: url("fonts/icomoon.eot?7kkyc2");
src: url("fonts/icomoon.eot?7kkyc2#iefix") format("embedded-opentype"),
url("fonts/icomoon.ttf?7kkyc2") format("truetype"),
url("fonts/icomoon.woff?7kkyc2") format("woff"),
url("fonts/icomoon.svg?7kkyc2#icoomoon") format("svg");
font-weight: normal;
font-style: normal;
}
第二步：给盒子使用字体
span{
font-family: ">>==icoom==<<";/*一定保证与上面的 font-family： 相同*/
}
第三步：盒子里面添加结构
span::before{
font-family: icoom;
font-size: 100px;
content: "\e96c";
}
/*或者*/
<span> </span>
主体代码：
<body>
<span> </span>
<div></div>
</body>
(六)滑动门实现
-
滑动门技术
- 它是从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。
核心技术：
核心技术就是利用css精灵图（主要是背景位置）和盒子padding撑开宽度，以便于能适应不同字数的导航栏。一般的经典布局如下：
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
基本样式：
a{
display: inline-block;
height: 33px;
background: url("image/ao.png") no-repeat;
padding-left: 15px;
}
span{
display: inline-block;
height: 33px;
background: url("image/ao.png") no-repeat right;
padding-right: 15px;
}
总结：
1.a设置背景左侧，padding撑开合适宽度
2.span设置背景右侧，padding撑开合适宽度，剩下由文字自动撑开宽度。
之所以 a 包含 span 就是因为整个导航都是可以点击
(七)动画animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画"
(八)BFC(块级格式化上下文)
BFC(Block formatting context)
那些元素会具有BFC的条件
不是所有的元素模式都能产生BFC，w3c 规范：
display 属性为 block, list-item, table 的元素，会产生BFC.
大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。
注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。
什么情况下可以让元素产生BFC
要给这些元素添加如下属性就可以触发BFC。
-float属性不为none
-position为absolute或fixed
-display为inline-block, table-cell, table-caption, flex, inline-flex
-overflow不为visible。
BFC元素所具有的特性
BFC布局规则特性：
1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
- BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
- 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的主要用途
BFC能用来做什么？
(1) 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。
主要用到
计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
(2) 解决外边距合并问题
外边距合并的问题。
主要用到
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。
(3) 制作右侧自适应的盒子问题
主要用到
普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文
BFC 总结
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。
(九)背景渐变
在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。
兼容性问题很严重，我们这里之讲解线性渐变
语法格式：
background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；
background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；
(十)CSS W3C 统一验证工具
CssStats 是一个在线的 CSS 代码分析工具
网址是： http://www.cssstats.com/
W3C 统一验证工具： http://validator.w3.org/unicorn/
因为它可以检测本地文件！！
(十一)CSS 压缩
通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。
w3c css压缩 http://tool.chinaz.com/Tools/CssFormat.aspx 网速比较慢
还可以去站长之家进行快速压缩。
http://tool.chinaz.com/Tools/CssFormat.aspx
(十二)文本溢出
1. 单行文本溢出隐藏显示省略号
p{
white-space: nowrap; /*强制文本一行显示*/
overflow: hidden; /*超出元素默认宽度内容隐藏*/
text-overflow: ellipsis; /*使用省略号代表有内容未显示*/
}
效果图：
2. webkit的多行文本溢出隐藏显示省略号
/*
-webkit-line-clamp: 用该属性来限定块元素内文本显示的行数。
display: -webkit-box; 将对象作为弹性的伸缩盒子显示
-webkit-box-orient: 设置伸缩盒子对象内子对象的排列方式
text-overflow:ellipsis; 使用省略号告诉用户有内容未显示
overflow:hidden; 超出本分隐藏
*/
p{
display: -webkit-box; /*将对象作为弹性的伸缩盒子显示*/
-webkit-box-orient: vertical; /*设置伸缩盒子对象内子对象的排列方式*/
-webkit-line-clamp:2; /*块元素内显示两行*/
overflow: hidden; /*超出本分隐藏*/
text-overflow: ellipsis;/*超出本分以省略号进行显示*/
}
效果图：
3. 通用的多行文本溢出隐藏显示省略号
p{
height: 30px;
line-height: 2em;
overflow: hidden;
border: 1px solid red;
position: relative;
}
p::after{
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding: 0 10px 0 10px;
background: #ffffff;
}
}
效果图：
扫一扫
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
