第二阶段day3总结

一、标准流和display属性:

1.标准流:浏览器对标签默认的布局方式就是标准流
2.标准流布局原则:
块级:a.块级标签一个占一行(不管标签的宽度是否是父标签的宽度)。
b.默认宽度是父标签的宽度,默认高度是内容的高度
c.直接设置宽高有效
行内块标签:
a.多个行内块可以在一行显示
b.默认的宽高都是内容的宽高
c.直接设置宽高有效
行内标签:
a.多个行内可以在一行显示
b.默认的宽高都是内容的宽高
c.直接设置宽高无效

3.display属性:转换标签的性质
block:块级
inline:行内
inline-block:行内块
注意:行内块标签和其他标签之间默认有间隙而且这个间隙无法消除



    
        
        
        
    
    
        
        
aaa
aaa
百度一下 百度一下

二、浮动:

1.怎么浮动
通过给float属性赋值为left或者right来让标签浮动。浮动会让标签脱流。
浮动的目的就是让竖着显示的可以横着来(针对块)

2.浮动的效果:
a.所有的标签浮动后,一行可以显示多个;默认的宽高是内容的大小;可以设置宽度和高度
b.一行显示不了的时候才会自动换行

3.注意事项:
()
a.如果同一级的标签,后边的需要浮动,前面的也要浮动,否则可能会出现显示的问题
b.浮动的标签不占池底位置,只占水面的位置;不浮动的既占池底又占水面
-->



    
        
        
        
        
    
    
        
        

三、浮动(文字环绕):

文字环绕效果:
被环绕的标签浮动,文字对应的标签不浮动。就会自动产生文字环绕的效果



    
        
        
    
    
        
        
        

来自:http://blog.csdn.net/lethwei/article/details/4334728 因为项目需要, 要更改 TreeView 的 StateImageList 大小, 试了下, 更改绑定的 StateImageList.ImageSize 没有作用, 显示大小始终是 16x16 在网上搜了搜, 相关资料比较少, 终于在 CodeProject 上找到问题原因: http://www.codeproject.com/KB/tree/customstatetreeview.aspx?display=PrintAll&fid=313614&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=1519145 附文: Underlying comctl treeview uses a zero image index, indicating no state image is displayed. Thus comctl state imagelist must have a dummy as first image. .NET copies the passed StateImageList to a new NET internal imagelist. The first image is duplicated, serving as dummy and the copy is passed to comctl. TreeNode.StateImageIndex values passed to comctl are then increased by 1. This might have been a nice feature, but WinForms Team blundered using a constant 16 x 16 size for the copy. If you want different size, use code below and add a dummy as first image.

四、清楚浮动:

  1. 清除浮动:清除浮动不是将标签的浮动给去掉,而是清除因为浮动而产生的高度塌陷的问题

    高度塌陷:父标签不浮动,子标签浮动,并且不设置父标签的高度,就会产生高度塌陷的问题(父标签)

    方案一:添加空盒子,在高度塌陷的标签(父标签)的最后添加一个空的div,并设置样式clear的值为both
    方案二:给父标签添加样式设置overflow的值为hidden
    方案三: 万能清除法



    
        
        
        
    
    
        

五、定位:

CSS中可以通过left,right,bottom,top属性来设置标签到上下左右的距离(但是默认情况下这些值不是都有效的);
想要让定位属性有效,必须通过position属性来设置参考对象。

1.position
initial: 默认值, 没有相对定位
absolute: 相对第一个非static/initial父标签进行定位
relative: 相对于自己在标准流中位置来定位。(当标签本身不希望去定位,只是想让自己的子标签可以相对本身来定位的时候使用)
fixed:相对应浏览器定位
sticky:当网页的内容不超过一屏(不滚动)的时候,就按照标准流进行定位。超过了就相对浏览器定位

2.注意:如果想要设置right值要保证相对标签的宽度是确定的。如果想要设置bottom值要保证相对对象的高度是确定的

3.技巧:当遇到某个方向定位死活都无效的时候,可以尝试让这个标签浮动,然后再定位



    
        
        
        
    
    
        
        
        
        
        
        
        
        
        
        
        
        

六、盒子模型:

html中所有可见的标签都是一个盒子模型:包括长和宽决定的内容的大小、padding、border、margin四个部分组成。
其中内容、padding、border是可见,margin不可见

1.内容:设置width和height影响的就是内容部分的大小。添加子标签、添加内容都是放在内容部分的
2.padding:在内容的外围,可见部分,如果标签有背景颜色,那么这个部分的颜色和内容的一致
3.border:边框,border是在padding的外围,如果没有padding就在内容的外围,可见部分。可以设置颜色和大小
4.margin:



    
        
        
        
        
        
    
    
        
        
abc卡的哈哈双方都世纪东方哈啥

七、其他常用的属性:



    
        
        
        
    
    
        百度一下
        

我是段落:hello world我是段落:hello world

  • 数学
  • 语文

你可能感兴趣的:(第二阶段day3总结)