css页面布局之网页布局元素

一、元素类型与转换
1.1元素类型
元素类型包括块元素、行内元素、内联块元素
1.块元素：可以设置宽高大小、默认为100%，并且独占一行。例如：p,ul,li,h1,div,form,table等。
2.行内元素：无法设置宽高，元素大小随内容变化，所有元素默认排在一行。例如：i,b,span,a
3.内联块元素: 既能设置宽高大小，又能排在一块显示。例如：img、input
补充：居中：行内元素在文本居中时，都会跟着居中。text-align:center;
块元素 margin:auto

1.2 元素类型转换----- display属性
display: block 块元素
inline 行内元素
inline-block 内联块元素
例如：div本身为块元素

image.png

将div转换为行内元素后：display:inline

image.png

将div转换为内联块元素后：display:inline-block

image.png

二、定位
2.1 css中有三种基本的定位机制：普通文档流、浮动和定位。
除非特殊说明，否则所有HTML元素都在普通文档流中定位。块级元素从上到下一个接着一个排列，行内元素在一行中排列。

2.2 使用定位元素（position）可以选择4种不同类型的定位，这会影响元素的显示位置。定位元素可取：static(静态定位)、relative(相对定位)、absolute(绝对定位)和fixed(固定定位)

2.2.1 静态定位（static）

1. 静态定位是元素默认的定位方式，是各个元素在HTML文档流中的默认位置。
2. 块级元素生成一个矩形框，作为文档流的一部分，行内元素会创建一个或多个行框，置于其父元素中。
   3.在静态定位方式中，无法通过位置偏移属性(top、bottom、left或right)来改变元素的位置。

2.2.2 相对定位（relative）
相对定位相对于本元素在文档流原来出现位置的左上角进行定位，可以通过位置偏移属性改变元素位置。
注意：元素仍然占据原来未移动的位置，该元素移动后会覆盖其他的框元素。

image.png

2.2.3 绝对定位
绝对定位是脱离文档流的，不占据原来未移动的位置。绝对定位是相对于父级元素或更高的祖先元素中有relative（相对）定位并且离本元素层级关系上最近元素的左上角进行定位。如果在祖先元素中每有设置relative的，则默认相对body进行定位。

image.png

2.2.4 固定定位（fixed）
固定定位是绝对定位的一种特殊形式，是以浏览器窗口作为参照物来定义网页元素。
当对元素设置固定定位后，该元素将脱离标准文档流的控制，始终依据浏览器窗口的左上角来定义自己的显示位置。元素始终会显示在浏览器窗口的固定位置。

2.2.5 定位元素的层叠次序
当多个块元素脱离普通文档流后就形成多个层。没有进行层叠次序时，在HTML源文件靠下面添加的层，其位置越靠上，即显示在浏览器的最前面。
使用z-index可以改变层叠次序：
1.z-index属性值大的元素放置在前面
2.z--index 仅能够在绝对定位元素上使用

    
        
        
        
    
    
            
1
            
2
            
3
    

image.png

添加z-index后

image.png

三、浮动
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。
浮动可用浮动元素：float
3.1 浮动三种情况
情况一：三个框都左浮动

    
        
        
        
    
    

            
1
            
2
            
3
            
    

image.png

情况二：父框宽度不够
将.div-outer中的width改为250px

image.png

情况三：框下浮动
将.div1中的height改为250px;

image.png

3.2 清除浮动
浮动会与其它元素发生重叠，但不会和文字、图片发生重叠。
清除浮动：

方法一：overflow:auto
方法二：clear:left/right/both

给3清除浮动：

image.png

四、溢出和剪切
在盒子模型中代表块元素的矩阵对象，可以通过css样式来定义内容区域的高度和宽度。

image.png

未使用overflow: hidden;时：

image.png

使用overflow: hidden;时：

image.png

注意：只有父元素设置为relative时，子元素设置为absolute时有用。
五、对象的隐藏和显示

对于块状对象可以设置显示或隐藏。
方法一：visibility属性
visibility:visible}hidden
visible:对象可见
hidden: 对象不可见，但隐藏的元素仍需占据与未隐藏之前一样的空间。也就是数，该元素虽然被隐藏了，但仍会影响布局。

方法二：display属性
display:none表示隐藏某个元素，并且元素不会占据原来的空间。

没有添加属性时：

image.png

添加visibility: hidden;后:

image.png

添加display:none后：

image.png