前端html项目总结,前端实习项目总结一

关于定位总结

position:[static,absolute,relative,fixed]

默认值:static

适用于:除display属性定义为table-column-group|table-column之外的所有元素。

static:对象遵循常规流。此时4个定位偏移属性不会被应用。

relative:对象遵循常规流，并且参照自身在常规流中的位置通过top,right,bottom,left这四个定位偏移属性进行偏移时不会影响常规流中的任何元素。(这里要特别注意，它的意思是，用了relative定位，top,right,bottom,left只是让元素发生偏移而不是改变了常规流，此时这个元素能改变常规流的是它的margin,padding,border)

absolute:对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。(这里要注意的是它的参照物，定位的祖先元素，也就是它的祖先元素一定可以用top,bottom,left,right来定位)

fixed:与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

center(css3):与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。

page(css3):与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。

关于布局总结

display:none|inline|block|inline-block|table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group

默认值:inline。

none:隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间。

inline:指定对象为内联元素。

block:指定对象为块状元素。

list-item:指定对象为列表项目。

inline-block:指定对象为内联块元素。

table:指定对象作为块元素级表格。

inline-table:指定对象作为内联元素级的表格。类同于html标签。

table-caption： 指定对象作为表格标题。类同于html标签(CSS2)

table-cell： 指定对象作为表格单元格。类同于html标签(CSS2)

table-row： 指定对象作为表格行。类同于html标签

(CSS2)

table-row-group： 指定对象作为表格行组。类同于html标签(CSS2)

table-column： 指定对象作为表格列。类同于html标签(CSS2)

table-column-group： 指定对象作为表格列组显示。类同于html标签(CSS2)

table-header-group： 指定对象作为表格标题组。类同于html标签(CSS2)

table-footer-group： 指定对象作为表格脚注组。类同于html标签(CSS2)

float:none|left|right

默认值:none

none： 设置对象不浮动

left： 设置对象浮在左边

right： 设置对象浮在右边

float在绝对定位和display为none时不生效。

clear:none|left|right|both

适用于:块级元素

none： 允许两边都可以有浮动对象

both： 不允许有浮动对象

left： 不允许左边有浮动对象

right： 不允许右边有浮动对象

visible:visible|hidden|collapse

默认值:visible

visible： 设置对象可视

hidden： 设置对象隐藏

collapse： 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

overflow

overflow-x

overflow-y:visible|hidden|scroll|auto

默认值:visible

visible： 对溢出内容不做处理，内容可能会超出容器。

hidden： 隐藏溢出容器的内容且不出现滚动条。

scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。

auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值

遇到过得问题

关于浮动的应用，当两个div想要在一个水平面时，一个设置左浮动，另一个设置右浮动，而下面的一个div需要清除浮动。则达到效果。