一、（6）CSS布局与定位

 CSS布局与定位

一、布局（重点）

浮动 float

1.概念：

　　float是css样式中的定位属性，用于设置标签对象（如：<div>标签盒子、<p>标签、<li>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。浮动的框可以向左或向右移动，直到它的外边缘碰到父级盒子（父容器）或另一个浮动框（子元素）的边框为止。

　　只要设置了浮动，就将盒子脱离了文本流。由于浮动框不在文本流中，所以文本流中的其它元素，表现出就像浮动框不存在一样，自动上移，占有浮动框的位置。

2.浮动属性 float

作用： 该属性的值指出了对象是否及如何浮动。

语法： float :none| left|right

示例：

/*左浮动和右浮动*/
div { float:left; }
div { float:right; }

注：
　　只要设置了浮动，盒子将脱离普通文本流，下方的内容会自动上移。解决的办法是：使用clear属性清除浮动带来的效果。

浮动的实例

2.1 未浮动的效果

<!-- 源码如下：-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>float属性</title>
<style type="text/css">
html,body{background:#ff9;}
div{margin:10px;border:1px dashed #333;background:#90baff;padding:12px;}
p{border:1px dashed #333;background:#ff90ba;}
</style>
</head>
<body>
<div class="box1">Box-1</div>
<div class="box2">Box-2</div>
<div class="box3">Box-3</div>
<p>这里是浮动的外围文字，这里是浮动的外围文字，这里是浮动的外围文字，这里是浮动的外围文字</p>
</body>
</html>

技巧：

  • 1）添加一个空的DIV 设置成清除浮动。
  • 2）在大的DIV上使用 overflow属性 overflow:hidden 。

清除浮动

作用： 清除浮动造成的影响。

语法： clear :none| left|right| both

示例：

div { clear:left; } /* 清除左浮动 */
div { clear:both; } /* 清除左右浮动 */

清除浮动的3种方式（重点）

  • 1. Clear:both
  • 2. :after伪元素实现元素末尾添加一个看不见的块元素（Block）
  • 3. 使用父级中，使用overflow:hidden

超出 overflow

作用： 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

语法： overflow :visible(默认值) | auto  hidden(隐藏) | scroll(进度条)

示例：

 

div { 
overflow: hidden; /* 超出部分隐藏 */
overflow-y: scroll;/*y轴超出部分处理，出现滑动条*/
overflow-x: scroll;/*x轴超出部分处理*/
}

 

设置textarea对象为hidden值将隐藏其滚动条。

显示与隐藏 display

作用： 设置或检索对象是否及如何显示。

语法： display : block（以块元素显示标签）| none（隐藏）|inline（以行内元素显示标签）

示例：

a { display: block; } /* 以块的方式显示A标签 */
div { display: none; } /* 不显示DIV标签 */
div { display: inline; } /* 以行内元素的方式显示DIV标签 */

 

效果：

通常用于制作滑动门等多种网页特效。

练习：页面布局

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
    <style>
        header,nav,section,footer{
            margin:  10px auto;
            width: 1000px;
            box-sizing: border-box;
        }
        header,nav,section>*,footer{
            border: 2px solid #0000ff;
            background: #66ffff;
            text-align: center;
            line-height: 2em;
        }
        section{overflow: hidden;}
        header,footer{height: 100px;}
        section>*{height: 200px;}
        section>aside:first-child{
            float: left;
            width: 200px;
            margin-right: 10px;
        }
        section>aside:last-child{
            float: right;
            width: 200px;
        }
        section>main{
            float: left;
            width: 568px;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <nav>导航</nav>
    <section>
        <aside>左边栏</aside>
        <main>主体内容</main>
        <aside>右边栏</aside>
    </section>
    <footer>尾部</footer>
</body>
</html>

 

效果：

二、定位 position（掌握）

概念：

  • 1）广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。
  • 2）狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思。然而要使用CSS进行定位操作并不仅仅通过这个属性来实现。

定位 position

作用： 设置或检索对象的定位方式。

语法： position :static（默认）| absolute（绝对定位） | fixed（固定定位）| relative（相对定位）

示例：

a { position: absolute; } /* A标签设置成绝对定位 */
div { position: fixed; } /* DIV标签设置成固定定位 */
div { position: relative; } /* DIV标签设置成相对定位 */

absolute 和 fixed，将对象从文档流中拖出，配合left/right/top/bottom进行独立定位控制。

位置控制 left right top bottom

作用： 控制标签对象的位置。

语法：

  • left : auto|number
  • right: auto|number
  • top: auto|number
  • bottom: auto|number

示例：

div { position: absolute; left:100px; } 
div { position: absolute; right:100px; } 
div { position: absolute; top:100px; } 
div { position: absolute; bottom:100px; }

与 position搭配使用。

  • 1）相对定位relative：相对于原来的位置进行偏移，保留原来的位置。
  • 2）绝对定位absolute：彻底脱离文本流，不保留原有位置，随意在页面上定位。
  • 3）固定定位fixed：效果和绝对定位一样，但内容不会随页面滚动而滚动。

定位实例

3.1 相对定位

“相对定位”的定位原则：

  • 1）使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。
  • 2）使用相对定位的盒子仍在标准文本流中，它对父块和兄弟盒子没有任何影响。

3.2 绝对定位

3.2.1 设置绝对定位前的效果

4.2.2 将中间的div设置为绝对定位后的效果

4.2.3 设置偏移量后的效果

4.2.4 将父块设置为“包含块”后的效果

绝对定位注意事项：

  • 1）使用绝对定位的盒子以它的“最近”一个“ 非static的父元素。如果没有已经定位的父元素，那么会以浏览器窗口为基准进行定位。
  • 2）绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。
  • 3）关于“最近”，在一个节点的所有祖先节点中，找出所有“已经定位”的元素，其中距离该节点最近的一个节点，父亲比祖父近，祖父比曾祖父近，以此类推，“最近”的就是要找的定位基准。
  • 4）所谓“已经定位”元素的含义是，position属性被设置，并且被设置为不是static的任意一种方式，那么该元素就被定义为“已经定位”的元素。

层次 z-index

作用： 检索或设置对象的层叠顺序。

语法： z-index :auto| number

示例：

div { position: absolute; z-index:999; }

与 position搭配使用。只有当DIV定位方式设置成relative或 absolute 或 fixed时，该属性才起作用，层次值高的会遮住层次值低的对象。越大越在上面。

三、列表 list（了解）

列表标记位置

作用： 设置或检索作为对象的列表项标记如何根据文本排列。

语法： list-style-position :outside| inside

示例：

li { list-style-position: inside; }

列表标记符号

作用： 设置或检索对象的列表项所使用的预设标记。

语法： list-style-type :disc| circle| square| decimal| lower-roman| upper-roman| lower-alpha| upper-alpha| none| armenian| cjk-ideographic| georgian| lower-greek| hebrew| hiragana| hiragana-iroha| katakana| katakana-iroha| lower-latin| upper-latin

disc（实心圆）、circle（空心圆）、square（方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无项目符号）

示例：

Ul li { list-style-type: square; }

注： 实际应用中通常都不需要标记符号，而是使用图片实现效果

列表图片

作用：list-style-image 属性使用一幅图像来替换列表项的标记。

参数：

  • url() 图像的路径。
  • none 默认。无图形被显示。

示例：

Ul li { list-style-image: url(img/HBuilder.png);}

列表样式（重点）

作用： 设置列表项目相关内容的样式。

语法： list-style : list-style-image|list-style-position|list-style-type

示例：

Ul li { list-style:outside , square; }

注： 实际应用中通常都不需要标记符号，而是使用图片实现效果。

四、其它（了解）

表格边框合并 table

作用： border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

语法： border-collapse :separate| collapse

参数：

  • separate默认。边框会被分开。
  • collapse如果可能，边框会被合并为一个单一的边框。
<style type="text/css">
table{
    border-collapse:collapse;}
td{
    border:solid 1px #333333;}
</style>

示例：

<style type="text/css">
table{
    border-collapse:collapse;}
td{
    border:solid 1px #333333;}
</style>
<table width="360" border="1" cellspacing="0" cellpadding="2">
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>

注： 常用于让表格生成细边框线条，必须与 td的边框搭配。

鼠标形状 cursor

作用： 设置或检索当鼠标滑过样式控制的对象时改变鼠标形状。

语法： cursor: hand | pointer | auto| crosshair| default|move| help| wait| text| w-resize|s-resize| n-resize|e-resize| ne-resize|sw-resize| se-resize| nw-resize| url (url)

hand（手型，IE8及以下，新版浏览器要使用pointer表示点击的手型）、crosshair（“十”型）、text （“I”型）、wait（等待）、default（默认）、help（帮助）、e-resize（东箭头）、ne-resize（东北箭头）、n-resize（北箭头）、nw-resize（西北箭头）、w-resize（西箭头）、sw-resize（西南箭头）、s-resize（南箭头）、se-resize（东南箭头）和auto（自动）

示例：

div { cursor:pointer; }

注： 常在非超链接的对象上设置成手型，配合JavaScript效果，让用户认为是可以点击的模块。

posted @ 2020-12-15 15:30  全村的希望、  阅读(232)  评论(0)  编辑  收藏  举报