前端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的默认值
遇到过得问题
absolute relative
关于浮动的应⽤，当两个div想要在⼀个⽔平⾯时，⼀个设置左浮动，另⼀个设置右浮动，⽽下⾯的⼀个div需要清除浮动。则达到效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。