css3

float   ul li 左右浮动   

选择器  后代选择器   指某个元素所有后代元素   

如  .aa ul li{} 指aa元素所有ul内的li元素

width:单单指内容宽度，不包括padding和边框

 

 

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。

 

如果父元素和子元素一起浮动则子元素可以撑开父元素，子元素浮动而父元素不浮动则撑不开，父元素浮动子元素不浮动也能撑开。

并且浮动后元素宽度不在等于父元素，而取决于子元素撑开的大小

浮动后其他的元素将占据原本的位置

 

层模型--绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

 

层模型--相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

 

《CSS设计指南》盒模型 position float相关笔记

盒模型

• border 边框宽窄、样式和颜色
  • 宽度： thin medium thick 非百分比和负值的数值
  • 样式： none hidden dotted dashed solid double groove ridge inset outset 等
• padding 盒子内容区和边框的间距
  • 没有设定内边距的情况下，内容紧挨着边框。
  • 内边距实际加在声明的盒子宽度上。
• margin 盒子与相邻元素的间距
  • 中和外边距和内边距
  • 样式表第一条规则 * {margin: 0; padding: 0;}
    • reset.css
• 叠加外边距
  • 垂直方向上的外边距会叠加(重叠），直到一个元素的外边距碰到另一个元素的边框为止。
  • 水平相邻的元素，它们的水平间距是相邻外边距之和。
  • 外边距的单位
    • 为文本元素设置外边距时通常需要混合使用不同的单位
    • 左右边距使用像素，使文本始终和包含元素边界保持固定间距
    • 上下外边距以em为单位，让段间距随字号变化而响应增大或缩小

盒模型结论一：

• 没有宽度(没有设置width)的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边框和外边框，会导致内容宽度减少，减少量等于水平边框、内边框和外边框的和。
  • 如果不设置块级元素的width属性，那么这个属性的默认值是auto,结果会让元素的宽度扩展到与父元素同宽。

盒模型结论二：

• 为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的width属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。

CSS box-sizing

浮动与清除

浮动元素脱离了常规文档流之后，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。

float

• CSS3 Multi-column Layout Module规定了如何用CSS定义多栏布局。
• 在浮动一张图片或者其他元素是，是在要求浏览器把它往上方推，直到它碰到父元素的内边界。
• 浮动非图片元素时，要给它设定宽度。
• 浮动元素位于“文档流外部”，因而它已经不被包含在标记中的父元素之内。

围住浮动元素的三种方法

• 为父元素添加 overflow:hidden
  • overflow: hidden;
    • 防止包含元素被超大内容撑大
    • 迫使父元素包含其浮动的子元素
• 同时浮动父元素
  • 被清除(clean)的元素不会被提升到浮动元素的旁边
• 添加非浮动的清除元素
  • 给父元素的最后添加一个非浮动的子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前面的浮动元素。

/*clearfix规则：*/
.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
/*clearfix添加了一个清除的包含句点作为非浮动元素（要有内容，句号是最小的内容）*/

• 注意：
  • 不能在下拉菜单的顶级元素上应用overflow:hidden，否则作为子元素的下拉菜单不会显示。
  • 不能对已经靠自动外边距居中的元素使用“浮动父元素”技术，否则它不会居中。
  • 没有父元素时：
    • clearfix “清除子元素”

定位：

• 参考：你对Position的了解程度有多少?

position

• static 静态定位，每个元素都处于常规文档流中
• relative 相对的是它原来在文档流中的位置（或者默认位置） 。
  • 这个元素原来占据的空间没有动，其他元素也没动。
  • top right bottom left(可以给top left属性设定负值，把元素向上向左移动)
• absolute 绝对定位会把元素彻底从文档流中拿出来，再相对其他元素定位。
• fixed 固定定位元素的定位上下文是视口，因此它不会随页面滚动而移动。

定位上下文

• 把元素的positon属性设定为relative absolute fixed后，继而使用top right bottom left属性，相对于另一个元素移动该元素的位置。这里的“另一个元素”就是该元素的定位上下文。
• 没有相对定位的祖先元素供其参照，内部div只能以默认的定位上下文body作为参照，相对于它定位。

显示属性

• block

• inline

  a {display: block;}
  /*让原先的行内元素填满其父元素*/
  

• none 该元素及所有包含在其中的元素，都不会在页面中显示。他们原先占据的所有空间也都会被“回收”。

visibility: hidden; 元素隐藏，但它占据的页面空间仍存在。