css布局方式及背景文本属性

Posted maplethefox

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css布局方式及背景文本属性相关的知识,希望对你有一定的参考价值。

一、布局方式

1.标准流/静态流

   默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示

2.浮动布局

   主要用于设置块元素的水平排列

  1)属性:float

  2)取值: 可取left或right,设置元素向左浮动或向右浮动.   示例:float:left/right;

  3)特点:

  • 元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位
  • 元素设置浮动,就具有块元素的特征,可以手动调整宽高
  • "文字环绕":浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示

  4)常见问题: 子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局

  5)解决:

  • 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
  • 在父元素的末尾添加空的块元素。设置clear:both;清除浮动
  • 为父元素设置overflow:hidden;解决高度为0
技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #box
 8             width:500px;
 9             height:500px;
10             margin:0 auto;
11             background:orange;
12 
13 
14         
15         #d1,#d2,#d3
16             width:200px;
17             height:200px;
18         
19         #d1
20 
21             background:red;
22             float:right;
23 
24         
25         #d2
26             height:300px;
27             background:green;
28             float:right;
29         
30         #d3
31             background:blue;
32             float:right;
33         
34         span
35             float:right;
36             width:200px;
37             height:200px;
38             background:pink;
39             <!--clear:both;-->
40 
41         
42     </style>
43 </head>
44 <body>
45     <div id="box">box
46         <div id="d1">d1</div>
47         <div id="d2">d2</div>
48         <div id="d3">d3</div>
49         <span>span1</span>
50 
51     </div>
52     <!--脱离文档流的元素在文档中不在站位,可以手动调宽高-->
53     <span>span2</span>
54 </body>
55 </html>
浮动布局演示1

 

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div
 8             width:200px;
 9             height:200px;
10             background:red;
11             float:left;
12             margin-right:30px;
13         
14         h1
15             background:green;
16 
17         
18         input
19         /*正常元素在文档流中找位置,浮动元素在上层中找位置*/
20             float:left;
21         
22     </style>
23 </head>
24 <body>
25     <div></div>
26     <span>行内元素</span>
27     <input type="text">
28     <h1>浮动元素只能遮挡元素的位置,但是不影响内容显示</h1>
29 </body>
30 </html>
浮动布局演示2

 

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #nav
 8             width:900px;
 9             height:24px;
10             background:gray;
11         
12         .left
13             width:300px;
14             float:left;
15             background:green;
16         
17         .right
18             float:right;
19             background:red;
20             width:300px;
21         
22         ul
23             margin:0;
24             passing:0;
25             /*去掉列表符号*/
26             list-style:none;
27         
28         li
29             float:left;
30             margin-right:50px;
31         
32         #main
33             margin-top:50px;
34             width:900px;
35             /*解决子元素全部浮动造成父元素告诉为0的问题*/
36             /*解决方法1:height:400px;*/
37             /*解决方法2:overflow:hidden;*/
38             overflow:hidden;
39             background:pink;
40         
41         .item1
42             width:580px;
43             height:400px;
44             background:gray;
45             float:left;
46         
47         .item2,.item3
48             width:300px;
49             height:190px;
50             background:gray;
51             float:right;
52         
53         .item2
54             margin-bottom:20px;
55         
56         #i1,#i2
57             width:200px;
58             height:200px;
59             background:red;
60         
61         #i1
62             background:green;
63             float:left;
64         
65         #i2
66             /*使文档中正常元素不受前面浮动元素影响*/
67             /*clear:left/right/both*/
68             clear:left;
69         
70         .clear
71             clear:both;
72         
73     </style>
74 </head>
75 <body>
76     <div id="nav">
77         <div class="left">
78             <ul>
79                 <li id="d1">首页</li>
80                 <li id="d2">物流</li>
81                 <li id="d3">客户</li>
82             </ul>
83         </div>
84         <div class="right">右侧导航</div>
85     </div>
86     <div id="main">
87         <div class="item1">1</div>
88         <div class="item2">2</div>
89         <div class="item3">3</div>
90         <div class="clear">1</div>
91     </div>
92     <div>
93         联系我们
94         <div id="i1">1</div>
95         <div id="i2">2</div>
96     </div>
97 </body>
98 </html>
浮动布局演示3

3.定位布局

   结合偏移属性调整元素的显示位置

  1)属性: position

  2)取值: 可取relative(相对定位)/absolute(绝对定位)/fixed(固定定位)  示例:postion:relative/absolute/fixed

  3)偏移属性:设置定位的元素可以使用偏移属性调整距离参照物的位置

  top          距参照物的顶部
  right      距参照物的右侧
  bottom    距参照物的底部
  left        距参照物的左侧

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #banner
 8             width:300px;
 9             height:250px;
10             /*相对定位*/
11             position:relative;
12         
13         #d1
14             color:#fff;
15             /*绝对定位*/
16             position:absolute;
17             height:30px;
18             right:0px;
19             /*根据参照物对应方向的值计算偏移量(250*50%)*/
20             top:50%;
21             margin-top:-15px;
22         
23         #d2
24             color:#fff;
25             /*绝对定位*/
26             position:absolute;
27             height:30px;
28             /*根据参照物对应方向的值计算偏移量(250*50%)*/
29             top:50%;
30             margin-top:-15px;
31         
32         #fixed_
33             position:absolute;
34             width:150px;
35             top:230px;
36             color:#fff;
37         
38     </style>
39 </head>
40 <body>
41     <div id="banner">
42         <img src="northStar.jpg" class="c1" alt="">
43         <a href="" id="d1">下一张</a>
44         <img src="timg.gif" class="c2" alt="">
45         <a href="" id="d2">上一张</a>
46     </div>
47     <div id="fixed_">
48         固定定位
49     </div>
50 </body>
51 </html>
固定定位演示

  4)分类

  relative 相对定位(原来的位置占位)

元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #d1,#d2
 8             width:200px;
 9             height:200px;
10             background:red;
11             margin:0 auto;
12         
13         #d1
14             background:green;
15             /*相对定位,已定位的元素可以设置偏移属性,调整元素的显示位置*/
16             position:relative;
17             /*
18             top:100px;
19             left:-100px;
20             */
21             bottom:-100px;
22             right:100px;
23         
24     </style>
25 </head>
26 <body>
27     <div id="d1"></div>
28     <div id="d2"></div>
29 </body>
30 </html>
相对定位演示

  absolute 绝对定位(原来的位置不占位)

    1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
    2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高 使用绝对定位 :

  "父相子绝" : 父元素设置相对定位,子元素绝对定位,参照已定位的父元素偏移.

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #box
 8             width:500px;
 9             margin:0 auto;
10             background:orange;
11             position:relative;
12         
13         #d1,#d2
14             width:200px;
15             height:200px;
16             background:red;
17 
18         
19         #d1
20             background:green;
21             /*绝对定位*/
22             position:absolute;
23             top:0;
24             left:0;
25 
26         
27         body
28             /*设置为定位元素*/
29             position:relative;
30 
31         
32     </style>
33 </head>
34 
35 <body>
36     <div id="box">
37         <div id="d1"></div>
38         <div id="d2"></div>
39     </div>
40 </body>
41 </html>
绝对定位演示

  fixed 固定定位(不占位) 

      1. 参照窗口进行定位,不跟随网页滚动而滚动
      2. 脱离文档流

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #main
 8             height:1500px;
 9             background:pink;
10         
11         #chat
12             width:300px;
13             height:300px;
14             background:orange;
15             /*固定定位:脱离文档流,参照窗口偏移;
16             不跟随页面滚动而滚动*/
17             position:fixed;
18             right:0;
19             bottom:0;
20         
21     </style>
22 </head>
23 <body>
24     <div id="main"></div>
25     <div id="chat">千年传奇,值得你拥有,快注册吧,注册就送屠龙刀。</div>
26 </body>
27 </html>
固定定位演示

  5)堆叠次序

  元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置,值越大元素越靠上:
  属性 : z-index
  取值 : 无单位的数值,数值越大,越靠上
  堆叠:
    1. 定位元素与文档中正常元素发生堆叠,永远是已定位元素在上
    2. 同为已定位元素发生堆叠,按照 HTML 代码的书写顺序,后来者居上

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div
 8             width:200px;
 9             height:200px;
10             background:red;
11         
12         #d1
13             background:green;
14             position:relative;
15             /*只有定位元素才能使用偏移属性调位置*/
16             /*
17             position:relative;
18             top:100px;
19             left:100px;
20             */
21             z-index:1
22         
23         #d2
24             /*永远定位元素在上*/
25             position:relative;
26             left:100px;
27             bottom:-100px;
28 
29         
30         #d2:hover
31             /*调整堆叠次序,属性:z-index
32             取值为无单位的整数,值越大越靠上
33             只有定位元素能够使用z-index属性调整次序*/
34             z-index:2;
35         
36 
37     </style>
38 </head>
39 <body>
40     <!--正常元素与定位元素发生堆叠,永远定位元素在上方显示-->
41     <!--同为定位元素发生堆叠,根据标签的书写顺序,后来者居上-->
42     <div id="d2"></div>
43     <div id="d1"></div>
44     <h1>
45         实现网页:
46         上方为导航栏(包含若干导航项,包含下拉菜单)
47         下方为轮播图区域(包含图片,图片索引,左右按钮)
48     </h1>
49 </body>
50 </html>
z-index示例

二、背景属性

1.背景颜色

  background-color: red;

2.背景图片相关

  1)设置背景图片:background-image : url("路径");

    设置背景图片,指定图片路径,如果路径中出现中文或空格,需要加引号

  2)设置背景图片的重复方式

     默认背景图片从元素的左上角显示,如果图片尺寸与元素尺寸不匹配时,会出现以下情况:

      1. 如果元素尺寸大于图片尺寸,会自动重复平铺,直至铺满整个元素

      2. 如果元素尺寸小于图片尺寸,图片默认从元素左上角开始显示,超出部分不可见

    取值 :

      • repeat  默认值,沿水平和垂直方向重复平铺
      • repeat-x 沿X轴重复平铺
      • repeat-y 沿Y轴重复平铺
      • no-repeat 不重复平铺

      background-repeat:repeat/repeat-x/repeat-y/no-repeat

  3)设置背景图片的显示位置:默认显示在元素左上角  background-position:x y;

  取值方式:

    1. 像素值:设置背景图片的在元素坐标系中的起点坐标

    2. 方位值

    • 水平 :left/center/right
    • 垂直 :top/center/bottom

      注:如果只设置某一个方向的方位值,另外一个方向默认为center

    3. 百分比:类似于方位值,根据百分比计算背景图片的显示坐标。

  计算方式:

    横坐标 = (元素宽度 - 背景图片宽度)* x%

    纵坐标 = (元素高度 - 背景图片高度) * y %

  特殊值:

    0% 0%     左上角

    100% 100% 右下

    50% 50%   居中显示  

  精灵图技术 :为了减少网络请求,可以将所有的小图标拼接在一张图片上,一次网络请求全部得到;借助于background-position进行背景图片位置的调整,实现显示不同的图标

  4)设置背景图片的尺寸:background-size:width height;

     取值方式 :

    1. 像素值

      1. 500px 500px; 同时指定宽高

      2. 500px;  指定宽度,高度自适应

    2. 百分比:百分比参照元素的尺寸进行计算

      1. 50% 50%; 根据元素宽高,分别计算图片的宽高

      2. 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放

3.背景属性简写:background:color url("") repeat position;

 注意 :

  1. 如果需要同时设置以上属性值,遵照相应顺序书写

  2. background-size 单独设置

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div,h1
 8             width:100px;
 9             height:100px;
10             margin:200px auto;
11             background-color:pink;
12             background-image:url(northStar.jpg);
13 
14             /*y轴重复*/
15             background-repeat:repeat-y;
16             /*x轴重复*/
17             background-repeat:repeat-x;
18             /*不重复*/
19             background-repeat:no-repeat;
20             /*background-position:-100px -100px;*/
21             background-position:100% 100%;
22         
23         div:hover
24             background-position:-160px -40px;
25         
26         h1
27             width:500px;
28             height:500px;
29             margin:0 auto;
30             /*
31             background-size特殊取值:
32             cover:覆盖 将图片等比拉伸至足够大,完全覆盖元素,超出部分不可见(最小的边距和元素块一样大)
33             contain:包含 将图片等比拉伸至刚好被元素容纳(最大的边距不超过元素块)
34             */
35             background-size:cover;
36         
37         h2
38             width:500px;
39             height:500px;
40             background:cyan url(northStar.jpg) no-repeat center;
41             font: 400 36px "宋体";
42         
43     </style>
44 </head>
45 <body>
46     <h2>字体样式展示</h2>
47     <h1></h1>
48     <div></div>
49 </body>
50 </html>
背景属性演示

三、文本属性

1.字体相关

  1)设置字体大小:font-size:20px;

  2)设置字体粗细程度

    取值 :

    • normal(默认值)等价于400
    • bold   (加粗) 等价于700

  3)设置斜体:font-style:italic;

  4)设置字体名称:font-family:Arial,"黑体"; 

     取值 :
      1. 可以指定多个字体名称作为备选字体,使用逗号隔开
      2. 如果字体名称为中文,或者名称中出现了空格,必须使用引号
      例 : font-family:Arial;
          font-family:"黑体","Microsoft YaHei",Arial;

  5)字体属性简写:font : style weight size family;

注意 :
    1. 如果四个属性值都必须设置,严格按照顺序书写
    2. size family 是必填项

2.文本样式

  1)文本颜色:color:red;

  2)文本装饰线:text-decoration:none;

  取值 :

    • underline         下划线
    • overline            上划线
    • line-through      删除线
    • none                 取消装饰线

  3)文本内容的水平对齐方式:text-align:center;

  取值 : 

    • left(默认值)    左对齐
    • center           居中对齐
    • right              右对齐
    • justify            两端对齐

  4)行高:line-height:30px;

    使用 :文本在当前行中永远垂直居中,可以借助行高调整文本在元素中的垂直显示位置

    • line-height = height 设置一行文本在元素中垂直居中
    • line-height > height 文本下移显示
    • line-height < height 文本靠上显示

       特殊 :line-height可以采用无单位的数值,代表当前字体大小的倍数,以此计算行高

  5)font属性简写2:font : size/line-height family;

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p
 8             font-size:32px;
 9             font-weight:bold;
10             /*font-style:italic;*/
11             font-family:"宋体","黑体";
12             color:blue;
13             text-decoration:none;
14             width:200px;
15             background:orange;
16             height:200px;
17             /*居中*/
18             text-align:justify;
19             /*和文本高度一样(居中效果)*/
20             /*根据字体大小计算行高*/
21             line-height:2;
22         
23         span
24                                 /*行高*/
25             font:italic 700 32px/2 "黑体";
26             background:red;
27 
28         
29     </style>
30 </head>
31 <body>
32     <h1>python</h1>
33     <p>hello python hello python hello python hello python hello python hello python</p>
34     <span>人生苦短</span>
35 </body>
36 </html>
文本属性演示

 

以上是关于css布局方式及背景文本属性的主要内容,如果未能解决你的问题,请参考以下文章

CSS布局属性

页面布局

css基础 CSS 布局 – OverflowFloat 浮动CSS 布局 – 水平 垂直居中对齐

CSS常用布局之——等分等高解决方案

CSS基础

css常见布局解决方案及教程