、、等,其中标签最典型的行内元素。
```
行内元素的特点:
(1)和相邻行内元素在一行上。
(2)高、宽无效,**但水平方向的padding和margin可以设置**,垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。(a特殊)
> 注意:只有 文字才 能组成段落 因此 p 里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。链接里面不能再放链接。
## 8.3 行内块元素(inline-block)
```
在行内元素中有几个特殊的标签——、、,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
```
行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。
## 8.4 标签显示模式转换 display
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块: display: inline-block;
# 9.浮动
CSS的定位机制有3种:普通流(标准流)、浮动和定位。
普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列;按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
## 9.1 浮动的用途
浮动最早是用来控制图片,以便达到其他元素(特别是文字)实现“环绕”图片的效果。
后来,我们发现浮动有个很有意思的事情:就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题,用浮动的特性来布局了。
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。
在CSS中,通过float属性来定义浮动,其基本语法格式如下:
```
选择器{float:属性值;}
```
* left元素向左浮动
* right元素向右浮动
* none元素不浮动(默认值)
## 9.2 浮动详细内幕特性
1.浮动首先创建包含块的概念(包裹)。就是说, 浮动的元素总是找理它最近的父级元素对齐。但是**不会超出内边距的范围**。
[图片上传失败...(image-fac4d1-1511169278775)]
2.浮动的元素排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐
[图片上传失败...(image-5a2927-1511169278775)]
3.由2可以推断出,一个父盒子里面的子盒子,如果其中一个子级有浮动的,则其他子级都需要浮动。这样才能一行对齐显示。
4.浮动脱离标准流,不占位置,会影响后面的标准流。浮动只有左右浮动。
5.元素添加浮动后,元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少
浮动根据元素书写的位置来显示相应的浮动。
# 10.清除浮动
## 10.1 清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题
[图片上传失败...(image-782fa0-1511169278775)]
## 10.2 清除浮动的方法
在CSS中,clear属性用于清除浮动,其基本语法格式如下:
```
选择器{clear:属性值;}
```
* left不允许左侧有浮动元素(清除左侧浮动的影响)
* right不允许右侧有浮动元素(清除右侧浮动的影响)
* both同时清除左右两侧浮动的影响
### 10.2.1 额外标签法
```
通过在浮动元素末尾添加一个空的标签例如 ,或则其他标签br等亦可。
```
优点: 通俗易懂,书写方便
缺点: 添加许多无意义的标签,结构化较差。
### 10.2.2 父级添加overflow属性方法
可以给父级添加: overflow为 hidden|auto|scroll 都可以实现。
优点: 代码简洁
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
### 10.2.3 使用after伪元素清除浮动
使用方法:
```
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {*zoom: 1;} /* ie6、7 专有 */
```
### 10.2.4 使用before和after双伪元素清除浮动
使用方法:
```
.clearfix:before,.clearfix:after{
content:".";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{*zoom:1;}
```
# 11.定位(position)
## 11.1 元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分
1.定位模式
在CSS中,position属性用于定义元素的定位模式,其基本语法格式如下:
```
选择器{position:属性值;}
```
position属性的常用值
* static自动定位(默认定位方式)
* relative相对定位,相对于其原文档流的位置进行定位
* absolute绝对定位,相对于其上一个已经定位的父元素进行定位
* fixed固定定位,相对于浏览器窗口进行定位
2.边偏移
在CSS中,通过边偏移属性top、bottom、left或right,来精确定义定位元素的位置,其取值为不同单位的数值或百分比。具体解释如下:
* top顶端偏移量,定义元素相对于其父元素上边线的距离
* bottom底部偏移量,定义元素相对于其父元素下边线的距离
* left左侧偏移量,定义元素相对于其父元素左边线的距离
* right右侧偏移量,定义元素相对于其父元素右边线的距离
## 11.2 静态定位static
静态定位是所有元素的默认定位方式,当position属性的取值为static时,可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置
## 11.3 相对定位relative
相对定位是将元素相对于它在标准流中的位置进行定位,当position属性的取值为relative时,可以将元素定位于相对位置。
对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍然保留,而且移动的位置是相对于自身原来的位置来说的
> 注意: 相对定位最重要的一点是,它可以通过边偏移移动位置,但是原来的所占的位置,继续占有,移动的距离,是按照原来的自身的位置来移动
就是说,相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它。
## 11.4 绝对定位absolute
当position属性的取值为absolute时,可以将元素的定位模式设置为绝对定位。
> 注意: 绝对定位最重要的一点是,它可以通过边偏移移动位置,但是它完全脱标,完全不占位置。
1. 设置了绝对定位的元素,若所有父元素都没有定位,以浏览器为准对齐(document文档)
2. 绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
3. 如果只是给盒子指定了 定位,但是没有给与边偏移,则改盒子以标准流来显示排序,和上一个盒子的底边对齐,但是不占有位置。
4. 父元素使用相对定位,子元素使用绝对定位是非常常用的定位模式
5. 子元素的偏移量是相对于父元素padding及以内来定的,不到border
## 11.5 固定定位fixed
固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化,该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点:
1. 固定定位的元素跟父亲没有任何关系,只认浏览器。
2. 固定定位完全脱标,不占有位置,不随着滚动条滚动。
> 元素添加了 绝对定位和固定定位之后, 元素模式也会发生转换, 都转换为 行内块模式, 因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后,可以不用转换模式,直接给高度和宽度就可以了
## 11.6 叠放次序(z-index)
在CSS中,要想调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数、负整数和0。
比如: z-index: 2;
注意:
1. z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。
2. 如果取值相同,则根据书写顺序,后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位,绝对定位,固定定位有此属性,其余标准流,浮动,静态定位都无此属性,亦不可指定此属性。
# 12.元素的显示与隐藏
## 12.1 display 显示
display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外,同时还有显示元素的意思。
特点: 隐藏之后,不再保留位置。
## 12.2 visibility 可见性
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点: 隐藏之后,继续保留原有位置。
## 12.3 overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条,不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll : 不管超出内容否,总是显示滚动条
# 13.CSS用户界面样式
## 13.1 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
```
cursor : default 小白 | pointer 小手 | move 移动 | text 文本
```
尽量不要用hand 因为 火狐不支持 pointer ie6以上都支持的尽量用
## 13.2 防止拖拽文本域resize
resize:none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域
# 14.vertical-align 垂直对齐
```
vertical-align : baseline |top |middle |bottom
```
设置或检索对象内容的垂直对其方式。
vertical-align 不影响块级元素中的内容对齐,它只针对于 行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片和表单等。
# 15.CSS精灵图
一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵图技术
将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来
要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位
# 16.CSS常用技巧
## 16.1 margin 负值
制作网页时,为了拉开元素之间的距离,常常给元素设置大于0的外边距margin。其实,在实际工作中,为了实现一些特殊的效果,经常需要将元素的margin设置为负值
如:利用定位+margin负值实现盒子的水平或垂直居中,边框的重叠显示等
如要实现重叠效果,要注意以下技巧:
1.定位的盒子层级高于浮动和标准流。
2.提高定位盒子的层级用 z-index。
## 16.2 使用CSS写出三角形
原理:CSS中一个盒子的四个边框在将其加宽并设置不同颜色后可以发现,四个边框的衔接处是斜线,四个边框实际上是梯形,当盒子的宽高都变成0的时候,上下左右边框就变成了四个朝向不同的三角形,需要一个方向的三角形只需要将另外几个边框不显示即可
## 16.3 给网页添加ico图标
1. 首先自己或者网页美工制作小图标。
2. 利用 [http://www.bitbug.net/](https://link.jianshu.com?t=http://www.bitbug.net/) 进行转换 生成的是: favicon.ico 的小图标
3. ``引入小图标 注意路径!
4. 引入的link代码一定只能放到head 标签之中
5. ico图标为了兼容性,我们放到根目录下。
## 16.4 关于logo的优化
1. 我们要在logo里面放一个h1标签,就是为提权,说明这个盒子很重要。
2. 我们继续在h1 里面放一个链接a 要和 logo盒子一样大。
3. 注意 a链接 里面要放上网站标题。(是为了优化)
4. 链接里面的文字对用户体验不好,这里不需要看见。 有两种方法实现:
利用text-indent:-2000em; 或者 利用padding 挤开盒子 并且overflow 切割
5. 给链接添加 title 提示文本 增强用户体验。
# 17.BFC(块级格式化上下文)
BFC是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干
## 17.1 什么情况下可以让元素产生BFC
* float属性不为none
* position为absolute或fixed
* display为inline-block, table-cell, table-caption, flex, inline-flex
* overflow不为visible。
## 17.2 BFC元素所具有的特性
BFC布局规则特性:
1.在BFC中,盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。
4.BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。
5.计算BFC的高度时,自然也会检测浮动的盒子高度。
它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
## 17.3 BFC的主要用途
(1) 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow: hidden样式,对于IE6加上zoom:1就可以了。
(2) 解决外边距合并问题
属于同一个BFC的两个相邻盒子的margin会发生重叠,那么我们创建不属于同一个BFC的两个相邻盒子,就不会发生margin重叠了。
# 18.优雅降级和渐进增强
**渐进增强 progressive enhancement:**
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
**优雅降级 graceful degradation:**
一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 |