如何实现盒子居中问题, 要让盒子实现水平居中, 要满足是快级元素, 而且盒子的宽度要定义. 然后数值为 auto 即可.
- .dashu {
- width: 100px;
- margin: 0 auto;
- }
盒子的水平居中为
margin: auto;
而文字的水平居中为:
- text-align: center;
- text-align: center; // 文字水平居中
- margin: auto; // 盒子的水平居中
盒子水平居中:
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Demo</title>
- <style>
- div {
- text-align: center; /* 居中对齐 */
- width: 100px;
- height: 100px;
- background-color: blue;
- /* margin: 0 auto; 自动 水平居中对齐 */
- /* margin: auto; 上下左右都是 auto*/
- }
- </style>
- </head>
- <body>
- <div>
达叔小生
- </div>
- </body>
- </HTML>
- margin: 0 auto; // 通俗
- // margin: auto; 上下不显示
清除内外边距
- * {
- padding: 0;
- margin: 0;
- }
外边距合并:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Demo
- </title>
- <style>
- div { width: 200px; height: 200px; background-color: blue; } .da{ margin-bottom:
- 100px; } .shu{ background-color: red; margin-top: 150px; }
- </style>
- </head>
- <body>
- <div class="da">
- 1
- </div>
- <div class="shu">
- 2
- </div>
- </body>
- </HTML>
外边距合并以合并的最大值为准.
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Demo
- </title>
- <style>
- .father { width: 500px; height: 500px; border: 1px solid red; background-color:
- red; } .son { width: 200px; height: 200px; background-color: blue; margin-top:
- 50px; margin-left: 50px; }
- </style>
- </head>
- <body>
- <div class="father">
- <div class="son">
- </div>
- </div>
- </body>
- </HTML>
content 宽度和高度
padding 不会影响盒子的大小.
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Demo
- </title>
- <style>
- .father { height: 200px; background-color: pink; width: 300px; /* padding-left:
- 30px; 给定了宽度, 所以 padding 会撑开 */ } .son { padding-left: 30px; /* 没有宽度不会撑开
- */ }
- </style>
- </head>
- <body>
- <div class="father">
- <div class="son">
- dashu
- </div>
- </div>
- </body>
- </HTML>
padding 内边距
圆角
border-radius: 50%;
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Demo
- </title>
- <style>
- div { width: 300px; height: 300px; background-color: red; margin: 100px
- auto; border-radius: 50%; }
- </style>
- </head>
- <body>
- <div>
- </div>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Demo
- </title>
- <style>
- body { background-color: #ccc; } .radius a { width: 170px; height: 170px;
- background-color: #fff; display: inline-block; margin: 30px; border-radius:
- 50%; text-align: center; line-height: 170px; color: red; text-decoration:
- none; font-weight: 700; } .radius a:hover { background-color: red; color:
- #fff; }
- </style>
- </head>
- <body>
- <div class="radius">
- <a href="#">
- 文字内容
- </a>
- <a href="#">
- 文字内容
- </a>
- <a href="#">
- 文字内容
- </a>
- </div>
- </body>
- </HTML>
盒子阴影
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内 / 外阴影
属性 | 说明 |
---|---|
h-shadow | 水平阴影的位置 |
v-shadow | 垂直阴影的位置 |
blur | 模糊距离 |
spread | 阴影的尺寸 |
color | 阴影的颜色 |
inset | 将外部阴影改为内部阴影 |
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Demo
- </title>
- <style>
- div { width: 200px; height: 200px; } div:hover { box-shadow: 0 15px 15px
- rgba(0,0,0,0.1); }
- </style>
- </head>
- <body>
- <div>
- </div>
- </body>
- </HTML>
浮动
float 浮动: 标准流, 浮动, 定位.
float 可以让多个 div 在同一行显示.
属性值 | 说明 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动 |
选择器 {float: 属性值;}
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Demo
- </title>
- <style>
- .up { width: 200px; height: 100px; background-color: red; float: left;
- } .down { width: 220px; height: 120px; background-color: purple; }
- </style>
- </head>
- <body>
- <div class="up">
- </div>
- <div class="down">
- </div>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Demo
- </title>
- <style>
- .father { width: 600px; height: 600px; background-color: blue; } .son
- { width: 200px; height: 200px; background-color: red; float: right; }
- </style>
- </head>
- <body>
- <div class="father">
- <div class="son">
- </div>
- </div>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Demo
- </title>
- <style>
- div { width: 100px; height: 100px; } .one { background-color: red; float:
- left; } .two { background-color: purple; } .three { background-color: blue;
- float: left; }
- </style>
- </head>
- <body>
- <div class="one">
- </div>
- <div class="two">
- </div>
- <div class="three">
- </div>
- </body>
- </HTML>
盒子模型布局稳定性
width> padding> margin
浮动 (float)
普通流 (标准流), 浮动和定位
属性值 | 描述 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动(默认值) |
推荐
Day1:HTML 和 CSS
Day2:HTML 和 CSS
Day3:HTML 和 CSS
Day4:HTML 和 CSS
如果看了觉得不错
点赞! 转发!
达叔小生: 往后余生, 唯独有你
You and me, we are family !
90 后帅气小伙, 良好的开发习惯; 独立思考的能力; 主动并且善于沟通
来源: http://www.jianshu.com/p/67982a8f2a0f