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

最新推荐文章于 2024-06-11 14:46:29 发布

李-疯子

最新推荐文章于 2024-06-11 14:46:29 发布

阅读量2.3k

点赞数 1

文章标签： scc

本文链接：https://blog.csdn.net/qq_42696138/article/details/81545206

版权

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里面引用就可以了）
这里写图片描述

堆叠属性：

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 设置多列浮动的布局

这里写图片描述

李-疯子

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
css布局属性（重点！！！）

QQ:275487025 QQ群：854312770 欢迎各种大牛指点，和小白一起学习。（重点）position定位属性： relative相对定位特点是：相对于游览最上边的左上角或者右上角来定位，但是**不会让出原位置**，除非浮动后，才会让出原位置；absolute绝对定位特点：这个有两种情况：情况1：看他是否有脱离文档流（浮动或相对定位）的父元素，有的话就以...
复制链接

扫一扫