css布局属性(重点!!!)
程序员文章站
2024-02-21 12:16:22
...
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 设置多列浮动的布局