Css学习总结

布局相关知识

1 盒子模型

外盒子 在计算宽高时要算外边距。

内盒子在计算宽高时不计算内边距。

块级元素在普通文档流中独占一行，可设置宽高宽度默认是父级100%，内外边距，可容纳其他元素。

行内元素在普通文档流中不独占一行，不可设置宽高，宽度高度默认是内部元素宽度，水平方向可设置内外边距，可容纳文本或者其他行内元素 a标签特殊

行内块在普通文档流中不独占一行，可设置宽高，内外边距，可容纳其他元素但是相邻元素之间会有缝隙，<img> <input>

外边距合并问题 -->垂直方向的外边距两个盒子的距离不会是两个外边距之和只是其中较大者。--->只能去避免

内边距合并问题 --> 父子盒子同时设置内边距会发生合并。解决方案 父盒子设置边框 或者父盒子overwirte:隐藏。

width ,margin,padding

1 margen会有垂直外边距合并，id6下margin bug多(建议酌情使用)

2 padding 会影响盒子大小如果设置padding相应的宽度要进行减小（比较麻烦）

3 width 没有问题使用较多在进行布局一般会使用宽度或者高度剩余法去做布局

css3可以用box-sizing来指定盒模型

标准盒子 box-sizing:content-bon(默认) 设置width时不包含边框和内边距。

box-sizing:border-box 在设置width时包含padding和border

css 的定位机制有三种：普通流，定位，浮动。

浮动： 设置了浮动属性的元素会脱离标准流的控制，不占原有空间。

浮动首先创建包含块的概念(包裹)。意思是说浮动的元素总是会找离他最近的父元素对齐，但不会超过内边距的范围。浮动元素排列的位置，跟上一个元素有关系，如果上一个元素有浮动，则a元素顶部会和上一个元素的顶部对齐，如果上一个元素是标准流，则a元素的顶部会和上一个元素的底部对齐。设置完浮动后块级元素会在一行显示，但是由于脱离文档流父元素会产生塌陷，这时要清除浮动来完善布局。

清除浮动的方式

1 额外标签法 在浮动元素元素后加空标签 style="clear:both"。

2 父级添加overflow属性方法 通过出发bfc来清除浮动 overflow为hidden|auto|scroll

优点：代码整洁 缺点：内容增多容易造成不会自动换行导致内容被隐藏掉如文本等

使用after伪元素清除浮动 是空标签的升级版原理一致在浮动元素最后添加一个空标签来清除浮动

.clearfix:after{

content:".";

display:block;

height:0,

clear:both;

visibility:hidden;

}

.clearfix{*zoom:1}

定位

相对定位：相对与该元素在标准文档流之前的位置进行定位，相对定位不会脱离文档流。

绝对定位：相对于最近的以定位（绝对|固定|相对）的父级元素进行定位，父亲元素都没有定位则相对与document文档定位。如果决定定位给盒子指定了定位，但是没有给与偏移距离，则盒子以标准流来显示排序，和上个盒子的底边对齐但是不占位置。

（定位适用于消息提示）

布局中的子绝父相的道理。

子盒子绝对定位可以放在父盒子的任意位置不会占用位置。而父元素在进行布局时，需要占用位置，因此父亲只能是相对定位（相对定位不会脱标，绝对定位会脱标）

z-index可以改变定位元素的堆叠顺序，可以取正，负，0.数字越大定位元素在堆叠元素中越居上。如果取值相同后来者居上。

使用注意事项：只能与使用定位的元素配合使用，z-index的值是纯数字没有单位。

width:auto和width:100%的区别

1、width:100% 并不包含margin-left  margin-right的属性值，直接取其父容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。就会发现加了  margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围，(这条相对于父容器是body)。

2、width:auto包含margin-left/margin-right的属性值。width:auto总是占据整行，这其中margin的值已经包含其中了，如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。

3、一般width:auto使用的多，因为这样灵活，而width:100%使用比较少，因为在增加padding或者margin的时候，容易使其突破父级框，破环布局。