什么是css
用于美化页面, 装饰页面的
css样式规则
#dv {width: 32px; height: 40; color:"red"}
1, 选择器后面跟一个花括号, 选择器和花括号之间要有一个空格
2, 花括号内有多个键值对, 每一对后面跟个分号
3, 数值不用双引号, 字符串需要双引号
css样式属性
font-size: 字号大小
单位:
- em: 相对于文本字体大小
- px:像素
- in: 英寸
- cm:厘米
- mm: 毫米
- pt:点
font-family: 字体
p{ font-family:“微软雅黑”;} 直接写中文xp系统不支持
方法一: 写对应的英文
方法二: 写对象的编码
字体名称 | 英文名称 | Unicode 编码 |
---|---|---|
宋体 | SimSun | \5B8B\4F53 |
新宋体 | NSimSun | \65B0\5B8B\4F53 |
黑体 | SimHei | \9ED1\4F53 |
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
隶书 | LiSu | \96B6\4E66 |
幼园 | YouYuan | \5E7C\5706 |
华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
细明体 | MingLiU | \7EC6\660E\4F53 |
新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
font-weight: 字体粗细
font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。
数字 400 等价于 normal,而 700 等价于 bold。 但是我们更喜欢用数字来表示。
font-style: 字体风格
font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。
font综合设置
选择器{font: font-style font-weight font-size/line-height font-family;}
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
选择器
标签选择器 (元素选择器)
标签名 {键:值;键:值};
例如: div {width:300px; height:300px}
<div></div>
类选择器
这个类名可以被多个标签使用, (多个标签起同一个类名)
.类名 {键:值;键:值};
例如: .dv {width:300px; height:300px}
<div class = "dv"></div>
多类名选择器
一个标签名, 有多个选择器名
#noe {键:值;键:值};
#tow {键:值;键:值};
#three {键:值;键:值};
例如: #noe #tow #three {width:300px; height:300px}
<div id="noe tow three"></div>
id选择器
这个id名只能使用一次, (只能有一个标签使用)
#id名 {键:值;键:值};
例如: #dv {width:300px; height:300px}
<div id="dv"></div>
通配符选择器
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如: * {margin: 0; padding: 0;}
伪选择器
连接伪类选择器
-
:link 未访问的连接
- visited 已访问的连接 :hover 鼠标移动到连接上
- active 选定的连接
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}
结构(位置)伪类选择器
:first-child 选取属于其父元素的首个子元素的指定选择器
:last-child 选取属于其父元素的最后一个字元素的指定选择器
:nth-child(N) 匹配属于父元素的第N个字元素, 不论元素类型
:nth-last-child(N) 选取匹配属于其元素的第N个元素的每一个元素,不论元素类型, 从最后一个元素开始计数
li:first-child { /* 选择第一个孩子 */
color: pink;
}
li:last-child { /* 最后一个孩子 */
color: purple;
}
li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue;
}
目标伪类选择器
:target, 用于选取当前活动的目标元素
:target {
color: red;
font-size: 30px;
}
复合选择器
交集选择器
交集选择器由两个选择器构成, 期中第一个为标签选择器, 第二个为类选择器, 中间不能有空格
含义: 交集为并且的意思, (选中的是P标签, 并且这个标签的类名叫noe)
标签名.类名 {键:值; ...}
例如: p.noe {width:200px; height:200px}
并集选择器
由多个选择器 构成, 可以是标签选择器,类选择器id选择器. 中间由逗号隔开
含义: 和的意思, (P, ,noe,#tow,三个都这个设置)
标签名,.类名,#id名 {键:值; ...}
例如: p,.noe,#tow {width:200px; height:200px}
后代选择器 (包含选择器)
由多个选择器组成, 可以是标签,类名, id名, 中间由空格隔开
含义: 层级选中 (选择爷元素下的, 子元素下的, 曾孙元素, 将该元素设置属性),
注意: 可以隔代选择 ,只要是子孙(被包含的)都可以选择
标签名 .类名 #id名 {键:值; ...}
例如: p .noe #tow {width:200px; height:200px}
子元素选择器
由多个选择器组成, 可以是标签,类名, id名, 中间由大于号隔开
含义: 选择爷元素下的, 父元素下的, 子元素下的, 曾孙元素, 将该元素设置属性
注意: 只能选择自己的子元素, 一层一层选择下去, 不能跳过子元素直接选中曾孙元素
标签名>.类名>#id名 {键:值; ...}
例如: p>.noe>#tow {width:200px; height:200px}
属性选择器
**选择器 | **示例 | **含义 |
---|---|---|
E[attr]**** | 存在attr属性即可 | |
E[attr=val]**** | 属性值完全等于val | |
E[attr*=val]**** | 属性值里包含val字符并且在“任意”位置 | |
E[attr^=val]**** | 属性值里包含val字符并且在“开始”位置 | |
E[attr$=val]**** | 属性值里包含val字符并且在“结束”位置 |
/* 获取到 拥有 该属性的元素 */
li[type] {
border: 1px solid gray;
}
/* 获取 属性等于某个值的 元素 属性值 可以使用 引号进行包裹 */
li[type="vegetable"] {
background-color: green;
}
/* 使用空格分隔的 多个属性 其中有某个属性即可获取 */
li[type~="hot"] {
font-size: 40px;
}
/* 获取以某个属性开头的语法 */
li[color^='green'] {
background-color: orange;
}
/* 获取以某个值 结尾的属性 */
li[type$='t']{
color: hotpink;
font-weight: 900;
}
/* 获取 属性中 拥有某个值的 元素 */
li[type*=ea] {
font-size: 100px;
}
/* 如果属性的值 只有very 也能够获取 用来获取 多个属性 并且 使用-连接 */
li[price|='very'] {
background-color: darkred;
}
<ul>
<li\ type=‘fruit’ color=‘green’>西瓜</li>
<li\ type=‘vegetable’ color=‘greenyellow’>西兰花</li>
<li\ type=‘meat’>牛肉</li>
<li\ type=‘meat hot’>猪肉</li>
<li\ type=‘drink hot’>可乐</li>
<li\ type=‘drink hot’>雪碧</li>
<li\ price=‘very-cheap’>红酒</li>
<li\ price=‘very’>白酒</li>
</ul>
伪元素选择器
-
E::first-letter文本的第一个单词或字(如中文、日文、韩文等)
-
E::first-line 文本第一行;
-
E::selection 可改变选中文本的样式;
p::first-letter { font-size: 20px; color: hotpink; } /* 首行特殊样式 */ p::first-line { color: skyblue; } p::selection { /* font-size: 50px; */ color: orange; }
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。
div::befor {
content:"开始";
}
div::after {
content:"结束";
}
E:after、E:before 在旧版本里是伪元素,CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before,这样做的目的是用来做兼容处理。
“:” 与 “::” 区别在于区分伪类和伪元素
css外观属性
color: 文本颜色
有三种取值
1.预定义的颜色值,如red,green,blue等。
2.十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。
3.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
line-height: 行间距
有三种单位
px, em, %
text-align: 水平对齐
1, left: 左对齐(默认)
2, right: 右对齐
3, center: 居中
text-index: 首行缩进
单位 em, 一个 em 就是一个字的宽
letter-spacing: 字间距
字与字之间的距离, 单位可以是数值, 默认值为normal
word-spacing: 单词间距
单词与单词之间的距离, 单位可以是数值, 默认值为normal
颜色透明度
color: rgba(r,g,b,a) a 是alpha 透明的意思 取值范围 0~1之间 color: rgba(0,0,0,0.3)
text-shadow:文字阴影
给文字添加阴影
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
h-shadow: 必写, 水平阴影, 允许负值
v-shadow: 必写, 垂直阴影, 运行负值
blur: 可选 模糊距离
color: 可选
css书写位置
行内样式 (内联样式)
将样式直接写的标签中
内部样式(内嵌式)
在head内, 写style标签, 在style标签中写
外部样式 (外链式)
1, 写一个css文件, 直接写在文件内
2, 在需要的页面, head中引入
<link rel="stylesheet" href="xxx.css">
display: 标签显示模式
块级元素block-level
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。
行内元素inline-level
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签最典型的行内元素。
块元素 和 行内元素的区别
块级元素特点:
1, 总是从新的一行开始
2, 高,宽,外边距, 内边距都 可以控制
3, 默认宽为容器的100%
4, 可以容纳行内元素和其他元素
行内元素的特点:
1, 和相邻的行内元素在同一行
2, 高宽无效,但是水平方向的mrign和padding可以设置,垂直方向无效
3, 默认高度就是内容的高度
4, 行内元素只能容纳文本或其他行内元素
行内块元素inline-block
在行内元素中有几个特殊的标签——<img />、<input />、<td>,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。
css背景background
background-image背景图片
background-image : none | url (url)
none: 无背景图(默认)
url: 图片地址, 不要双号
background-repeat背景平铺
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat : 背景图像在纵向和横向上平铺(默认的)
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺 (单横向平铺)
repeat-y : 背景图像在纵向平铺 (单纵向平铺)
background-position背景位置
background-position : length || length
background-position : position || position
length : 百分数 | 由浮点数字和单位标识符组成的长度值
position : top | center | bottom | left | center | right
1, 设置或检索对象的背景图像位置。必须先指定background-image属性。
2, 默认值为:(0% 0%)。
3, 如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
background-attachement背景附着
background-attachment : scroll | fixed
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
说明: 设置或检索背景图像是随对象内容滚动还是固定的。
背景简写
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
rgba(0,0,0,0.3)背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。
同样, 可以给 文字和边框透明 都是 rgba 的格式来写。
color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
###### background-size背景缩放(CSS3)
background-size: 300px 100px;
background-size: contain;
background-size: cover;
a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)
b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
多背景(CSS3)
以逗号分隔可以设置多背景,可用于自适应布局
background-image: url('images/gyt.jpg'),url('images/robot.png');
css三大特性
层叠 继承 优先级
css层叠
是指css的样式重复, 当浏览器发现两个选择器设置同一个元素时, 会将另一个的选择器样式覆盖掉,
如果出现样式冲突, 会按照css书写的顺序, 以最后的样式为标准
css基础
有两个元素是嵌套关系(父子元素), 给父元素设置样式, 子元素也会基础到父元素的样式
继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
css优先级
默认样式 < 基础样式 < 通配符 < 标签名 < class < id < 行内样式
设置!important该样式优先级最大
div {
width: 300px;
height: 300px;
background-color: red !important; //无法基础, 基础权重为0
}
css的特殊性
关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下:
specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
继承或者* 的贡献值 | 0,0,0,0 |
---|---|
每个元素(标签)贡献值为 | 0,0,0,1 |
每个类,伪类贡献值为 | 0,0,1,0 |
每个ID贡献值为 | 0,1,0,0 |
每个行内样式贡献值 | 1,0,0,0 |
每个!important贡献值 | ∞ 无穷大 |
例如:
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
注意: 数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。
盒子模式
CSS就三个大模块: 盒子模型 、 浮动 、 定位
盒子边框border
border : border-width border-style border-color
例如: border: 1px solid red;
边框属性—设置边框样式(border-style)
边框样式用于定义页面中边框的风格,常用属性值如下:
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最为常用的)
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线
设置单边样式
设置内容 | 样式属性 | 常用属性值 |
上边框 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色; | |
下边框 | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色; | |
左边框 | border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色; | |
右边框 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色; | |
样式综合设置 | border-style:上边 [右边 下边 左边]; | none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线 |
宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 |
颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
边框综合设置 | border:四边宽度 四边样式 四边颜色; |
圆角边框
Border-radius: 水平半径/垂直半径;
border-radius: 左上角 右上角 右下角 左下角;
单位: px || %
内边距padding
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
当关键字后面跟的数值不一样时, 表达的意思也不一样
值的个数 | 表达意思 |
---|---|
1个值 | padding:上下左右边距 比如padding: 3px; 表示上下左右都是3像素 |
2个值 | padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
3个值 | padding:上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
4个值 | padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
外边距marign
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
清除元素的默认内外边距
元素之间是有默认内外边距的
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
边距合并
1, 如果有两个元素是垂直上下的关系时.
当上元素设置了下外边距为20, 下元素设置了上外边距为10. 这个边距将会合并, 最后的边距为最大的哪一方
解决方法: 避免这种行为即可
2, 如果有两个元素嵌套垂直关系.
父元素没有上内边距及边框, 父元素的上外边距和子元素的上外边距发生合并, 合并边距为两者最大的那个值, 即使父元素的上外边距是0也会发生合并
解决方法:
1. 可以为父元素定义1像素的上边框或上内边距。
2. 可以为父元素添加overflow:hidden
盒子的大小
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
注意:
1、宽度属性width和高度属性height仅适用于块级元素,对行内元素无效( img 标签和 input除外)。
2、计算盒子模型的总高度时,还应考虑上下两个盒子垂直外边距合并的情况
盒子模型布局稳定性
按照 优先使用 宽度 (width) 其次 使用内边距(padding) 再次 外边距(margin)。
原因:
-
margin 会有外边距合并 还有 ie6下面margin 加倍的bug 所以最后使用。
-
padding 会影响盒子大小, 需要进行加减计算(麻烦) 其次使用。
-
width 没有问题
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
1. 前两个属性是必须写的。其余的可以省略。
2. 外阴影 (outset) 但是不能写 默认 想要内阴影 inset
3. 取值为 正整数
浮动float
标准流:
又叫, 普通流, 文档流.
当一个页面元素的排版从上到下, 从左到右依次排序, 快元素会独占一行, 行内元素会在一行, 的时候就叫普通流
元素的浮动是指设置了浮动属性的元素会脱离标准流, 移动到其父元素的中指定的位置
选择器 {float:属性值;}
取值:
left 元素向左浮动
right: 元素向右浮动
none: 元素不浮动(默认值)
浮动的特性
-
浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
-
当两个块元素浮动时, 会并排显示, 加了浮动的元素,不占位置, 位置将会留出来给标准流的元素
-
元素浮动后具有行内块元素的特性
清除浮动
有两个元素是嵌套关系, 父元素没有高度, 子元素浮动了, 父元素的高度会显示0
方法一
选择器{clear:属性值;}
取值:
left: 清除左边的浮动影响
right: 清除右边浮动的影响
both: 同时清除两边的浮动影响
方法二
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
,或则其他标签br等亦可。优点: 通俗易懂,书写方便
缺点: 添加许多无意义的标签,结构化较差。 我只能说,w3c你推荐的方法我不接受,你不值得拥有。。。
方法三: overflow
可以给父级添加: overflow为 hidden|auto|scroll 都可以实现。
优点: 代码简洁
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
方法四: 使用after伪元素清除浮动
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
优点: 符合闭合浮动思想 结构语义化正确
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
方法五: 使用before和after双伪元素清除浮动
使用方法:
.clearfix:before,.clearfix:after {
content:".";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点: 代码更简洁
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
定位position
将元素定在某个位置就是定位
元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移
边偏移属性 | 描述 |
---|---|
top | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
也就说,以后定位要和这边偏移搭配使用了, 比如 top: 100px; left: 30px; 等等
2、定位模式
在CSS中,position属性用于定义元素的定位模式,其基本语法格式如下:
选择器{position:属性值;}
position属性的常用值
值 | 描述 |
---|---|
static | 自动定位(默认定位方式) |
relative | 相对定位,相对于其原文档流的位置进行定位 |
absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 |
fixed | 固定定位,相对于浏览器窗口进行定位 |
静态定位static
恢复标准流, left,right等都不能使用, 是默认值
相对定位relative
配置后在标准流的位置还在, 元素相对于该位置定位
绝对定位absolute
配置后不会保留原先的位置, 元素会根据父元素定位, 如果父元素没有定位, 会根据浏览器定位, 浏览器滑动, 定位元素也会跟着滑动, 一直保持这个距离
固定定位fixed
固定定位的元素跟父亲没有任何关系,只认浏览器。
固定定位完全脱标,不占有位置,不随着滚动条滚动。
叠放次序z-index
多个元素定位时, 可能会层叠覆盖掉其他的元素,
z-index=1;
取值为数值, 正整数, 或负整数
-
z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。
-
如果取值相同,则根据书写顺序,后来居上。
-
后面数字一定不能加单位。
-
只有相对定位,绝对定位,固定定位有此属性,其余标准流,浮动,静态定位都无此属性,亦不可指定此属性。
四种定位总结
定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
---|---|---|---|
静态static | 不脱标,正常模式 | 不可以 | 正常模式 |
相对定位relative | 不脱标,占有位置 | 可以 | 相对自身位置移动 |
绝对定位absolute | 完全脱标,不占有位置 | 可以 | 相对于定位父级移动位置 |
固定定位fixed | 完全脱标,不占有位置 | 可以 | 相对于浏览器移动位置 |
定位模式转换
跟 浮动一样, 元素添加了 绝对定位和固定定位之后, 元素模式也会发生转换, 都转换为 行内块模式,
元素的显示与隐藏
display 显示
display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外,同时还有显示元素的意思。
特点: 隐藏之后,不再保留位置。
visibility 可见性
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点: 隐藏之后,继续保留原有位置。(停职留薪)
overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条,不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll : 不管超出内容否,总是显示滚动条
CSS用户界面样式
鼠标样式cursor
设置鼠标样子
cursor : default 正常 | pointer 小手 | move 移动 | text 文本
轮廓 outline
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline : outline-color outline-style outline-width
防止拖拽文本域resize
resize:none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域
vertical-align 垂直对齐
vertical-align 不影响块级元素中的内容对齐,它只针对于 行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片和表单等。
vertical-align : baseline |top |middle |bottom
baseline: 文字和图片基线对齐
middle: 文字和图片中间对齐
top: 文字和图片头部对齐
去除图片底侧空白缝隙
如果一个元素没有基线,比如图片或者表单等行内块元素,则他的底线会和父级盒子的基线对齐。 这样会造成一个问题,就是图片底侧会有一个空白缝隙。
解决方法:
1, 给img vertical-align:middle | top等等。 让图片不要和基线对齐。
2, 给img 添加 display:block; 转换为块级元素就不会存在问题了。
css精灵技术
CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来
将图标生成兼容性字体文件包
推荐网站: http://icomoon.io
阿里巴巴矢量图库
http://www.iconfont.cn/
fontello
http://fontello.com/
在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的。
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
字库 目前已经有369个图标了。
Glyphicon Halflings
这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。
Icons8
提供PNG免费下载,像素大能到500PX
图标使用
-
输入阿里矢量图库地址
-
搜索自己需要的的图标
-
点击放入购物车
3.点击购物车
4.下载代码
5.解压文件包, 将括号中的文件复制到需要的项目中
6.打开index.html文件
7.查看使用教程
滑动门
设置文本背景时, 文本长度不一样, 背景需要更改, 不想更改的情况下使用该技术
核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的:
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
li {
float: left;
height: 33px;
line-height: 33px;
background: url(img/ao.png); /*设置为背景图片 */
padding-left: 15px;
margin: 0 10px;
}
a {
display: inline-block;
height: 33px;
background: url(img/ao.png) no-repeat right top; /*给a标签也设置背景*/
padding-right: 15px; /*将右边补齐*/
}
伸缩布局(CSS3)
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。
主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向
侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的
方向:默认主轴从左向右,侧轴默认从上到下
主轴和侧轴并不是固定不变的,通过flex-direction可以互换。
Flex布局的语法规范经过几年发生了很大的变化,也给Flexbox的使用带来一定的局限性,因为语法规范版本众多,浏览器支持不一致,致使Flexbox布局使用不多
2、各属性详解****
a、flex-direction调整主轴方向(默认为水平方向)
b、justify-content调整主轴对齐
c、align-items调整侧轴对齐
d、flex-wrap控制是否换行
e、align-content堆栈(由flex-wrap产生的独立行)对齐
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
h、order控制子项目的排列顺序,正序方式排序,从小到大
此知识点重在理解,要明确找出主轴、侧轴、方向,各属性对应的属性值
过渡(CSS3)
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
在CSS3里使用transition可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指),就可以实现平滑的过渡,为了方便演示采用hover切换两种状态,但是并不仅仅局限于hover状态来实现过渡。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
属性 | 描述 | CSS |
---|---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
运动曲线示意图:
img {
width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%;
transition:transform 0.5s ease-in 0s;
}
img:hover {
transform:rotate(180deg);
}
2D变形(CSS3)
转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。
变形转换 transform
- 移动 translate(x, y)
translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置,x、y可为负值;
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
translateX(x)仅水平方向移动(X轴移动)
translateY(Y)仅垂直方向移动(Y轴移动)
缩放 scale(x, y)
transform:scale(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%,垂直方向上不缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
scaleX(x)元素仅水平方向缩放(X轴缩放)
scaleY(y)元素仅垂直方向缩放(Y轴缩放)
scale()的取值默认的值为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大
旋转 rotate(deg)
可以对元素进行旋转,正值为顺时针,负值为逆时针;
transform:rotate(45deg);
- 当元素旋转以后,坐标轴也跟着发生的转变
- 调整顺序可以解决,把旋转放到最后
- 注意单位是 deg 度数
倾斜 skew(deg, deg)
transform:skew(30deg,0deg);
该实例通过skew方法把元素水平方向上倾斜30度,处置方向保持不变。
可以使元素按一定的角度进行倾斜,可为负值,第二个参数不写默认为0。
transform-origin可以调整元素转换的原点
div{transform-origin: left top;transform: rotate(45deg); } /* 改变元素原点到左上角,然后进行顺时旋转45度 */
3D变形
rotateX() 就是沿着 x 立体旋转.(翻转)
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
rotateY()沿着y轴进行旋转(翻转)
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
rotateZ()沿着z轴进行旋转(翻转)
img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg); */
/* transform:rotateY(180deg); */
/* transform:rotateZ(180deg); */
/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}
透视(perspective)
电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。
透视可以将一个2D平面,在转换的过程当中,呈现3D效果。
注:并非任何情况下需要透视效果,根据开发需要进行设置。
perspective有两种写法
- 作为一个属性,设置给父元素,作用于所有3D转换的子元素
- 作为transform属性的一个值,做用于元素自身
理解透视距离原理:
开门案例
body {
}
.door {
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid gray;
perspective: 1000px;
background: url('images/dog.gif') no-repeat center/cover;
position: relative;
}
.door > div {
box-sizing: border-box;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
height: 100%;
background-color: brown;
transform-origin: left center;
transition: 1s;
position: relative;
}
.left::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
right: 0px;
transform: translateY(-10px);
border: 1px solid whitesmoke;
}
.right {
width: 50%;
height: 100%;
float: left;
background-color: brown;
transform-origin: right center;
transition: 1s;
position: relative;
}
.right::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
left: 0px;
transform: translateY(-10px);
border: 1px solid whitesmoke;
}
.door:hover .left {
transform: rotateY(-130deg);
}
.door:hover .right {
transform: rotateY(130deg);
}
translateX(x)
仅水平方向移动**(X轴移动)
主要目的实现移动效果
translateY(y)
仅垂直方向移动(Y轴移动)
translateZ(z)
transformZ的直观表现形式就是大小变化,实质是XY平面相对于视点的远近变化(说远近就一定会说到离什么参照物远或近,在这里参照物就是perspective属性)。比如设置了perspective为200px;那么transformZ的值越接近200,就是离的越近,看上去也就越大,超过200就看不到了,因为相当于跑到后脑勺去了,我相信你正常情况下,是看不到自己的后脑勺的。
3D呈现(transform-style)
设置内嵌的元素在 3D 空间如何呈现,这些子元素必须为转换原素。
flat:所有子元素在 2D 平面呈现
preserve-3d:保留3D空间
3D元素构建是指某个图形是由多个元素构成的,可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。
一般而言,该声明应用在3D变换的兄弟元素们的父元素上。
翻转盒子案例(百度钱包)
body {
margin: 0;
padding: 0;
background-color: #B3C04C;
}
.wallet {
width: 300px;
height: 300px;
margin: 50px auto;
position: relative;
transform-style: preserve-3d;
transition: all 0.5s;
}
.wallet::before, .wallet::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-image: url(./images/bg.png);
background-repeat: no-repeat;
}
.wallet::before {
background-position: right top;
transform: rotateY(180deg);
}
.wallet::after {
background-position: left top;
transform: translateZ(2px);
}
.wallet:hover {
transform: rotateY(180deg);
}
动画(CSS3)
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
语法格式:
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意r
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画"