您的位置：首页 > Web前端 > CSS

前端之CSS（二）

2016-07-03 10:51 232 查看

一、盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: #bebebe;
float: left;
}
.div2{
width: 100px;
height: 100px;
background-color: bisque;
float: left;
}
.clean{
clear: both;
}
</style>

</head>
<body>
<div class="div1">
Hello
</div>

<div class="div2">
World
</div>
<p class="clean">
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像
</p>
</body>
</html>

清除浮动

三、盒子定位记（position）

定位的基本思想就是允许我们定义的元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

position是css定位机制中的一种，css有三种基本的定位机制：普通流、浮动（float）和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在（X)HTML中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来的。

行内框在一行中水平布置。可以使用水平内边距、外框和外边距调整它们的间距，but，垂直内边距、边框和外边距不影响行内框的高度。

由一行形成的水平框称为行框（line box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

position的属性值：

1、static

默认static，元素框正常生成，无特殊定位，对象遵循正常文档流。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

2、relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

<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>

相对定位

3、absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

<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>
绝对定位的层叠通过z-index属性定义，z-index值越大，优先级越高。

4、fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

<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>

固定定位

四、后序之小插曲（武sir爱的补充...）

1、页面布局
这个就是抽屉网页的设计作业咯！
2、line-height:行高
在div中height=line-height时，文本内容就居中了。

3、width：980px;
margin:0 auto;
创建一个居中的块

4、inline把块级标签变成内联标签，内联标签的宽度高度就没用了
block把内联标签变成块标签
inline-block，把块级标签变成内联标签，且使高度和宽度有用

5、background-position移动背景图片
background：url（//www.jd.....) 0 -58px no-repeat
background-position:0 -58px

6、z-index：图层优先级的，值越大优先级越高

7、overflow

应用场景，有这么一种情况，在一个div内有很多的的内容，如果div的框体不是很大超出去了怎么办？

这个时候只需要加一句代码：

<div style="overflow:hidden;>

效果就是在div块级标签内有个滚动条，hidden超出div区域的将自动隐藏

8、透明度：transparency透明度，opacity不透明的

<div style="background-color:blue;height:100px;padding-top:30px"><!--这里设置内部的div的透明度--><div style="opacity: 0.5;background-color:pink;height:30px;margin-left: 30px;margin-right:30px;"></div></div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航