css 学习笔记二
定位元素，布局总结
1.盒模式理解
- 边框（border）：可以设置边框的宽窄、样式和颜色。
- 内边距（padding）：可以设置盒子内容区与边框的间距。
- 外边距（margin）:可以设置盒子与相邻元素的间距。
- 盒子模型尺寸=border+margin+padding+content
注意：垂直方向的外边距会叠加：上下外边距相遇时，它们就会相互重叠，直至一个外边距碰到另一个元素的边框。
p { margin-top:50px; margin-bottom:30px }
由第一段的下边距与第二段的上边距相邻，我们会自然的认为它们间的外边距为（50+30）px,但实际上为50px。
如果有一连串的段落都应用了相同的样式，那么对其中第一段和最后一段来说，它们的上外边距和下外边距决定了它们与包含元素的间距。而那些位于中间的段落，根本不需要两个外边距加起来那么宽的间距。所以相邻的外边距叠加起来是最合理的，哪个外边距款，就以那个外边距作为段间距。
- 给盒子设定宽度后，添加内边距会导致元素比原来款了那么多元素。
- 外边距的单位：
根据经验，为文本元素设置外边距时通常需要混合使用不同的单位。 margin：.75em 30px
左右边距使用像素，是段文本始终与包含元素边界保持固定间距，不受字号变大或变小的影响。而对于上下边距，以em为单位则可以让段间距隋子豪的变化而西安欢迎的增大或缩小。
2.浮动与清除
浮动float，意思就是把元素从常规文档流中拿出来。一是可以实现传统出版物上那种文字让排图片的效果，二是可以让原来上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏。
浮动元素脱离了常规文档流之后，原来紧跟其后的元素就会在空间允许下，向上提升到与浮动元素平起平坐。
如果浮动元素后面有两个段落，而你只想让第一段与浮动元素并列（就算旁边还可以放下第二段，也不想让它上来），就用clear属性来“清除”第二段，然后它就乖乖的呆在浮动元素的下面了。
3.围住浮动元素的三种方法
浮动元素脱离了文档流，其父元素也看不到它，因此不会包围它，这样它对布局可能产生破坏性的影响。这并不是我们想要的。以下为三种围住浮动元素的方法。
方法一：为浮动元素的父元素添加overflow：hidden，以强制它包围浮动元素
实际上，overflow：hidden；声明的真正用途是防止包含元素被超大内容撑大。overflow;hidden之后，包含元素依然保持其设定的宽度，而超大的字内容则会被容器切掉。除此之外，overflow： hidden；还有另一个作用，即它能可靠的迫使父元素包含其浮动的子元素。
方法二：同时浮动父元素。
浮动section以后，不管子元素是否浮动，它都会紧紧地包围（收缩包裹）住它的子元素，因此需要父元素width：100%与浏览器同宽。，另外，由于section现在也浮动了，所以footer会努力往它的旁边挤去。为了强制footer依然呆在section下方，就要给它清除浮动，clear;left.
方法三：添加非浮动的清除元素，可以直接在标记中加，也可以通过 添加clearfix类来加。
用css来添加这个清楚元素的方法：（没有父元素的情况下）
由于最后这种浮动并非我们所需要的效果，而且也没有包围它的父元素，所以就无法使用前面的“强制父元素包围”的战术。不过可以使用clearfix规则
这样无论将来哪个段落的文本高度低于图片，页面布局都不会被破坏。
4.定位：position
position有四个属性值：static，relative，absolute，fixed。默认值为static。
- 静态定位（static）：静态定位下的块级元素会在默认文档流中上下堆叠。不应用样式的HTML布局就是默认的static文档流。
- 相对定位（relative）：相对定位下，利用top和left属性相对于元素在文档流中的常规位置重新定位，可以给top和left属性设定负值，把元素向上、向左移动。注意：除了这个元素自己相对于 原来的位置挪动了一下之外，页面没有发生任何变化。即这个元素原来占据的空间没有动，其他的饿元素也没有动。相对定位的关键是要考虑到元素原来的空间。
- 绝对定位（absolute）：绝对定位会把元素彻底从文档流中拿出来，然后在相对于其他元素（其他定位上下文（默认的body之外），相对祖元素的绝对定位，祖元素必须为相对定位，为绝对 定位定位上下文。）
- 固定定位（fixed）：固定定位元素的定位上下文是视口，因此不会随页面的滚动而移动，固定定位并不常用，最常用的情况是用它创建不随页面滚动而移动的导航元素。
5.显示属性：display
block 象块类型元素一样显示。会扩展填充父元素，可以为它设定外边距和内边距。
inline 缺省值。象行内元素类型一样显示。会收缩包裹自己的内容。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。会收缩包围自己的内容。
list-item 象块类型元素一样显示，并添加样式列表标记。
none：该元素及所有的包含在其中的元素，都不会在页面中显示，原来占据的空间也会被“回收”，与此相对的是：visibility属性，visible（默认值）和hidden。如果是 hidden，元素会被隐藏，但它占据的空间页面仍然存在。
6.背景位置：background-position
background-position属性同时设定元素和图片的原点，默认值为左上角原点。top left控制着水平和垂直方向的起点。center，center可简写为center，也可以百分数， 20%，80%。
background-clip。控制背景绘制区域的范围，比如可以让背景颜色和背景图片只出现在内容区，而不出现内边距区域。
background-origin。控制背景定位区域的原点，可以设定元素盒子坐上角以外的位置。
background-break。控制分离元素的显示效果。
7.厂商前缀元素（VSP）
border-image linear-gradient(渐变) radial-gradiet transform transform-origin background* background-image* translate
前缀：-moz- firefox ; -webkit- chrome及safari ; -ms- 微软Internet Explorer ; -o- opera; w3c transform:skewX（-45deg）.
8.linear-gradient：（渐变）
默认从上到下 ：
从左到右 ：
左上到右下 ：
渐变点 ： 50%处有一个渐变点：
20%，80%处有两个渐变点：
25% 50% 80%处有三个渐变点：
9.简体字体属性
一条声明指定字体加粗、斜体，小型大写字母，大小和字体族
font简写形式的规则：
规则一：必须声明font-size和font-family的值；
规则二：所有值必须按照如下的顺序声明：
font-weight、font-style、font-variant（small-caps小型大写字母体）不分先后。
设置font-size属性的同时，可以顺便设定line-height。
10.文本属性
text-indent：文本缩进，属性值正负都可，默认情况下，元素起点就是包含元素的左上角。正直向右移，负值向左移，不过要有左边预留空间。
letter-spacing：字符间距，属性值正负均可，为正值时增大字符间距，为负值时缩小间距，设定字符间距一定要用相对单位。
word-spacing：单词间距，与字符间距相似，不同的只是调整单词间距，而不影响字符间距。
text-decoration：文本装饰。underline（下划线），overline（
），line-throung（
），blink（添加闪烁效果），none（不显示任何修饰）。
垂直对齐： 值为任意长度值以及sub，super，top，Middle，bottom等
vertical-align以基线为参照上下移动文本，但这个属性只影响行内元素。如果想在垂直方向上对齐块级元素，必须把其display值设定为inline。vertical-align属性最常用于公式或化学元素的上下标。
11.布局的基本概念
多栏布局有三种基本的实现方案：固定宽度，流动，弹性。
- 固定宽度：固定宽度布局的大小不会随用户调整浏览器窗口大小而发生变化，一般是900到1100像素宽。其中960像素是最常见的。
- 流动布局：流动布局的大小会随着用户调整浏览器窗口大小而变化，这种布局能够更好的适应大屏幕，但意味着放弃对页面某些方面的控制，比如随着页面的变化，文本行的长度和页面元素之间的位置关系可能随时发生变化。
- 弹性布局：弹性布局与流动布局类似，在浏览器变宽时，不仅布局变宽，而且所有内容元素大小也会发生变化。
布局高度在多大数情况下，是不需要设定的，这样扩展的元素会把下方的元素向下推，而布局也能随着内容数量的增减而垂直伸缩。
布局宽度需要精细设置，因为要设置内外边距。
应用例子：
三栏-固定宽度布局可能会出现这种情况：
页脚位于浮动元素后面，所以就会尽量往上移动。解决这个问题，为页脚应用clear：both，就可以阻止它往上移动，不让它超过浮动元素的下边距。
设定内外边距的方法：从设定元素宽度中减去添加的水平外边距、边框和内边距的宽度之和；
在容器内部的元素上添加内边距或外边距，如果布局中的栏是浮动的，而且都设定了宽度，你就根本不要去动它！要动，就把内容放在内部div里，要动就动这个div。
注意：如果容器的上、下边距不可见，内部div的上下边距会叠加。
使用box-sizing：border-box;这是最简单的方法，只要在三个浮动栏的css规则中分别添加内边距和边框就不会导致盒子的宽度变化了
12.界面组件
纵向菜单：li+li变成li+li a,就可以把上边框添加到列表项所包含的链接元素上，而且，还把内边距从列表项转移到链接内部。这样，链接上下就互相接触了，中间没有了间隙，鼠标经过时光标状态也不会变了。最后，要把每个链接的display属性设定为block，这样链接盒子就会由“收缩包围内容”变成“扩展填充父元素”，即链接的可点击区域将扩大到整个列表行。
横向菜单：浮动让li元素从垂直变成水平，display：block让链接从收缩变成扩张，从而使整个li元素都变成可以点击的。另外，选择符li+li a为除第一个链接之外的每个链接左侧都加一条线，作为视觉分割线。
- 下拉菜单：
而不是overflow：hidden的原因是前者会导致后来添加到下拉菜单中的子菜单无法显示-它们最终会显示在父元素ul的外面，会因为overflow而被hidden。为保证用户体验，所有的视觉样式-内边距。背景，边框，等等都要应用给链接a，而不要应用给ul或li，以便可点击区域最大化。
将
变成这样
的作用是，把：hover设定在li元素，就相当于也把它设定给了所有祖先li元素。然后，只要再给其他子元素（链接）设定样式即可。这个改进，提高了菜单的易用性，可以看到点击的顺序：
- 表单：
form元素有两个必要的属性：action和method。action属性用于指定服务器上用来处理表单数据的文件的URL。method（值为get和post）用于指定怎么把数据发送到服务器。通过为form设定内边距，它所包含的内容都与表单边界空开了距离。fieldset的子首元素为legend，添加了灰色条，相应的把文本变为白色。legend元素默认是由浏览器内部的一种未加说明的机制确定，并不是由浏览器样式表设定，不能通过css来精确控制他的位置。解决这个问题就是让他的文本包含在一个span元素中，将元素设定为display:block,然后再设定样式。
- 控件与标注：表单包含一或多个控件，可以把一组相关的表单控件组织到一个控件元素fieldest中，控件就是让用户勾选，点选，输入的组件。每个表单控件（除submit按钮除外），都有一个对应的label文本元素，用于描述控件代表的数据。label的for属性与控件的id属性必须匹配，还可以是这样的，就不需要for属性了，
- 控件类型：text:基本的单行文本框。 password：文本显示为掩码。 checkbox：复选框。 radio：单选按钮。 submit：提交表单的按钮。 time ,date, search:HTML5文本框的变化。
注意：复选框和单选框是成组出现的，分组的方法是为他们设定相同的name属性。
单选框按钮和复选框是由很多标注控件组成，把它们都放到一个section元素中，方便设定样式。
- 搜索框：应用css3过渡：
- 弹出层：使用figcaption（图像文本内容），必须确保它在figure（用于文档中插图的图像）中的唯一的。而且，它要么是第一个元素，要么是最后一个元素。设定figure元素样式，让它在视觉上成为一个包围图片的盒子。
把图片设置为display:block；因为图片是行内元素，行内元素的定位原则是与文本基线对齐，而不是与他们的容器底边对齐，所以，在把它们放到块级元素的内部时，就可以把图片转换为块级元素可以解决这个问题。 弹出层内容定位absolute的父元素定位相对定位relative。
堆叠 上下文问题：在一个包含多个同辈元素的容器内，这些同辈元素都会构造一个堆叠上下文，在这个上下文中，它们的子元素就会上下堆叠起来。解决：css中有一个z-index属性，用于控制元素的在堆叠上下文中的次序。z-index值较大的元素，在堆叠层次中位于z-index值较小的元素上方，默认情况下，所有堆叠元素的z-index的值为auto，相当于0.（对position为static之外的元素有效）
- 用css创造三角形
13.页面布局：
页眉，页脚，内容区。
弧形角：border-radius:左上，右上，右下，左下
阴影：box-shadow：水平偏移量，垂直偏移量，模糊量，扩展量，颜色，阴影位于边框内部（默认位于边框外部）
文本阴影：text-shadow：水平偏移量，垂直偏移量，模糊量和颜色。
14.css优先级顺序;
display及声明。
position及相关声明。
margin，padding和border的声明。
字体/文本相关声明。
装饰相关声明。
