css入门笔记(上)

1 css引入与规范

1.1 导入式

导入式会在整个网页装载完后再装载CSS文件，所以这就致使了一个问题，若是网页比较大则会儿出现先显示无样式的页面，闪烁一下以后，再出现网页的样式。这是导入式固有的一个缺陷。

<style type="text/css" media="screen"> @import url("CSS文件"); </style>
复制代码

### 1.2 外链式 引入一个外部的css样式表
语言:link标签 href="css样式路径名称" 能够放在head标签或者body标签里面

<link rel="stylesheet" type="text/css" href="index.css">
复制代码

1.3 外链式和导入式的区别

• link和@import虽然都是引入外部的css文件，可是他们是有天差地别的区别的
• link是html标签，@import彻底是css提供的方式，要写在css文件或者style标签中。
• 他们的加载顺序也是有区别的，当一个页面被加载的时间，link引用的css文件会被同时加载，而@import引入的css文件会等页面所有下载完后再加载。
• 当使用JavaScript控制DOM去改变css样式的时间，只能使用link标签，由于import是不能被DOM控制的

1.4 行内式

经过style这个标签属性，将css键值对直接写入标签内

<p style="width:100px;height:100px;background-color:red;"</p>
复制代码

1.5 内嵌式

能够放在head或者body里 建议放在head标签里面title标签的下面

2 选择器的世界

2.1 基本选择器

2.1.1 标签选择器

直接使用元素标签进行选择

  p{color:red;}  权重1

2.1.2 类选择器

经过元素的类名，来选择元素，一个元素能够有多个类名，都表明这个元素类名是元素class属性中的属性值，例如

  .sum{} => 此选择器的权重为10

2.1.3 id选择器

经过元素的id名，来选择元素，类名是元素id属性中的属性值，例如

#sum{} => 此选择器的权重为100

2.1.4 通配符选择器

经过*选择所有元素，包括根元素 *{} => 权重小于1，能够被覆盖

2.2 并集选择器

你能够对选择器进行分组，这样，被分组的选择器就能够分享想相同的声明。用逗号被须要分组的选择器分开。在下面的例子中，咱们对全部的标题元素进行了分组。全部的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6{
	color:green;
}
复制代码

2.3 交集选择器

两种属性同属一个元素的时候，咱们可使用交集选择器来进行元素的准确选择

<p class='name1 name2' id='id1'></p>
p.name1{}
p#id1{}
.name1.name2{}
复制代码

2.4 派生(后代)选择器

• 经过依据元素在其位置的上下文关系来定义样式，你可使标记更加简洁，用空格隔开列表中的strong元素变为斜体字，而不是一般的粗体字，能够这样定义一个派生选择器
• 后台选择器尽可能不要超过3个，没有必要把每个层级都写出来，只须要写出关键节点极客

li strong{
	font-style:italic;
  font-weight:normal;
}

<ol>
	<li>
  	<strong>我是斜体字。这个由于strong元素位于li元素内。</stong>
  </li>
</ol>
复制代码

2.5 子代选择器

与后代选择器相比，子元素选择器只有选择做为某元素子元素，符号为大括号

h1 > strong {color:red;}

<h1>This is<strong>very</strong> important.</h1>
复制代码

2.6 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另外一元素后的元素，且两者有相同父元素

h1+p{
	margin-top:50px;
}
复制代码

2.7 属性选择器

对带有指定属性的html元素设置样式 权重10

能够为拥有指定html元素设置样式，而不只限于class和id属性

下面的例子为title属性的全部元素设置样式

[title]{color:red;}
复制代码

属性和值选择器
下面的例子为title='wjw'的全部元素设置样式

[title=wjw]{color:red;}
复制代码

设置表单的样式

input[type='text']{width:150px;display:block;background:yellow}
复制代码

2.8 假装选择器

• a:link{color:#ff000}  // 未访问的连接
• a:visited{color::#ff000} // 已访问的连接
• a:hover{color:#ff000} // 鼠标移动到连接上
• a:active{color:#ff000} //选定的连接

10<权重<11

选择器	示例	示例描述	CSS版本
.class	.demo	选择 class="demo" 的全部元素	1
#id	#firstname	选择 id="firstname" 的全部元素	1
*	*	选择全部元素	2
element	p	选择全部 元素	1
element,element	div,p	选择全部 元素和全部 元素	1
element element	div p	选择 元素内部的全部 元素	1
element>element	div>p	选择父元素为 元素的全部 元素	2
element+element	div+p	选择紧接在 元素以后的全部 元素	2
[attribute]	[target]	选择带有 target 属性全部元素	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的全部元素	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的全部元素	2
[[attribute	=value]](www.html.cn/book/css/se…)	[lang|=en]	选择 lang 属性值以 "en" 开头的全部元素
:link	a:link	选择全部未被访问的连接	1
:visited	a:visited	选择全部已被访问的连接	1
:active	a:active	选择活动连接	1
:hover	a:hover	选择鼠标指针位于其上的连接	1
:focus	input:focus	选择得到焦点的 input 元素	2
:first-letter	p:first-letter	选择每一个 元素的首字母	1
:first-line	p:first-line	选择每一个 元素的首行	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每一个 元素	2
:before	p:before	在每一个 元素的内容以前插入内容	2
:after	p:after	在每一个 元素的内容以后插入内容	2
:lang(language)	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每一个 元素	2
element1~element2	p~ul	选择前面有 元素的每一个 元素	3
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每一个 元素	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的全部 元素	3
[attribute*=value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每一个 元素	3
:first-of-type	p:first-of-type	选择属于其父元素的首个 元素的每一个 元素	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 元素的每一个 元素	3
:only-of-type	p:only-of-type	选择属于其父元素惟一的 元素的每一个 元素	3
:only-child	p:only-child	选择属于其父元素的惟一子元素的每一个 元素	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每一个 元素	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 元素的每一个 元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，可是从最后一个子元素开始计数	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每一个 元素	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择没有子元素的每一个 元素（包括文本节点）	3
:target	#news:target	选择当前活动的 #news 元素	3
:enabled	input:enabled	选择每一个启用的 元素	3
:disabled	input:disabled	选择每一个禁用的 元素	3
:checked	input:checked	选择每一个被选中的 元素	3
:not(selector)	:not(p)	选择非 元素的每一个元素	3
::selection	::selection	选择被用户选取的元素部分	3
:out-of-range	:out-of-range	匹配值在指定区间以外的input元素	3
:in-range	:in-range	匹配值在指定区间以内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读） 属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

3 CSS的三大特性（重叠性+优先级）

3.1 层叠性

浏览器解析CSS是从上至下，当CSS冲突时以最后定义的CSS为准。
层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义

标记字号大小为12像素，链入式定义

标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加

3.2 优先级

优先级顺序为：!important>style>权重值

权重记忆口诀:从0开始，一行内样式+1000，一个id+100，一个属性选择器/class或者一个元素名+10，或者伪元素+1

规则:相同的权重:之后面出现的选择器为最后规则
  不一样的权重，权重值生效

3.1.1 基本选择器

类型	权重
标签选择器/div	1
class/类选择器 .right	10
id	100
内联	1000
*	0-1

• 后代
• 子代
• 交集
• 并集
• 相邻兄弟
• 兄弟
• 属性
• 伪类
• 伪元素

权重:每一个单独的选择器的权重相加之和

.header ul li{
	/* 权重 12 : 10+1+1 */
  backgournd:red;
}

.header .right li{
	/* 权重 21:10+10+1 */
  backgournd:#000;
}
复制代码

• 权重相等的状况下比较

id>class>标签>*

1. 权重不相等的状况下: 谁的权重大，听谁的
2. 权重相等的状况下:遵循就近原则，下面的覆盖上面的
3. 权重相等,不遵循就近原则,就想听上面的怎么办
4. !important 1000

3.2.1 权重算法

第一等：表明内联样式，如: style=””，权值为1000。
第二等：表明ID选择器，如：#content，权值为0100。
第三等：表明类，伪类和属性选择器，如.content，权值为0010。
第四等：表明类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
优先级从高到低：行内选择符、ID选择符、类别选择符、元素选择符。

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
important > 内联 > ID > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承

4 CSS的三大特性 (继承属性)

4.2 无继承性的属性

4.2.1 display

• inline
• block
• inline-block
• table-cell
• none

规定元素应该生成的框的类型

4.2.2 文本属性：

vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向

4.3.3 盒子模型的属性：

width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4.3.4 背景属性

background、background-color、background-image、background-repeat、background-position、background-attachment

4.3.5 定位属性

float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

4.3.6 生成内容属性

content、counter-reset、counter-increment

4.3.7 轮廓样式属性

outline-style、outline-width、outline-color、outline

4.3.8 页面样式属性

size、page-break-before、page-break-after

4.3.9 声音样式属性

pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

4.3 有继承性的属性

4.3.1 字体系列属性

font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着全部的小写字母均会被转换为大写，可是全部使用小型大写字体的字母与其他文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。全部主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就能够保持首选字体的 x-height。

4.3.2 文本系列属性

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增长或减小单词间的空白（即字间隔）
letter-spacing：增长或减小字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

4.3.3 元素可见性

visibility

4.3.4 表格布局属性

caption-side、border-collapse、border-spacing、empty-cells、table-layout

4.3.5 列表布局属性

list-style-type、list-style-image、list-style-position、list-style

4.3.6 生成内容属性

quotes

4.3.7 光标属性

cursor

4.3.8 页面样式属性：

page、page-break-inside、windows、orphans

4.3.9 声音样式属性：

speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

4.4 全部元素能够继承的属性

一、元素可见性：visibility
二、光标属性：cursor

4.5 内联元素能够继承的属性

一、字体系列属性
二、除text-indent、text-align以外的文本系列属性

4.6 块级元素能够继承的属性

一、text-indent、text-align

5 css盒子模型

5.1 css盒子模型图解

• margin:外边距
• border:边框
• padding:内边距

5.2 css盒子模型之宽度和高度

1. px 像素写死
   2. % 动态计算的单位(自适应 响应式)
   

*{
	margin:0;
  padding:0;
}
.banner img{
	width:100%;
}
复制代码

5.3 内边距padding及简写

5.4 边框线border的使用技巧

border:边框的宽度 边框线类型 边框线的颜色

5.4.1 边框线类型

5.4.2 边框线类型

• solid 实线
• dashed 虚线
• dotted 点状线

5.4.3 边框线的颜色

	黑色	白色
颜色的英文	black	white
#	#000	#fff
rgb	rgb(0,0,0)	rgb(255,255,255)

border:10px solid #000
若是没有知名方向的状况下，表示四个方向都相等
border-top  上边
border-right  右边
border-bottom 下边
border-left 左边

5.4.4 去掉边框

border:0
若是border属性只有边框段杜，没有边框的类型和颜色 致使border属性失效

5.4.5 面试题(画个三角形)

/* 
    三角箭头原理：正方形的任意相邻的两条边线
    而后旋转必定的角度获得咱们须要的任意方向的箭头 
    deg 角度单位 rotate旋转角度
    三角形的大小由正方形的宽高去控制
    三角形的粗细是有边框线去控制
    三角形的颜色是有边框线的颜色去控制
 */

<div class="arrow"></div>

<style> .arrow{ width: 0px; height: 0px; margin-top: 50px; margin-left: 50px; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333; transform: rotate(90deg);//控制角度 } </style>
复制代码

5.5 padding

方向上和padding一致

5.6 margin的负值使用技巧

结构上不动，能够调换div顺序

5.7 padding和margin的区别

padding 是内边距
会影响咱们在浏览器中看到的元素的实际大小内边距会让元素的内容增大和其它的元素没有关系
margin 是外边距
不会影响咱们在浏览器中看到的元素的实际大小外边距不会让元素的内容增大和另外一个元素的间距

5.8 盒子模型的计算公式及使用技巧

元素实际宽度

宽度width + padding-left/padding-right+border-left/border-right

元素实际高度

高度height+padding-top/padding-bottom+border-top/border-bottom

口号: 元素的实际大小智慧padding和border的影响跟margin没有半毛钱的关系
若是加了padding和border的值要在width和height的值上减去padding和border的值 不然内容会溢出

6 BFC机制

BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，而且与这个区域外部绝不相干。

6.1 BFC布局规则

1. 内部的Box会在垂直方向，一个接一个地放置；
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；
3. 每一个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。；
4. BFC的区域不会与float box重叠，经常使用来清除浮动和布局。；
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。；
6. 计算BFC的高度时，浮动元素也参与计算；

6.2 会生成BFC的元素

• 根元素或其它包含它的元素；
• 浮动 (元素的float不为none)；
• 绝对定位元素 (元素的position为absolute或fixed)；
• 行内块inline-blocks(元素的 display: inline-block)；
• 表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
• overflow的值不为visible的元素；
• 弹性盒 flex boxes (元素的display: flex或inline-flex)；

6.3 BFC的范围

BFC的范围在MDN中是这样描述的。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

中文的意思一个BFC包含建立该上下文元素的全部子元素，但不包括建立了新BFC的子元素的内部元素。
插入一段代码方便理解

<div class='div_1 BFC'>
     <div class='div_2'>
         <div class='div_3'></div>
         <div class='div_4'></div>
      </div>
      <div class='div_5 BFC'>
	       <div class='div_6'></div>
         <div class='div_7'></div>
     </div>
</div>
复制代码

div_1建立了一个块格式上下文，这个上下文包括了div_2、div_3、div_4、div_5。即div_2中的子元素也属于div_1所建立的BFC。但因为div_5建立了新的BFC，因此div_6和div_7就被排除在外层的BFC以外。
这就表明着一个元素不能同时存在于多个BFC中。
BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。这是利用BFC清除浮动所利用的特性。

6.4 BFC的经常使用方式：

6.4.1 子级浮动致使父级高度塌陷

<style type="text/css"> .box{ width: 900px; background: black; height: 300px; // 增长高度 } .box1{ height: 300px; width: 300px; background: red; float: left; } .box2{ height: 300px; width: 300px; background: blue; float: left; } </style>

......

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
复制代码

上面的代码定义了3个块，一个父级包含了两个子集，可是父级的背景颜色没法显示，是由于子集元素浮动致使了父级高度的塌陷。

在为box设置BFC后，box的高度才能找回来。

从而显示出正确的样式。

6.4.2 子级margin-top将父级带下 为父级触发BFC

一个盒子有上边距 另外一个有下边距 会出现margin边距的重叠问题
并列盒子的margin重写=>双margin的重叠
-> 取大值 并非他们相加之和 也就是谁大听谁的

要将黑色块中的小红块下移一点，直接使用了margin-top，结果黑块一块儿下移了。

<style type="text/css"> .box{ width: 300px; height: 300px; background: black; } .box1{ height: 100px; width: 100px; background: red; margin-top: 50px; } </style>

......

<div class="box">
    <div class="box1"></div>
</div>
复制代码

而设置了BFC后，就能正确的下浮红色块

margin的兼容问题:margin top的传递问题

大盒子里面嵌套小盒子 给小盒子加margin-top 不但没有实现和大盒子之间的间距 反而传递给大盒子身上 致使总体下移动
解决兼容性问题

1. overflow:hidden  解决margin-top的传递问题(此处并无溢出隐藏)
2. padding-方位:1px 这种方法影响最后实际宽高 须要在width/height上基础上减掉才不会影响最后实际的宽高
3. border-top:1px 这种方法会影响最后实际的高度 须要在高度height上基础上减掉 才不会影响最后实际的高度
4. 给子元素的margin-top的值改为父元素的padding-top,这样就避免使用margin-top值致使传递的问题

7 背景相关

7.1 背景属性

背景缩写缩写能够卸载一个声明中设置全部的背景属性
背景图像支持引入多个图像
主要属性有:
background-color
background-image
background-repeat
background-position
backgournd-attchment
backgournd-size
backgournd-origin
backgournd-clip

7.2 背景颜色

background-color

• 指定要使用的背景颜色 例如:background-color:#ffcc00
• 能够简写为background
• backround-color 不能继承，其默认值是trandsparent。trandsparent有透明之意。也就是说，若是一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
• transparent 指定背景颜色应该是透明的，默认值。
• inherit 指定背景颜色，应该从父元素继承

<style> .box{ width:650px; height:32px; background-color:orange;// 颜色 color:#fff; // 字体颜色 text-aligh:center;//字体内容水平居中 } div{ width:200px; height:200px; backgournd-color:darkbule; margin:0 auto;//上下0 左右auto 块元素水平居中 line-height:200px;//垂直居中 } </style>
复制代码

7.3 背景图片

background-image

• url('图像的url路径地址')图像的url
• none 表示北京上没有防止任何图像，这就是默认值
• inherit指定背景图像应该从父元素继承
• 一个元素能够引入多张背景图片，指定要使用的一个或者多个背景图像，默认状况下background-image放置在元素的左上角，并重复垂直的水平方向。
• backgournd image:url('pic.png'),url('pic2.png')... ...
• backgournd image 属性不能继承

7.4 背景重复

• 指定如何重复背景图像，默认状况下，重复background-image的垂直和水平方向
• repeat 背景图像向垂直和水平方向垂直。这是默认
• repeat-x 只有水平位置会重复背景图像
• repeat-y 只有垂直位置会重复背景图像
• no-repeat background-image不会重复
• inherit 指定背景重复应该从父元素继承

.logo{
	width:300px;
  height:300px;
  backgournd-image:url('../xxx/png');
  backgournd-repeat:repeat x;//平铺的方式（重复）
}
复制代码

7.5 背景定位

• backgournd-position属性设置背景图像的起始位置;
• xpos ypos 第一个值的水平位置，第二个值是垂直。左上角是0。单位能够是长度值px，关键字和百分数值
• 关键字成对出现left right top bottom center，若是仅指定一个关键字，其余值将会“center”
• x% y%第一个值水平位置，第二值是垂直。左上角是0%0%。
• inherit 指定background-position属性设置应该从父元素继承

.logo{
	width:400px;
	height:400px;
	backgournd-color:#3385ff;//背景颜色
  backgournd-image:url('./xxx.png');
	backgournd-repeat:no-repeat;
  backgournd-position:50px 50px;//x轴的坐标(水平方向)y轴的坐标方向(垂直方向) x轴越大 越往右 x轴越大 越往下
	//50% 50% > center center //中心位置

}
复制代码

常用在雪碧图中

7.6 背景关联

backgournd-attachmen

• 设置背景图像是否固定或者随着页面的其他部分滚动
• scroll 背景图片随页面的其他部分滚动。这是默认
• fixed  背景图像是固定的
• inherit 指定background-attachment的设置应该从父元素继承

*{
	padding:0px;
  margin:0px;
}

.banner{
	width:100%;
  height:800px;
  backgournd:url(../xxx.png) no-repeat

}

.banner01{
	width:100%;
  height:800px;
  backgournd:url(../xxx.png) no-repeat

}

.banner02{
	width:100%;
  height:800px;
  backgournd:url(../xxx.png) no-repeat
   backgournd-attachmen:fixed;// 能够固定不动
}

复制代码

7.7 设置对象的背景图像的尺寸大小

background-size

• 用长度值指定背景图像大小。不容许负值；
• 用百分比指定背景图像大小。不容许负值。
• auto背景图像的真实大小
• cover将背景图等比例缩放到彻底覆盖容器，背景图像有可能超出容器；
• contain将背景图像等比例缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

.pic{
	width:200px;
  height:1600px;
  background:url('../xx.png')
  background-size:300px 300px; // x轴  y轴
}
复制代码

7.8 设置对象的背景图像向外裁剪的区域

background-clip

• padding-box:从padding区域(不含padding)开始想外裁剪背景;
• border-box:从border区域(不含border)开始向外裁剪背景
• bontent-box:从content区域开始向外裁剪背景
• text:从前景内容的形状（好比文字）做为裁剪区域向外裁剪，如此极客实现使用背景做为填充色之类的遮罩效果。

.pic{
	width:200px;
  height:1600px;
  background:url('../xx.png')
  background-size:300px 300px; // x轴  y轴
  backgound-clip:border-box;
}
复制代码

7.9 设置背景图像的参考原点(位置)

background-orign

• padding-box:从padding区域(含padding)开始显示背景图像
• border-box:从border区域(含border)开始显示背景图像
• content-box:从content区域开始显示背景图像

8 voerflow:hidden

8.1 overflow溢出隐藏

超过内容以外的部分给隐藏起来

p{
	width:300px;
  height:10px;
  overfolw:hidden;
}

...
<p>xxxxxxxxxxxxxxxxxxxxxxxx......xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.....</p>
复制代码

2. 用来清楚浮动产生的影响
3. 解决margin-top的传递问题

9 让多个元素的一行显示的方法

9.1 让多个元素的一行显示的方法

• display:inline; // 转换为行内元素  可是设置宽高属性以后不起做用
• display:inline-block;  // block可让元素在一行显示，可是他会受空格/换行建，会产生默认间距
  • 去掉空格和换行建的影响 让标签都在一行 (不推荐 阅读性很差)
  • 给父元素增长一个 font-size:0，而后给子元素增长一个 font-size:14px;（可是咱们还会发现一个问题:元素里面若是有文字 文字消失，而后在子元素增长一个属性便可）
• float:left/rigjt; // 可是咱们清浮动

** [display:inline-block元素的特色]**

• 让盒子横向排列
• vertiacal-align 属性会影响到inline-block元素，你可能会把他的值设置为top
• 你须要设置每一列的宽度
• 若是html源代码中元素之间有空格，那么列与列之间会产生空隙

*{
	margin:0px;
  padding:0px;
}

.content1{
	display:inline;
  width:200px;
  height:100px;
  backgournd-color:yellow;
}

.content2{
	display:inline;
  width:200px;
  height:100px;
  backgournd-color:yellow;
}

...

<div class="content1">内容1</div>
<div class="content2">内容2</div>
复制代码

inline-block 在ie7 不兼容

直接让块元素设置为内联对象呈递（设置属性display:inline），而后触发块元素的layout（如：zoom:1 或float属性等）。代码以下

/*推荐:IE六、7*/ 
div {
  display:inline-block;
  *zoom:1;
  *display: inline;
}

/*推荐*/
div {
   display:inline-block;
   _zoom:1;
   _display:inline;
} 
复制代码

解释: display:inline-block照顾的是ie8+的浏览器，这是正常的设置，在低版本的ie设置下行内块有2个条件，一个行内，一个设置宽高，触发layout便可设置宽度，而div设置了宽度后仍是会黄航，layout不是为了水平而设置，因此为了块级元素转行内块上加上"display:inline"属性，可是display:inline不会触发layout，因而加上zoom:1从新触发layout，因而造成了一个跨域设置宽高的行内元素

10 文本省略号

10.1 单行文本出现省略号必备的条件（面试题）

*{
	margin:0;
  padding:0;
}

h2:{
	width:600px;
  height:30px;
  /*单行文本出现省略好必备的条件*/
  overflow:hidden;/*溢出隐藏*/
  white-space:nowrap;/*强制文字不折行*/
  text-overflow:ellipsis;/*文字隐藏的方式:以省略号的方式隐藏*/
}

复制代码

10.2 多行文本出现省略号必备的条件（面试题）

h2{
	width:600px;/*宽度*/
  display:-webkit-box;/*弹性盒子模型*/
  -webkit-line-orient:vertical;/*规定元素的排行方式:垂直排序*/
  -webkit-line-clamp:2;/*文字的行数 须要显示几行 值就写几行*/
  overflow:hidden;/*溢出隐藏*/
}
复制代码

11 浮动元素的特色

11.1 float元素的特色

1. 浮动元素在一行显示
2. 设置属性值为left时，浮动元素会依次从父级盒子的左侧向右排布，设置属性值为right时，浮动元素会依次从父级盒子的右侧想左排布
3. 浮动元素自动其有块级元素的属性
4. 浮动元素脱离文档流
5. 浮动元素内的子元素，不会继承浮动属性
6. 浮动元素下面的元素不能识别浮动元素的高度和位置,因此不准display:block了

12 文档流和脱离文档流

12.1 介绍

• 文档流:指的是元素排版布局过程当中，元素会自动从左到右，从上往下的流式排版。最终窗体自上而下分红一行行，并在每行中从左至右的顺序排放元素
• 每一个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下则另起新行再浮动
• 内联元素也不会独占一行;几乎全部元素(包括块级，内联和列表元素)都可生成子行，用于摆放子元素
• 标准文档流等级:分为两个等级，块级元素和行内元素；
• 脱离文档流：文档流内的正常元素识别不到这个元素(脱离文档的元素至关于平行漂浮在文档流之上)

正常的文档流:从左往右 从上往下
文档流能够分等级:行内元素和会计元素
行内元素  从左往右
块级元素  从上往下

12.2 面试题:行内元素和块级元素的特色，请列举出标签？

需求:须要块级元素(好比:div)在一行显示
脱离文档流:元素的正常排列方式被打破

脱离文档流的影响:

1. float
2. 定位

12.3 浮动参数的影响或负做用

1. 设置背景颜色属性不起做用
2. 给父元素设置边框border属性没有被撑开
3. 给父元素设置内边距padding属性也没有被撑开

12.4 如何清浮动

1. 给浮动元素的父元素手动添加一个固定的高度(不推荐)
2. 给浮动元素的父元素设置overflow:hidden/auto
3. 给浮动元素的父元素结束标签以前加一个具备元素特色的标签(咱们通常用div)，给元素clear:both
4. clearFix伪元素去清楚浮动 (这种方法是项目中最经常使用的方法)

利用伪元素:after清浮动的固定代码；只要清浮动咱们在浮动元素的父元素上加一个.clearfix便可

12.5 让元素消失在咱们的视野中

1. 透明度opacity:0; [0~1]
2. display:node 隐藏
3. height:0和overflow:hidden
4. line-height:0和overflow:hidden(没有设置高度的状况下)
5. visbility:hidden;让全部可见性的元素隐藏
6. margin/padding设置足够大  只要能让他消失
7. 利用transform 属性 让transform坐标足够大