css(二）

CSS属性书写顺序

1. 布局定位属性：display、position、float、clear、visibility、overflow
2. 自身属性：width、height、margin、padding、border、background
3. 文本属性：color、font、text-decoration、text-align、vertical-align、white-apace、break-word
4. 其他属性：content、cursor、border-radius、box-shadow、

布局流程

1. 先确定版心（可视区）；
2. 分析页面中的行模块，以及每个行模块中的列模块；
3. 制作HTML结构，先有结构，再有样式的原则；
4. 然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块；

定位

定位=定位模式+边偏移
通过top、bottom、left、right属性来定义元素的边偏移

定位模式

相对定位（relative）
是相对原来的位置；原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
绝对定位（absolute）
不保留原来的位置，完全脱标；
标准流的子盒子总是以父级为准移动位置；
如果父级没有定位，绝对定位子盒子以我们浏览器文档为准移动位置；
如果父级有定位，绝对定位子盒子，以父级为准移动位置。
父级要占有位置，子级要任意摆放，可以得出子绝父相的。
固定定位（fixed）
不占位置；跟父元素没有任何关系，所以只认浏览器的可视窗口；不随滚动条而滚动。

绝对定位/固定定位设置margin：auto不能让盒子水平居中的，left：50%；margin-left：-100px；

堆叠顺序

可以调整盒子的堆叠顺序；属性值只能是正整数、负整数和0，数值越大，盒子越靠上；只能应用于相对定位、绝对定位、固定定位的元素。

定位改变display属性

块级元素不给width默认通栏显示；
行内块不给width，默认的宽度是内容的宽度；
浮动也能转换；绝对定位和固定定位也和浮动类似，默认转换的特性是转换为行内块。
如果一个行内的盒子，添加了浮动、固定定位和绝对定位，不用转换就可以给这个盒子直接设置宽度和高度等。
浮动元素、绝对定位、固定定位不会触发外边距合并的问题

标准流、浮动、定位区别

元素的显示与隐藏

display:none隐藏对象，隐藏之后，不再保留位置；
display：block除了转化块级元素之外，同时还有显示元素的意思。
visibility：hidden隐藏之后，保留位置；
visibility：visible
overflow：visible不剪切内容也不添加滚动条；
hidden溢出隐藏，超出的部分隐藏掉；
scroll不管是否超出内容，总显示滚动条；
auto超出自动显示滚动条，不超出不显示滚动条。

用户界面样式

鼠标样式（cursor)，轮廓线（outline），防止拖拽文本域（resize：none）

对齐

宽度的块级元素居中对齐：margin：auto；
文本居中对齐text-align:center；
垂直对齐vertical-align只针对于行内元素和行内块元素，默认基线对齐baseline；
图片的中线对齐文字的中线，垂直居中middle；
图片的顶线对齐文字的顶部对齐top。
如果去除图片底部空白缝隙，只要让图片不和基线对齐即可。
块级元素对于vertical-align无效，可以给img添加display：block转换一下就可以了。

溢出的文字省略号显示

精灵技术、滑动门

精灵技术是为了有效的减少服务器和发送请求的次数，提高页面的加载速度。
background-position精确的定位，一般用于背景图片。

margin负值、三角形怎么用css写出来

margin负值
负边距+定位：水平垂直居中
压住盒子相邻的边框，只需属性值为负值就可以了；可以结合着定位position和z-index元素来突出显示某个盒子
三角形
宽高为0；
4个边框都要写，如果只要一个三角形，只需其他三个边框设置为透明（transparent）；
为了兼容性，加上font-size：0；line-height：0。