前端学习五——css

盒子模型(Box Model)

盒子边框(border)

语法：

border:border-width |  border-style  |  border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色
边框的样式
1、none：没有边框即忽略所有边框的宽度(默认值)
2、solid：边框为单实线(最为常用)
3、dashed：边框为虚线
4、dotted：边框为点线

边框的综合写法

语法：

border:border-width border-style border-color

例子

border:1px dotted red;  // 没有顺序

盒子边框的样式总结

表格的细线边框

1、通过表格的cellspacing="0”，将单元格与单元格之间的距离设置为0，但是两个单元格之间的边框会出现重叠，从而使边框变粗；
2、通过css属性：

table {
	border-collapse: collapse
}

1、collapse单词是合并的意思
2、border-collapse:collapse;表示相邻边框合并在一起。

内边距(padding)

用于设置内边距。是指边框与内容之间的距离。

属性	所作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距
当给盒子指定padding值之后，发生了2件事情：
1、内容和边框有了距离，添加了内边距。
2、盒子会变大了。
注意:后面跟几个数值表示的意思是不一样的
值的个数	表达的意思
–	–
1个值	padding:10px ,上下左右内边距为10px
2个值	padding:10px 20px 上下10px，左右20px
3个值	padding:10px 20px 30px 上10px，左右20px，下30px
4个值	padding:10px 20px 30px 40px 上10px，右20px，下30px，左40px（顺时针顺序）

盒内尺寸计算

高度：Element Height = content height + padding + border (Height为内容高度)
宽度：Element Width = content width + padding + border (Width为内容宽度)
盒子的实际的大小=内容的宽度和高度＋内边距＋边框
解决办法：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小

padding不影响盒子大小情况

如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子。

外边距(margin)

用于设置外边距。margin就是控制盒子和盒子之间的距离

属性	所作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

块级盒子水平居中

可以让一个块级盒子实现水平居中必须：
1、盒子必须指定了宽度(width)
2、然后就给左右的外边距都设置为auto,
实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width : 960px; margin:e auto;}

常见的写法，以下三种都可以。
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

文字居中和盒子居中区别

1、文字水平居中是text-align: center，而且还可以让行内元素和行内块居中对齐
2、块级盒子水平居中左右margin改为auto

text-align: center;		/*文字行内元素 行内块元素水平居中*/
margin: 10px auto;		/*块级盒子水平居中﹐左右mangin改为 auto就阔以了 上下mangin都可以*/

插入图片和背景图片区别

1、插入图片用的最多比如产品展示类， 移动位置只能靠盒模型 padding margin
2、背景图片一般用于小图标背景或者超大背景图片，背景图片只能通过background-position

img {
	width: 200px;/*插入图片更改大小width 和height */
	height: 210px;
	margin-top: 30px;	/*插入图片更改位置 可以用margin 或padding盒模型*/
	margin-left: 5e0px;	/*插入当图片也是—个盒子*/
)
div {
	width : 400px;
	height: 408px;
	border: 1px solid purple;
	background: #fff url(images/ sun.jpg) no-repeat;
	background-position: 30px 50px;/*背景图片更改位置 用background-position */
}

清除元素默认的内外边距

* {
padding : 0;	/*清除内边距*/
margin:0;	/*清除外边距*/
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
(1)相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷)。

解决方案：尽量给只给一个盒子添加margin值。
(2)嵌套块元素垂直外边距的合并（塌陷)
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者

解决方案：
1、可以为父元素定义上边框。
2、可以为父元素定义上内边距
3、可以为父元素添加overflow:hidden。
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面再总结

盒子模型布局稳定性

学习完盒子模型，内边距和外边距，什么情况下用内边距，什么情况下用外边距?
大部分情况下是可以混用的。就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个。
根据稳定性来分，建议如下：
按照优先使用宽度(width)，其次使用内边距(padding)，再次使用外边距(margin)。
width > padding >margin
原因:
1、margin 会有外边距合并，还有ie6下面margin 加倍的bug(讨厌）所以最后使用。
2、padding会影响盒子大小，需要进行加减计算(麻烦)，其次使用。
3、width没有问题， 经常使用宽度剩余法、高度剩余法来做。

圆角边框

语法：
border-radius:length;
其中每一个值可以为数值或百分比的形式。
技巧:让—个正方形变成圆圈border-radius:50%;

以上效果图矩形的圆角，就不要用百分比了，因为百分比会是表示高度和宽度的一半，这里矩形就只用用高度的一半就好了。

盒子阴影

语法：
box-shadow: 水平阴影 垂直阴影 模糊距离（虚实）阴影尺寸(影子大小) 阴影颜色 内/外阴影；

值	描述
h-shadow	必需。水平阴影的位署。允许负值
v-shadow	必需。垂直阴影的位署。允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影(outset)改为内部阴影
前两个属性是必须写的。其余的可以省略。
外阴影(outset)是默认的但是不能写，想要内阴影可以写inset

浮动(float)

CSS布局的三种机制

网页布局的核心―—就是用CSS来摆放盒子。
CSS提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流)、浮动和定位，其中：
1、普通流〔标准流)
1.1、块级元素会独占一行，从上向下顺序排列;
常用元素: div、hr、p、h1~h6、ul、ol、dl、form、table
1.2、行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行;
常用元素:：span、a、 i、em等
2、浮动
让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示
3、定位
将盒子定在浏览器的某一个位置——CSS离不开定位，特别是后面的js特效。

浮动概念

概念：元素的浮动是指设置了浮动属性的元素会
1、脱离标准普通流的控制
2、移动到指定位置
作用
1、让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
2、可以实现盒子的左右对齐等等…
3、浮动最早是用来控制图片，实现文字环绕图片的效果。
语法：
选择器 { flost:属性值;}

属性值	描述
none	元素不浮动(默认值)
left	元素向左浮动
right	元素向右浮动
注：
1、float属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了；
2、任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似；
3、浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
4、如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

清除浮动

清除浮动的本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。

清除浮动的办法

语法：
选择器{clear:展性值;}clear清除

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响
both	同时清除左右两侧浮动的影响

额外标签法(隔墙法)

是w3c推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style" clear:both"></div>，或则其他标签br等亦可。
优点：通俗易懂,书写方便
缺点：添加许多无意义的标签，结构化较差。

父级添加overflow属性方法

可以给父级添加:overflow为 hidden| auto| scroll都可以实现。
优点:代码简洁
缺点:内容增多时候容易造成不会自动换行，导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

:after方式为空元素额外标签法的升级版，好处是不用单独加标签了
使用方法:

.clearfix:after { 
	content: ""; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {*zoom: 1;}/IE6、7专有*/

优点：符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持:after，使用zoom:1触发hasLayout。
代表网站:百度、淘宝网、网易等

使用双伪元素清除浮动

使用方法:

.clearfix : before,
.clearfix : after {
	content : "";
	display:table;
}
.clearfix : after {
	clear: both;
}
.clearfix {
	*zoom:1;
}

优点：代码更简洁
缺点：由于IE6-7不支持:after，使用zoom:1触发hasLayout。
代表网站:小米、腾讯等

清除浮动总结

什么时候用清除浮动呢?
1.父级没高度
2.子盒子浮动了
3.影响下面布局了，我们就应该清除浮动了。

清除浮动方式	优点	缺点
额外标签法(隔墙法)	通俗易懂,书写方便	添加许多无意义的标签，结构化较差。
父级添加overflow:hidden	书写简单	溢出隐藏
父级伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题
后面两种伪元素清除浮动，大家暂且会使用就好，深入原理，我们后面学完伪元素再讲。

CSS属性书写顺序

建议遵循以下顺序:
1.布局定位属性: display / position / float / clear / visibility / overflow(建议display第一个写，毕竟关系到模式)
2.自身属性: width / height / margin / padding / border / background
3.文本属性: color / font / text-decoration / text-align / vertical-align / white- space / break-word
4.其他属性(CSS3) : content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

定位Position

定位=定位模式+边偏移

边偏移

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量,定义元素相对于其父元素下边线的距离
left	left:px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值	描述
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

静态定位(static)——了解

1、静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时候用。
2、静态定位按照标准流特性摆放位置，它没有边偏移。
3、静态定位在布局时我们几乎不用的

相对定位(relative)-重要

相对定位是元素相对于它原来在标准流中的位置来说的
相对定位的特点：
1、相对于自己原来在标准流中位置来移动的
2、原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位(absolute)-重要

绝对定位是元素相对于他父级元素，来设置元素的位置(拼爹型)
1、完全脱标――完全不占位置;
2、父元素没有定位，则以浏览器为准定位(Document文档)。
3、父元素要有定位，将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先）进行定位。

绝对定位的特点:
1、绝对是以带有定位的父级元素来移动位置（拼爹型），如果父级都没有定位，则以浏览器文档为准移动位置
2、不保留原来的位置，完全是脱标的。
定位口诀—―子绝父相
子绝父相：子级是绝对定位，父级要用相对定位。

总结:
由于子元素，不占据位置，所以我们使用绝对定位
由于父元素占据位置，不能响应后面元素的正常显示，我们使用相对定位
分析:
1、方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
2、父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。
结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

固定定位(fixed)-重要

因定定位是绝对定位的—种特殊形式：
1、完全脱标―—完全不占位置;
2、只认浏览器的可视窗口
浏览器可视窗口＋边偏移属性来设置元素的位置;
跟父元素没有任何关系;
不随滚动条滚动。

绝对定位盒子居中

注意:绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中。
在使用绝对定位时要想实现水平居中，可以按照下图的方法：
left:50%;:让盒子的左侧移动到父级元素的水平中心位置;
margin-left: -100px;:让盒子向左移动自身宽度的一半。

堆叠顺序

在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。应用z-index层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

z-index的特性如下：
1、属性值:正整数、负整数或0，默认值是0，数值越大，盒子越靠上;
2、如果属性值相同，则按照书写顺序，后来居上；
3、数宁后面不能加单位。
注意：
z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位改变display属性

display是显示模式，可以改变显示模式有以下方式：
1、·可以用inline-block转换为行内块
2、可以用浮动float 默认转换为行内块(类似，并不完全一样，因为浮动是脱标的)
3、绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。
所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
同时注意：
浮动元素、绝对定位元素的都不会触发外边距合并的问题(以前是用padding border overflow解决的)。也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

元素的显示与隐藏

dispaly显示（重点）

display设置或检索对象是否显示或如何显示

display:none //隐藏对象
display:block  // 除了转化为块级元素之外，同时还有显示元素的意思

特点：隐藏之后，不再保留位置

visibility可见性

设置或检索是否显示对象

visibility:visible //对象可视
visibility:hidden  // 对象隐藏

特点：隐藏之后，继续保留位置

overflow溢出（重点）

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超过的部分隐藏掉
scroll	不管超出内容与否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

CSS用户界面样式

鼠标样式

属性值	描述
default	小白， 默认的
pointer	小手
move	移动
text	文本
not-allow	禁止

<ul>
	<li style="cursor : default">我是小白</li>
	<li style="cursor : pointer">我是小手</li>
	<li style="cursor :move">我是移动</li>
	<li stylem"cursor :text">我是文本</li>
	<li style="cursor:not-allowed">我是文本</li>
</ul>

轮库outline

是绘制于元素周围的—条线，位于边框边缘的外围，可起到突出元素的作用。

outline : outline-color |loutline-style ll outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是:outline: 0;或者outline: none;

<input type-"text" style="outline: 0; " />

防止拖曳文本域resize

文本域右下角是不可以拖拽:

<textarea style="resize: none; "></textarea>

vertical-line 垂直对齐

图片、表单和文字对齐

有宽度的块级元素居中对齐，是margin: 0 auto;
让文字居中对齐，是text-align: center;
vertical-align垂直对齐，它只针对于行内元素或者行内块元素，

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。
注意：
vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素；
特别是行内块元素，涌常用来控制图片/表单与文字的对齐

去除图片底侧空白缝隙

原因：
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙。
解决的方法就是：
1、给img vertical-align:middle | top等等。让图片不要和基线对齐。
2、给img添加display: block;转换为块级元素就不会存在问题了。

溢出的文字省略号显示

white-space

white-space设置或检索对象内文本显示方式。通常使用于强制一行显示内容

white-space : normal ;默认处理方式
white-space:nowrap ;强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

text-overflow文字溢出

设置或检索是否使用一个省略标记(…）标示对象内文本的溢出

text-overflow : clip ;不显示省略标记（...)，而是简单的裁切
text-overflow: ellipsis ;当对象内文本溢出时显示省略标记(...)

注意:
—定要首先强制一行内显示，再次和overflow属性搭配使用