css布局属性（重点！！！）

客官°小女子只卖身不卖艺 2022-05-17 10:06 169阅读 0赞

QQ:275487025  
QQ群：854312770  
欢迎各种大牛指点，和小白一起学习。

（重点）position定位属性：  
relative相对定位特点是：

相对于游览最上边的左上角或者右上角来定位，但是**不会让出原位置**，除非浮动后，才会让出原位置；

absolute绝对定位特点：

这个有两种情况：

情况1：看他是否有**脱离文档流**（浮动或相对定位）的父元素，有的话就以他的父元素来定位，情况2：如果没有那么就以游览器最上边的左上角或者右上角来定位，**让出原位置**

（这两种常用，要求必须完全掌握！！！）

fixed固定定位：

通过定位可以将其定位在上下左右角任意一个地方，无论网页上下左右如何滑动，他的位置不变，是以我们的电脑屏幕来定位的。
        static(默认)：默认文档流，靠margin来定位,忽略 top, bottom, left, right 或者 z-index 声明。
    top上，bottom下，left左，right右

举例说明：  
相对：

<html>
    <head>
    <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style>
    </head>
    
    <body>
    <h2 class="pos_abs">这是带有绝对定位的标题</h2>
    <p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
    </body>
    
    </html>

绝对：

<html>
    <head>
    <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style>
    </head>
    
    <body>
    <h2>这是位于正常位置的标题</h2>
    <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
    <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
    <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
    <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
    </body>
    
    </html>

固定：

<html>
    <head>
    <style type="text/css"> p.one { position:fixed; left:5px; top:5px; } p.two { position:fixed; top:30px; right:5px; } </style>
    </head>
    <body>
    
    <p class="one">一些文本。</p>
    <p class="two">更多的文本。</p>
    
    </body>
    </html>

浮动属性：

float：
         none
         left
         right

float属性定义元素在哪个方向浮动  
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止  
不论是行内元素还是块元素只要设置了float属性，就可以用width、height设置宽高

（重点来了！！！每写完一层浮动后的代码要脱离浮动！！！不然会影响下面写的代码！！！）  
清除浮动：  
clear:规定元素的哪一侧不允许其他浮动元素  
none:默认值。允许浮动元素出现在两侧  
left:在左侧不允许浮动元素  
right:在右侧不允许浮动元素  
both:在左右两侧均不允许浮动元素  
（可以写在css文件中，那层需要可以在HTML里面引用就可以了）  
![这里写图片描述][70]

堆叠属性：

z-index
    数字越大，离浏览者越近
    只针对脱离文档流的元素生效

可见性属性：

visibility:hidden
    visibility属性指定一个元素应可见还是隐藏
    visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间
    visibility:visible  默认值，元素是可见的

显示属性：

display
    display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间
    display:visible可以显示某个元素，默认就是visible

块级元素与行级元素：

块级标签：显示为“块”状，独占一行

不管内容多少都会占据一整行
    具有宽度和高度，可以通过width、height属性设置宽高

行级标签：在一行内按照先后顺序显示

只占据显示自己内容的宽度，不会占据整行
    不能通过width、height属性设置宽高
    如果设置了float属性，就可以设置宽高

inline-block:不会占据整行，但可以通过width、height设置宽高

例如：图片，按钮，单复选框，单行/多行文本框等

可以通display属性相互转换：

display:block/inline/inline-block

溢出属性：

overflow |overflow-x |overflow-y
    visible(默认允许溢出)
    hidden
    scroll
    auto

使用盒子模型的浮动布局 ：

虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其它区块的位置并不会跟随着改变，所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中，所以文档的普通流中的区块框表现得就像浮动框不存在一样。

使用盒子模型设计页面布局 ：

8.1 区块居中设计
    8.2 设置两列浮动的布局
    8.3 设置三列浮动的布局
    8.4 设置多列浮动的布局

![这里写图片描述][70 1]

![这里写图片描述][70 2]

![这里写图片描述][70 3]

![这里写图片描述][70 4]

[70]: /images/20220517/3da350a4c90f4805b4f825eb17e41742.png
[70 1]: /images/20220517/17b8f9c5d7f7437397815e989a8cd1de.png
[70 2]: /images/20220517/f5414e329b8946908c5fd459847195e6.png
[70 3]: /images/20220517/843fc6ca8c064183883c3c6437060e42.png
[70 4]: /images/20220517/2292e96352f949678d624008b428501e.png