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 <!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>
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.定位布局
结合偏移属性调整元素的显示位置
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>
二、背景属性
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布局方式及背景文本属性的主要内容，如果未能解决你的问题，请参考以下文章