当前位置 : 主页 > 网页制作 > HTTP/TCP >

【CSS属性#2】 -- 2019-08-17 05:21:34

来源:互联网 收集:自由互联 发布时间:2021-06-16
原文: http://blog.gqylpy.com/gqy/256 " 目录 一、盒子模型 二、外边距 margin 三、内填充 padding 四、浮动 float 五、清除浮动 clear 六、溢出 overflow 七、定位 position 1.无定位 static 2. 相对定位 rel

原文: http://blog.gqylpy.com/gqy/256

"


目录

一、盒子模型

二、外边距 margin

三、内填充 padding

四、浮动 float

五、清除浮动 clear

六、溢出 overflow

七、定位 position

1. 无定位 static

2. 相对定位 relative

3. 绝对定位 absolute

4. 固定 fixed

八、 层叠顺序 z-index

九、透明度 opacit


一、盒子模型

  • margin:用于控制元素与元素之间的距离;最基本的用途就是控制元素周围空间的间隔,从视觉上达到相互隔开的目的
  • padding:用于控制内容与边距之间的距离
  • Border:边框,围绕在内边距和内容外的边框
  • Content:盒子的内容,显示文本和图像

![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/3820234e-236e-4ff2-af57-94cab2575a05.png)


二、外边距 margin

属性 描述 margin-top 上方外边距 margin-right 右方外边距 margin-bottom 下方外边距 margin-left 左方外边距

简写:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/a92c753d-e79f-44ff-b074-f21181e9f02f.png)

常见居中:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/c6ebc81d-6b6c-4807-be4e-6e1fef1d980e.png)

  
  
  
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="content-Type" charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
  7. <title>margin 外边距 </title>
  8. <style>
  9. #tag1 {
  10. /**/
  11. background-color: black;
  12. color: white;
  13. /**/
  14. margin-top: 20px; /*上*/
  15. margin-right: 49%; /*右*/
  16. margin-bottom: 100px; /*下*/
  17. margin-left: 48%; /*左*/
  18. }
  19. #tag2 {
  20. margin: 0 40% 0 40%; /*简写,顺序:上右下左(逆时针)*/
  21. }
  22. p {
  23. margin: 0 auto; /*居中*/
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div>
  29. <p id="tag1">取腰间明珠弹山雀 </p>
  30. <p id="tag2">立枇杷于庭前 </p>
  31. <p>入巷间吃 汤面 </p>
  32. </div>
  33. </body>
  34. </html>

三、内填充 padding

属性 描述 padding-top 上方内填充 padding-right 右方内填充 padding-bottom 下方内填充 padding-left 左方内填充

简写:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/1c2cd6bd-f207-446f-b438-602694823c20.png) ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/b6b77b39-e7aa-4cb5-a463-8016f273f04f.png) ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/bb7e7e18-7a3e-4add-9758-8dc2a0cfd157.png)![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/0050ee4a-0e12-4703-aada-6fb321faff29.png)

  
  
  
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="content-Type" charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
  7. <title>padding 内填充 </title>
  8. <style>
  9. * {
  10. color: white;
  11. }
  12. #tag1 {
  13. background-color: dodgerblue;
  14. padding-top: 5px; /*上方*/
  15. padding-right: 41%; /*右方*/
  16. padding-bottom: 1px; /*下方*/
  17. padding-left: 44%; /*左方*/
  18. }
  19. #tag2 {
  20. background-color: cornflowerblue;
  21. padding: 1px 41% 5px 44%; /*简写,顺序:上右下左(逆时针)*/
  22. }
  23. #tag3 {
  24. background-color: gray;
  25. padding: 1px 40%; /*简写,值1用于上下,值2用于左右*/
  26. }
  27. #tag4 {
  28. background-color: blueviolet;
  29. padding: 1px 42% 5px; /*简写,值1用于上,值2用于左右,值3用于下*/
  30. }
  31. p {
  32. background-color: darkslateblue;
  33. font-size: 200%;
  34. padding: 35%; /*简写,一个值用于四边*/
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div>
  40. <span id="tag1">入巷间吃汤面 </span>
  41. <span id="tag2">笑看窗边飞雪 </span>
  42. <span id="tag3">取腰间明珠弹山雀 </span>
  43. <span id="tag4">立枇杷于庭前 </span>
  44. <p>劫过九重 城关 </p>
  45. </div>
  46. </body>
  47. </html>

四、浮动 float

在CSS中,任何元素都可以浮动.
浮动元素会生成一个块级框,而不论它本身是何种元素.

浮动的两大特性:

  1. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.
  2. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不纯在一样.
值: left right none 描述: 向左浮动 向右浮动 不浮动,默认值
  
  
  
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="content-Type" charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
  7. <title>float 浮动 </title>
  8. <style>
  9. * {
  10. margin: 0;
  11. color: aqua;
  12. height: 200px;
  13. }
  14. p {
  15. background-color: gray;
  16. width: 30%;
  17. float: left; /*向左浮动*/
  18. }
  19. #tag {
  20. background-color: darkgray;
  21. width: 30%;
  22. float: right; /*向右浮动*/
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div>
  28. <p>我座下马正酣 </p>
  29. <p id="tag">看那轻飘飘的衣摆 </p>
  30. </div>
  31. </body>
  32. </html>

关于浮动的详细说明:W3school


五、清除浮动 clear

clear属性规定元素的那一侧不允许其它浮动元素.
clear属性只会对自身起作用,而不会影响其它元素.

值 描述 left 在左侧不允许浮动元素 right 在右侧不允许有浮动元素 both 在左右两侧均不允许浮动元素 none 允许浮动元素出现在两侧,默认值 inherit 规定应该从父元素继承clear属性的值

父标签塌陷问题:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/a4f1bfa4-86d8-48ef-94f8-7ac4e6ea4e6a.png)

  
  
  
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="content-Type" charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
  7. <title>clear 清除浮动 </title>
  8. <style>
  9. .sign1 {
  10. width: 100px;
  11. height: 100px;
  12. background-color: hotpink;
  13. float: left; /*左浮动*/
  14. }
  15. .sign2 {
  16. width: 100px;
  17. height: 100px;
  18. background-color: aqua;
  19. float: left; /*左浮动*/
  20. }
  21. /*父标签塌陷问题 .1*/
  22. .father :after {
  23. content: "";
  24. display: block;
  25. clear: both; /*不允许左右两端有浮动快*/
  26. }
  27. .sign3 {
  28. width: 100px;
  29. height: 100px;
  30. background-color: blue;
  31. color: white;
  32. /*clear: both; 实测,此写法与1处写法在网页显示上并无差异*/
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class="father">
  38. <div class="sign1">趁擦肩把裙掀 </div>
  39. <div class="sign2">踏遍 三江六岸 </div>
  40. </div>
  41. <div class="sign3">借刀光做船帆 </div>
  42. </body>
  43. </html>

六、溢出 overflow

属性 属性 描述 overflow 水平和垂直均设置 overflow-x 设置水平方向 overflow-y 设置垂直方向 值 值 描述 visible 超出的内容不会被修剪,会呈现在元素框之外,默认值 hidden 超出的内容会被修剪,并且超出的内容不可见 scroll 超出的内容会被修剪,但是浏览器会显示滚动条以便查看超出的内容 auto 如果内容超出元素框,则会显示滚动条 inherit 规定应该从父元素继承overflow属性的值
  
  
  
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="content-Type" charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
  7. <title>overflow 溢出属性 </title>
  8. <style>
  9. .sign1 {
  10. width: 180px;
  11. height: 180px;
  12. border: 2px solid darkgray; /*边框简写法*/
  13. float: right;
  14. overflow: auto; /*内容超出元素框时会显示滚动条*/
  15. }
  16. /*圆形头像示例*/
  17. .sign2 {
  18. width: 150px;
  19. height: 150px;
  20. border: 1px solid darkslategrey;
  21. border-radius: 50%;
  22. overflow: hidden;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div>
  28. <div class="sign1">
  29. 任露水浸透了短衫, 大盗睥睨四野, 枕风宿雪多年, 我与虎谋早餐, 拎着钓叟的鱼弦,
  30. 问卧龙几两钱, 蜀中大雨连绵, 关外横尸遍野, 你的笑像一条恶犬, 撞乱了我心弦,
  31. 谈花饮月赋闲, 这春宵艳阳天, 待到梦醒时分睁眼, 铁甲寒意凛冽,
  32. </div>
  33. <div class="sign2">
  34. <img src="https://avatar.csdn.net/5/C/8/1_qq_41964425.jpg?1535957160"
  35. alt= "https://avatar.csdn.net/5/C/8/1_qq_41964425.jpg?1535957160">
  36. </div>
  37. </div>
  38. </body>
  39. </html>

七、定位 position

1. 无定位 static

默认值,不能作为绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的.

2. 相对定位 relative

相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是:即使设定了元素的相对定位以及偏移量,元素仍会占有着原来的位置,即占据文档流空间。对象遵循正常的文档流,但将依据top、right、bottom、left等属性在正常文档流中偏移位置,而且层叠通过z-index属性定义.

注意:相对定位的主要用法是为方便绝对定位元素找到参照物.

  
  
  
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="content-Type" charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
  7. <title>relative 相对定位 </title>
  8. <style>
  9. div> div {
  10. width: 150px;
  11. text-align: center;
  12. margin: 5px 5px 5px 5px;
  13. position: relative; /*相对定位*/
  14. }
  15. .sign1 {
  16. background-color: #74d3d2;
  17. left: 200px; /*向右移*/
  18. top: 100px; /*再向下移*/
  19. }
  20. .sign2 {
  21. background-color: #808b74;
  22. left: 220px;
  23. top: 90px;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div>
  29. <div class="sign1">夙愿只隔一箭 </div>
  30. <div class="sign2">故乡近似天边 </div>
  31. </div>
  32. </body>
  33. </html>

3. 绝对定位 absolute

定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置将相对于最初的包含快(即body元素)。元素定位后生成一个块级框,而不论原来他在正常流中生成何种类型的框.

重点:如果父级设置了position属性,例如position: relative;,那么子元素就会以父级的左上角为原始点进行定位。这样就能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那么子元素就设置为绝对定位;父元素设置相对定位,然后通过top、right、bottom、left用百分比宽度表示.

另外,对象脱离正常文档流,使用top、right、bottom、left、等属性进行绝对定位,而起层叠通过z-index属性定义.

  
  
  
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="content-Type" charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
  7. <title>absolute 绝对定位 </title>
  8. <style>
  9. * {
  10. margin: 0;
  11. }
  12. div> div {
  13. width: 150px;
  14. text-align: center;
  15. position: absolute; /*绝对定位*/
  16. }
  17. .sign1 {
  18. background-color: #b5c8d3;
  19. bottom: 50px;
  20. left: 50px;
  21. }
  22. .sign2 {
  23. background-color: #b5c8d3;
  24. bottom: 50px;
  25. right: 50px;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div>
  31. <div class="sign1">不知何人浅唱弄弦 </div>
  32. <div class="sign2">我彷徨不可前 </div>
  33. </div>
  34. </body>
  35. </html>

4. 固定 fixed

设置为固定的对象脱离正常文档流,使用top、right、bottom、left、等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动,而起层叠通过z-index属性定义.

注意:如果一个元素设置了position: absolute | fixed;,则这个元素就不能设置float。这是一个常识性的知识点,因为这是两个不同的流:一个是浮动流;另一个是“定位流”。但是呢,relative却可以,因为它原本所占的空间仍然会占据文档流.

理论上被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,他都会固定在这个位置.

  
  
  
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="content-Type" charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
  7. <title>fixed 固定 </title>
  8. <style>
  9. .sign {
  10. height: 1000px;
  11. background-color: yellow;
  12. }
  13. .sign> div {
  14. width: 120px;
  15. background-color: #a495ed;
  16. color: white;
  17. text-align: center;
  18. }
  19. .sign1 {
  20. position: fixed; /*固定*/
  21. left: 75%;
  22. top: 95%;
  23. }
  24. .sign1> a {
  25. text-decoration: none; /*去掉超链接自带的下划线*/
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div class="sign">
  31. <div>
  32. <a name="tag">枕风宿雪多年 </a>
  33. </div>
  34. <div class="sign1">
  35. <a href="#tag">我与虎谋早餐 </a>
  36. </div>
  37. </div>
  38. </body>
  39. </html>

八、 层叠顺序 z-index

定义对象的层叠顺序,仅能在定位元素上奏效,数字大的会覆盖在数值小的标签之上.

  
  
  
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="content-Type" charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
  7. <title>z-index 层叠顺序 </title>
  8. <style>
  9. div> div {
  10. width: 150px;
  11. color: white;
  12. text-align: center;
  13. position: fixed;
  14. }
  15. .sign1 {
  16. background-color: rgba(0, 0, 0, 0.33);
  17. z-index: 10000;
  18. }
  19. .sign2 {
  20. background-color: rgb(188, 211, 188);
  21. left: 120px;
  22. z-index: 9999;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div>
  28. <div class="sign1">拎着钓叟的鱼弦 </div>
  29. <div class="sign2">问卧龙几两钱 </div>
  30. </div>
  31. </body>
  32. </html>

九、透明度 opacit

定义元素的透明度,取值范围:0~1,0是完全透明,1是完全不透明.

注意:opacit是将对象的一切都透明,而background-color: rgba(0, 0, 0, 0.33);只是将对象的背景变透明.

  
  
  
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="content-Type" charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
  7. <title>opacticy 透明度 </title>
  8. <style>
  9. div> div {
  10. color: black;
  11. width: 150px;
  12. background-color: gray;
  13. margin: 10px;
  14. text-align: center;
  15. }
  16. .sign1,
  17. .sign2 {
  18. opacity: 0.33; /*全透明*/
  19. }
  20. .sign3,
  21. .sign4 {
  22. background-color: rgba(124, 126, 139, 0.33); /*仅背景透明*/
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div>
  28. <div class="sign1">蜀中大雨连绵 </div>
  29. <div class="sign2">关外横尸遍野 </div>
  30. <div class="sign3">你的笑像一条恶犬 </div>
  31. <div class="sign4">撞乱我心弦 </div>
  32. </div>
  33. </body>
  34. </html>

 

 



 

"

原文: http://blog.gqylpy.com/gqy/256

网友评论