CSS 布局笔记, 可能有些乱, 以后再补充吧~
margin 合并影响布局
兄弟元素之间
在默认情况下两个 div 之间的 margin 属性会重合, 例如:
代码:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- JS Bin
- </title>
- <style>
- main { border: 1px solid blue; } div { border: 1px solid red; height:
- 100px; margin: 10px; }
- </style>
- </head>
- <body>
- <main>
- <div>
- </div>
- <div>
- </div>
- <div>
- </div>
- </main>
- </body>
- </HTML>
效果图:
3.jpg
代码预览地址: http://js.jirengu.com/lehehesoge/1/edit
但在其中插入一个有边框的 div 时, margin 又会被撑开, 例如:
代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- JS Bin
- </title>
- <style>
- .demo { border: 1px solid red; height: 100px; margin: 10px; }
- </style>
- </head>
- <body>
- <div class="demo">
- </div>
- <div style="border: 1px solid #000">
- </div>
- <div class="demo">
- </div>
- <div class="demo">
- </div>
- </body>
- </HTML>
效果图:
2.jpg
代码预览地址: http://js.jirengu.com/giqanalumi/10/edit?html,output
即使插入的 div 边框为 0.1px 其他 div 的 margin 也会受到影响, 会影响的属性还有: display: table; display: flex
父子元素之间
当给子元素一个 margin-top 时, 父元素也会被挤下去
代码
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- JS Bin
- </title>
- <style>
- main { border: 1px solid blue; padding: 5px; } .child { height: 100px;
- width: 100px; background-color: #ff0000; margin-top: 100px; } .parent {
- background-color: #000; }
- </style>
- </head>
- <body>
- <main>
- <div class="parent">
- <div class="child">
- </div>
- </div>
- </main>
- </body>
- </HTML>
图示:
4.jpg
代码预览地址: http://js.jirengu.com/cimunikafi/1/edit
但是当给父元素添加了一个 border 属性时, 它又会撑开父元素
代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- JS Bin
- </title>
- <style>
- main { border: 1px solid blue; padding: 5px; } .child { height: 100px;
- width: 100px; background-color: #ff0000; margin-top: 100px; } .parent {
- background-color: #000; border-top: 5px solid green; }
- </style>
- </head>
- <body>
- <main>
- <div class="parent">
- <div class="child">
- </div>
- </div>
- </main>
- </body>
- </HTML>
图示
4.jpg
代码预览链接: http://js.jirengu.com/cimunikafi/2/edit
除了加 border 属性, 会影响的属性还有: padding display: inline-block; display: flex; display: table; overflow: hidden;
如果在有 margin 属性的子元素上添加一个内联元素, 那么 margin 也不会影响父元素布局
li 小圆点 受 display 影响
代码
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- JS Bin
- </title>
- <style>
- ul { border: 1px solid #000; } li { display: block; }
- </style>
- </head>
- <body>
- <ul>
- <li>
- 选项 1
- </li>
- <li>
- 选项 2
- </li>
- <li>
- 选项 3
- </li>
- </ul>
- </body>
- </HTML>
图:
9.jpg
代码地址预览: http://js.jirengu.com/kiciminufa/1/edit
原因: 由于默认的 li 的 display 属性为: list-item 小圆点只会显示在有这个属性的元素上
position 会影响 dispaly 属性
代码
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- JS Bin
- </title>
- <style>
- .parent { background: yellow; height: 100px; position: relative; } .child
- { display: inline; border: 1px solid red; position: absolute; bottom: 0;
- right: 0; }
- </style>
- </head>
- <body>
- <div class="parent">
- <div class="child">
- 内联样式
- </div>
- </div>
- </body>
- </HTML>
此时打开控制台选中 child 元素 在控制台右侧选择 Computed 一栏 搜索 display , 就可以看到实际上 child 的 display 属性变成了 block , 如图:
8.jpg
代码预览链接: http://js.jirengu.com/yucujokate/1/edit
注意: 只有当 display 的属性为 inline 或者 inline-block 时添加 position 属性才会被变为 block
position: fixed 会受 transform 影响
当给有 position: fixed 属性的父元素或祖先元素一个 transform 属性时 position: fixed 就不会相对屏幕定位, 而是相对那个父元素或祖先元素定位.
代码
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- JS Bin
- </title>
- <style>
- main { width: 200px; height: 200px; border: 1px solid blue; transform:
- translate(10px, 50px); } .demo { width: 100px; height: 100px; background-color:
- red; position: fixed; right: 5px; top:50px; }
- </style>
- </head>
- <body>
- <main>
- <div class="demo">
- </div>
- </main>
- </body>
- </HTML>
图示:
image
代码预览链接: http://js.jirengu.com/zesiyopemi/2/edit
float 元素会影响周围的 inline 元素
代码
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- JS Bin
- </title>
- <style>
- .parent { background: blue; height: 100px; } .float { background: rgba(255,
- 0, 0, 0.5); width: 100px; height: 60px; float: left; } .child { width:
- 300px; height: 50px; background: white; }
- </style>
- </head>
- <body>
- <div class="parent">
- <div class="float">
- 浮动元素
- </div>
- <div class="child">
- 文字元素
- </div>
- </div>
- </body>
- </HTML>
这时 float 元素就会影响兄弟元素里的 inline 元素, 如图:
10.jpg
代码预览链接: http://js.jirengu.com/bojacipogu/10/edit
拓展: 浮动最初的作用
浮动开始只是为了让图文混排出现的, 当在一段文字中插入一个图片, 文字默认是与图片底线对齐的. 很不美观, 于是就出现了 float: left 等属性, 可以显示图片又使文字排版美观
来源: http://www.jianshu.com/p/8b76afb91420