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

Posted Candy1029

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web前端学习第十一天·fighting_使用CSS布局和定位相关的知识,希望对你有一定的参考价值。

元素布局

  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属性设置在要显示内容的标签上,而是在浮动对象后单独使用一个不显示内容的块级标签来清除浮动,代码的稳定性比较好。例如: 

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

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

示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>display元素的显示</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         div {
 9             border:1px solid red;
10             height:30px;
11         }
12         p {
13             border:1px solid red;
14         }
15     </style>
16 </head>
17 <body>
18     <div>
19         第一层
20     </div>
21     <div style="display:none;">
22         第二层
23     </div>
24     <div>
25         第三层
26     </div>
27     <ul>
28         <li>
29             <h3>display:block 行级标签显示为块级标签:要求让a标签宽高大一点,字体水平对齐垂直居中</h3>
30             <a href="#" style="background-color:pink;height:35px;line-height:35px;width:145px;text-align:center;display:block;">前端工程师</a>
31             <a href="#">谷歌</a>
32         </li>
33         <li>
34             <h3>display:inline-block 行级标签显示为内联块级标签:要求让a标签宽高大一点,字体水平对齐垂直居中,且让另一个a标签与它在同一行</h3>
35             <a href="#" style="background-color:pink;height:35px;line-height:35px;width:145px;text-align:center;display:inline-block;">前端工程师</a>
36             <a href="#">谷歌</a>
37         </li>
38         <li>
39             <h3>visibility 元素的可见性</h3>
40             <div style="visibility:visible;">
41                 可见
42             </div>
43             <div style="visibility:hidden;">
44                 不可见
45             </div>
46             <div>
47                 没有设置visibility属性的,上面是不可见的div
48             </div>
49         </li>
50         <li>
51             <h3>float:none 设置元素不浮动</h3>
52             <p>首页</p>
53             <p>服装</p>
54             <p>电器</p>
55             <p>食品</p>
56         </li>
57         <li>
58             <h3>float:left 设置元素左浮动</h3>
59             <p style="float:left;">首页</p>
60             <p style="float:left;">服装</p>
61             <p style="float:left;">电器</p>
62             <p style="float:left;">食品</p>
63         </li>
64         <li style="list-style:none;">
65             <br/>
66             <br />
67         </li>
68         <li>
69             <h3>float:left 设置元素右浮动</h3>
70             <p style="float:right;padding:5px 10px;">首页</p>
71             <p style="float:right;padding:5px 10px;">服装</p>
72             <p style="float:right;padding:5px 10px;">电器</p>
73             <p style="float:right;padding:5px 10px;">食品</p>
74         </li>
75     </ul>
76     <div style="clear:both;">
77         设置浮动后,下面的块级标签将不会再在单独的一行显示,需要设置clear属性清除元素浮动达到目的。一般来说float和clear会搭配使用。设置clear:both后,此div标签在单独的一行显示。
78     </div>
79 </body>
80 </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才可以。

示例代码如下:

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

运行结果:

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

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

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

    使用频率较高。

示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>OverflowDemo</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         div {
 9             border:1px solid red;
10         }
11     </style>
12 </head>
13 <body>
14     <ul>
15         <li>
16             <h3>不指定块级元素的高度,自动适应文本</h3>
17             <div style="width:130px;">我喜欢网页设计我喜欢网页设计我喜欢网页设计</div>
18         </li>
19         <li>
20             <h3>指定块级元素的高度,超出部分应该使用overflow来设置裁剪与否或如何显示</h3>
21             <div style="width:130px;height:26px;">我喜欢网页设计我喜欢网页设计我喜欢网页设计</div>
22         </li>
23         <li style="list-style:none;">
24             <br />
25         </li>
26         <li>
27             <h3>指定块级元素的高度,设置overflow:hidden隐藏超出的部分</h3>
28             <div style="width:130px;height:26px;overflow:hidden;">我喜欢网页设计我喜欢网页设计我喜欢网页设计</div>
29         </li>
30         <li>
31             <h3>指定块级元素的高度,设置overflow:scroll裁剪超出的部分,通过水平和垂直滚动条显示</h3>
32             <div style="width:130px;height:60px;overflow:scroll;">我喜欢网页设计aaaaaa我喜欢网页设计我喜欢网页设计</div>
33         </li>
34         <li>
35             <h3>指定块级元素的高度,设置overflow:auto在需要时剪切内容并添加垂直方向的滚动条</h3>
36             <div style="width:130px;height:60px;overflow:auto;">佳佳佳佳佳佳我喜欢网页设计我喜欢网页设计我喜欢网页设计</div>
37         </li>
38     </ul>
39 </body>
40 </html>

运行结果如下:

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

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

 

元素定位

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

  top、bottom、right  与left相似。

    使用频率较为常用。

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

示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>元素定位示例</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         body {
 9             margin:0px;
10             padding:0px;
11             background-color:gray;
12         }
13     </style>
14 </head>
15 <body>
16     <div style="width:400px;height:200px;background-color:pink;left:100px;position:absolute;">body的子元素div,使用left定位,一定要设置position属性为absolute或relative或fixed</div>
17 </body>
18 </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属性,否则有可能出现元素不显示的问题。

 

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

 

 

------------------------------------------------我来补笔记啦!---------------------------------------------------

fixed示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>对象的定位方式</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         body {
 9             margin:0px;
10             padding:0px;
11         }
12         #top {
13             background-color:orange;
14             height:68px;
15             position:fixed;
16             width:100%;
17             text-align:center;
18             line-height:68px;
19         Web前端学习第九天·fighting_使用CSS美化文字

Web前端学习第十二天·fighting_HTML页面设计技巧总结

Web前端学习第七天·fighting_CSS样式的编写和使用

Web前端学习第十三天·fighting_HTML页面设计技巧总结

Web前端学习第十四天·fighting_JavaScript概述

第一天打卡,fighting