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

Web前端学习第十一天·fighting_使用CSS布局和定位（一）

2016-05-26 21:26 1046 查看
[b]元素布局[/b]

　　display 设置对象是否及如何显示。IE7以下的浏览器不支持table相关的参数值。

　　　　红色颜色显示的属性值为常用的值。

　　　　语法：display：none（隐藏对象，与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间） | inline（指定元素为内联元素） | block（指定元素为块级元素） | list-item | inline-block（指定元素为内联块级元素） | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | compact | run-in | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box

　　　　使用频率较高。

　　　　block块级元素，宽高可以自己定义，并且独占一行。用在行级元素转换为块级元素的情况中，例如要把<a>标签设置宽高的情况。如果不设置display:block的话，a标签仍然是一个行级标签，只能根据内容改变它的大小，不能满足要求。

　　　　如果想让几个块级（或行级）标签处在同一行，只要设置它们的display:inline-block即可。

　　visibility 设置是否显示对象。与display属性不同，此属性为隐藏的对象保留其占有的物理空间。

　　　　语法：visibility：visible（可视） | hidden（隐藏） | collapse（主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象等同于hidden。表格布局基本不使用，都是使用CSS+DIV。）

　　　　注意：如果希望对象是可见的，那么其父容器也必须是可见的。

　　　　这个属性没有继承性。

　　　　使用频率不高。

　　float 设置元素是否及如何浮动。通过浮动可以将块级元素显示在同一行。

　　　　使用频率非常高（使用float：left较多）。

　　　　语法：float：none | left（浮动在左边） | right（浮动在右边）

　　　　当该属性不为none引起对象浮动的时候，对象被看成是块级元素（即display：block），浮动对象的display属性将被忽略。

　　　　注意：该属性还与元素的position属性有关，它可以用在不适用绝对定位的任何元素上。而且浮动会根据父容器的空间来浮动，当父容器宽度不够时会在下面另外的一行浮动显示。适用于手机网页的显示，横屏竖屏不同的效果。设置浮动后，下面的块级标签将不会再在单独的一行显示，需要设置clear属性清除元素浮动达到目的。一般来说float和clear会搭配使用。

　　clear 指出不允许有浮动的边。

　　　　语法：clear：none（允许两边都可以有浮动对象，默认值） | left（不允许左边有浮动对象） | right（不允许右边有浮动对象） | both （不允许有浮动对象）

　　　　使用频率很高。

　　　　注意：通常在使用时不会把clear属性设置在要显示内容的标签上，而是在浮动对象后单独使用一个不显示内容的块级标签来清除浮动，代码的稳定性比较好。例如：　

<ul>
<h3>float：left 设置元素右浮动</h3>
<p style="float:right;padding:5px 10px;">首页</p>
<p style="float:right;padding:5px 10px;">服装</p>
<p style="float:right;padding:5px 10px;">电器</p>
<p style="float:right;padding:5px 10px;">食品</p>
</ul>
<div style="clear:both;"></div>
<div>这里是一个div</div>


　　　　注意：子元素设置浮动后父元素的高度不再根据子元素的内容自动调整，而是变为0，因此出现在下面的块级标签将不会另外单独显示在一行，而是与浮动的子元素显示在一行了。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>display元素的显示</title>
<meta charset="utf-8" />
<style type="text/css">
div {
border:1px solid red;
height:30px;
}
p {
border:1px solid red;
}
</style>
</head>
<body>
<div>
第一层
</div>
<div style="display:none;">
第二层
</div>
<div>
第三层
</div>
<ul>
<li>
<h3>display：block 行级标签显示为块级标签：要求让a标签宽高大一点，字体水平对齐垂直居中</h3>
<a href="#" style="background-color:pink;height:35px;line-height:35px;width:145px;text-align:center;display:block;">前端工程师</a>
<a href="#">谷歌</a>
</li>
<li>
<h3>display:inline-block 行级标签显示为内联块级标签：要求让a标签宽高大一点，字体水平对齐垂直居中，且让另一个a标签与它在同一行</h3>
<a href="#" style="background-color:pink;height:35px;line-height:35px;width:145px;text-align:center;display:inline-block;">前端工程师</a>
<a href="#">谷歌</a>
</li>
<li>
<h3>visibility 元素的可见性</h3>
<div style="visibility:visible;">
可见
</div>
<div style="visibility:hidden;">
不可见
</div>
<div>
没有设置visibility属性的，上面是不可见的div
</div>
</li>
<li>
<h3>float：none 设置元素不浮动</h3>
<p>首页</p>
<p>服装</p>
<p>电器</p>
<p>食品</p>
</li>
<li>
<h3>float：left 设置元素左浮动</h3>
<p style="float:left;">首页</p>
<p style="float:left;">服装</p>
<p style="float:left;">电器</p>
<p style="float:left;">食品</p>
</li>
<li style="list-style:none;">
<br/>
<br />
</li>
<li>
<h3>float：left 设置元素右浮动</h3>
<p style="float:right;padding:5px 10px;">首页</p>
<p style="float:right;padding:5px 10px;">服装</p>
<p style="float:right;padding:5px 10px;">电器</p>
<p style="float:right;padding:5px 10px;">食品</p>
</li>
</ul>
<div style="clear:both;">
设置浮动后，下面的块级标签将不会再在单独的一行显示，需要设置clear属性清除元素浮动达到目的。一般来说float和clear会搭配使用。设置clear：both后，此div标签在单独的一行显示。
</div>
</body>
</html>


运行结果如下图所示：





　　clip 设置对象的可视区域，区域外的部分是透明的。

　　　　几乎不使用。

　　　　语法：clip：auto（默认值，对象无剪切） | rect(<number>|auto <number>|auto <number>|auto <number>|auto)。

　　　　其中rect(<number>|auto <number>|auto <number>|auto <number>|auto)：依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。例如：rect（auto 50px 20px auto）表示的是上边不剪切，右边从第50个像素开始剪切到最右边，下边从第20个元素开始剪切直到最底部，左边不剪切。　

　　　　注意：如果要使用这个属性，则必须设置position：absolute才可以。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>clip元素剪切，设置元素的可视区域</title>
<meta charset="utf-8" />
</head>
<body>
<div style="background-color:pink;border:1px solid red;width:300px;height:400px;clip:rect(3px,70px,20px,1px);position:absolute;">
Web前端开发
</div>
</body>
</html>


运行结果：



　　overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容，一般是要显示的，不显示时需要设置此属性的属性值。

　　　　语法：overflow：<overflow-style>{1,2}

　　　　其中：<overflow-style> = visible（默认，可见的） | hidden（隐藏） | scroll（将超出对象尺寸的内容进行裁剪，并以水平和竖直的滚动条的方式显示超出的内容） | auto（在需要时剪切内容并添加竖直滚动条，此为body对象和textarea的默认值。）

　　　　使用频率较高。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>OverflowDemo</title>
<meta charset="utf-8" />
<style type="text/css">
div {
border:1px solid red;
}
</style>
</head>
<body>
<ul>
<li>
<h3>不指定块级元素的高度，自动适应文本</h3>
<div style="width:130px;">我喜欢网页设计我喜欢网页设计我喜欢网页设计</div>
</li>
<li>
<h3>指定块级元素的高度，超出部分应该使用overflow来设置裁剪与否或如何显示</h3>
<div style="width:130px;height:26px;">我喜欢网页设计我喜欢网页设计我喜欢网页设计</div>
</li>
<li style="list-style:none;">
<br />
</li>
<li>
<h3>指定块级元素的高度，设置overflow：hidden隐藏超出的部分</h3>
<div style="width:130px;height:26px;overflow:hidden;">我喜欢网页设计我喜欢网页设计我喜欢网页设计</div>
</li>
<li>
<h3>指定块级元素的高度，设置overflow：scroll裁剪超出的部分，通过水平和垂直滚动条显示</h3>
<div style="width:130px;height:60px;overflow:scroll;">我喜欢网页设计aaaaaa我喜欢网页设计我喜欢网页设计</div>
</li>
<li>
<h3>指定块级元素的高度，设置overflow：auto在需要时剪切内容并添加垂直方向的滚动条</h3>
<div style="width:130px;height:60px;overflow:auto;">佳佳佳佳佳佳我喜欢网页设计我喜欢网页设计我喜欢网页设计</div>
</li>
</ul>
</body>
</html>


运行结果如下：



　　overflow-x 设置对象的内容超过其指定宽度时如何显示内容。

　　overflow-y 设置对象的内容超过其指定高度时如何显示内容。

[b]元素定位[/b]

　　left 设置对象与其最近一个定位的父对象左边相关的位置，必须定义position：absolute、relative或fixed，这个属性才能生效。

　　top、bottom、right 与left相似。

　　　　使用频率较为常用。

　　　　语法：left: <length>（用长度值来定义距离左边的偏移量，可以为负值） | <percentage>（用父容器宽度的百分比来定义距离左边的偏移量，可以为负值） | auto（默认的，表示没有特殊定位）

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>元素定位示例</title>
<meta charset="utf-8" />
<style type="text/css">
body {
margin:0px;
padding:0px;
background-color:gray;
}
</style>
</head>
<body>
<div style="width:400px;height:200px;background-color:pink;left:100px;position:absolute;">body的子元素div，使用left定位，一定要设置position属性为absolute或relative或fixed</div>
</body>
</html>


运行结果为：



　　　　像这种定位使用频率非常高。可以用来设置漂浮广告，即通过绝对定位和js的控制来设置。

　　　　注意：当left和right一起使用时，最终起作用的left；当top和bottom一起使用时，最终起作用的是top。

　　position 设置对象的定位方式。

　　　　语法：position：static（默认，无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。） | relative（对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。） | absolute（对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。） | fixed（对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象会随着滚动，相对屏幕而言是固定的。）
　　　　使用频率非常高，使用absolute的地方比较多。

　　　　fixed用来固定某一对象（如京东的右边栏和新浪的顶部不会随滚动条滚动）。注意：在使用position：fixed时，必须制定元素的width属性，否则有可能出现元素不显示的问题。

[b]

[/b]

[b]有点晚啦，要早点回宿舍给爸爸妈妈拨视频电话，position这么重要还是明天补上笔记吧~O(∩_∩)O~[/b]

[b]------------------------------------------------我来补笔记啦！---------------------------------------------------[/b]

fixed示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>对象的定位方式</title>
<meta charset="utf-8" />
<style type="text/css">
body {
margin:0px;
padding:0px;
}
#top {
background-color:orange;
height:68px;
position:fixed;
width:100%;
text-align:center;
line-height:68px;
}
#left {
position:absolute;
left:0;
height:1000px;
background-color:gray;
width:48px;
}
</style>
</head>
<body>
<div id="top">
<b>这里使用position：fixed，当出现滚动条时，这里随滚动条滚动，相对于屏幕而言位置是固定的，永远在顶部</b>
</div>
<div id="left"></div>
</body>
</html>


运行结果如下：（注意看滚动条的位置已经滚到页面的底部了）



Position定位-情景一（外部层的布局模式是static，内部层一个是absolute，另一个是relative），示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Position定位-情景一</title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color:green;
}
#outer {
border:1px solid blue;
margin:0 auto;
width:350px;
height:300px;
background-color:pink;
position:static;
}
#inner-1 {
position:absolute;
left:10px;
top:20px;
width:150px;
height:100px;
background-color:yellow;
}
#inner-2 {
position:relative;
left:10px;
top:20px;
width:150px;
height:100px;
background-color:gray;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner-1">
inner-1 position:absolute
</div>
<div id="inner-2">
inner-2 position:relative
</div>
</div>
</body>
</html>


运行结果如下：



　　当外部层布局模式是static时，内部层使用absolute定位的话是相对于body布局的（根据top和left的值），内部层使用relative定位的话是以父容器为基准来定位的。

Position定位-情景二（外部层的布局模式不是static（最常用的是使用relative，而不使用absolute，因为absolute会改变此外部元素的显示位置），内部层一个是absolute，另一个是relative），示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Position定位-情景二</title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color: green;
}

#outer {
border: 1px solid blue;
margin: 0 auto;
width: 350px;
height: 300px;
background-color: pink;
position: relative;
}

#inner-1 {
position: absolute;
left: 10px;
top: 20px;
width: 170px;
height: 100px;
background-color: yellow;
}

#inner-2 {
position: relative;
left: 10px;
top: 20px;
width: 150px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner-1">
inner-1 position:absolute
</div>
<div id="inner-2">
inner-2 position:relative
</div>
</div>
</body>
</html>


运行结果如下：



　　当外部层布局模式不是static时，内部层使用absolute定位和使用relative定位都是以父容器为基准来定位的。

Position定位-情景三（在情景二的基础上不使用left和top定位，使用right和bottom定位的话发现结果不在如上图所示），示例代码如下：

结论：内部元素的relative模式对right和bottom不起作用，absolute模式对right和bottom有效

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Position定位-情景三</title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color: green;
}

#outer {
border: 1px solid blue;
margin: 0 auto;
width: 350px;
height: 300px;
background-color: pink;
position: relative;
}

#inner-1 {
position: absolute;
right: 0px;
bottom: 0px;
width: 170px;
height: 100px;
background-color: yellow;
}

#inner-2 {
position: relative;
right: 0px;
bottom: 0px;
width: 150px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner-1">
inner-1 position:absolute
</div>
<div id="inner-2">
inner-2 position:relative
</div>
</div>
</body>
</html>


运行结果如下：



[b]　　position定位结论：子元素精确定位时使用absolute定位方式，它的父元素使用relative定位方式（使用absolute方式可能会使此父元素的位置发生改变）。[/b]

　　　

　　z-index 设置对象的层叠顺序。必须定义position：absolute/relative/fixed才可以生效。

　　使用频率很常用。

　　语法：z-index: auto（遵从父对象的定位） | <integer>（用整数值来定义堆叠级别。可以为负值。值越大越在上面。）

　　使用场景：如下拉出来浮动的层设置层叠顺序较高才能正常显示。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>z-index属性设置对象的层叠顺序</title>
<meta charset="utf-8" />
<style type="text/css">
div {
position:absolute;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div style="background-color:black;z-index:10">

</div>
<div style="background:orange;width:300px;height:300px;left:20px;top:20px;z-index:0;">

</div>
</body>
</html>


运行结果如下：

不适用z-index时：



使用z-index时：



　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航