登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›css介绍3

css介绍3

嘀荼酴 6 天前
CSS基础三


目录

  • CSS基础三

    • 一.浮动
    • 二.Display
    • 三.float
    • 四.父级边框塌陷问题

      • 1.增加高度
      • 2.增加一个空的div标签，清除浮动
      • 3.overflow
      • 4.在父级边框中加一个伪类：after

    • 五.定位

      • 1.相对定位
      • 2.绝对定位
      • 3.固定定位

    • 六.z-index

      • 图层
      • 2.透明度



这篇就想聊聊CSS里那些“看似简单，实则藏着巧思”的细节—或许我们能聊到一块儿去。
一.浮动

块级元素：独占一行
如：h1~h6 p div 列表...
行内元素：不独占一行
如：span a img strong....
行内元素可以被包含在块级元素中，反之，则不可以~
标准文档：
1.jpeg

二.Display

控制元素“怎么显示”

  • 有的元素默认占一整行（像段落、div），这叫block（块级）；
  • 有的元素只占自己内容那么大，旁边能放其他元素（像文字、图片），这叫inline（行内）；
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7.    
  8. </head>
  9. <body>
  10. div
  11. span
  12. </body>
  13. </html>
复制代码
效果如下：
2.jpg

三.float

让元素“飘起来”。比如：
​        想让一张图片靠左，文字绕着它排，就给图片设float: left；
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>浮动</title>
  6.    
  7. </head>
  8. <body>
  10.     <img src="https://www.cnblogs.com/1.jpg" height="300" width="300"/>
  11.     <img src="https://www.cnblogs.com/2.jpg" height="300" width="300"/>
  12.     <img src="https://www.cnblogs.com/4.jpg" height="300" width="552"/>
  13.    
  14.         浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
  15.    
  17. </body>
  18. </html>
复制代码
效果如下：
6.jpeg

四.父级边框塌陷问题

解决方案:
1.增加高度
  1. #father {
  2.     border:1px #000 solid;
  3. }
复制代码
2.增加一个空的div标签，清除浮动
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>浮动</title>
  6.    
  7. </head>
  8. <body>
  10.     <img src="https://www.cnblogs.com/1.jpg" height="300" width="300"/>
  11.     <img src="https://www.cnblogs.com/2.jpg" height="300" width="300"/>
  12.     <img src="https://www.cnblogs.com/4.jpg" height="300" width="552"/>
  13.    
  14.         浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
  15.    
  16.    
  19. </body>
  20. </html>
复制代码
3.overflow
  1. #father {
  2.     border:1px #000 solid;
  3.     overflow: hidden;
复制代码
4.在父级边框中加一个伪类：after
  1. #father:after {
  2.     content:"" ;
  3. display: block;
  4. clear: both;}
复制代码
四种解决方式效果一样：
10.jpeg

小结:

  • 浮动元素后面增加空div
简单，代码中尽量避免空div

  • 设置父元素的高度
简单，元素假设有了固定的高度，就会被限制

  • overflow
简单，下拉的一些场景避免使用

  • 父类添加一个伪类: after
写法稍微复杂一点，但是没有副作用
五.定位

1.相对定位

元素“相对自己原来的位置动一动”。
[code]        Title            第一个盒子    第二个盒子    第三个盒子
3.jpg
4.jpg
5.jpg
7.jpg
8.jpg
9.jpg

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
嘀荼酴
6 天前

0

粉丝关注

17

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫