#盒子模型
上课·记录·疑问
错误在高宽指内容即网页元素的。
左。。。
Input none;去点击后出现的输入框
input{
outline: none;
}
重置css
lh32
Pl.
Block?
课件
1边框说明表
2圆角边框
3盒子阴影
总结
代码
1边框样式
w宽度b边框
w、b:宽 线 颜色
<head lang="en">
<meta charset="UTF-8">
<title>边框</title>
<style>
.box{
width: 298px; /* 盒子宽度298px*/
border:1px solid #3a6587; /* 设置盒子边框*/
}
h2{
font-size:16px;
background-color:#3a6587;
height:35px;
line-height:35px;
color:#FFF;
}
form{
background: #c8ece3;
}
div:nth-of-type(1) input{
border: 3px solid black; /* 第一个div下面的input元素设置边框3px 实线 黑色*/
}
div:nth-of-type(2) input{
border: 1px dashed red; /* 第二个div下面的input元素设置边框1px 虚线 红色*/
}
div:nth-of-type(3) input{
border: 2px dotted red; /* 第三个div下面的input元素设置边框2px 点线 红色*/
}
</style>
</head>
<body>
<div class="box">
<h2>会员登录</h2>
<form action="#">
<div>
<strong class="name">姓名：</strong>
<input type="text"/>
</div>
<div>
<strong class="name">邮箱：</strong>
<input type="text"/>
</div>
<div>
<strong class="name">电话：</strong>
<input type="text"/>
</div>
</form>
</div>
</body>
2外边距margin
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,h2{
margin: 0;
}
.box{
width: 298px; /* 盒子宽度298px*/
border:1px solid #3a6587; /* 设置盒子边框*/
margin:0px auto; /* 让整个盒子居中*/
}
h2{
font-size:16px;
background-color:#3a6587;
height:35px;
line-height:35px;
color:#FFF;
}
div{
margin-bottom: 6px;
}
form{
background: #c8ece3;
}
</style>
</head>
3margin居中条件
10 auto
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div>我是div元素</div>
</body>
</html>
2width
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
span{
width: 100px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<span>我是span元素</span>
</body>
</html>
4内边距padding-.||LR
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,h2{
margin: 0;
padding: 0;
}
.box{
width: 298px; /* 盒子宽度298px*/
border:1px solid #3a6587; /* 设置盒子边框*/
margin:0px auto; /* 让整个盒子居中*/
}
h2{
font-size:16px;
background-color:#3a6587;
height:35px;
line-height:35px;
color:#FFF;
padding-left:20px; /* 让标题左边留点空隙*/
}
div{
margin-bottom: 6px;
}
form{
background: #c8ece3;
padding:30px 10px; /* 表单内部都设置空隙*/
}
</style>
</head>
<body>
<div class="box">
<h2>会员登录</h2>
<form action="#">
<div>
<strong class="name">姓名：</strong>
<input type="text"/>
</div>
<div>
<strong class="name">邮箱：</strong>
<input type="text"/>
</div>
<div>
<strong class="name">电话：</strong>
<input type="text"/>
</div>
</form>
</div>
</body>
</html>
5盒模型尺寸WHPMB
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒模型尺寸</title>
<style>
div{
width: 88px;
height: 88px;
padding: 5px;
margin: 10px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6box-sizing-未普及
计算盒子边框尺寸
不会往下掉的处理，即内部留出间隙
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
div{
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px solid #000000;
box-sizing: border-box;/*优秀*/
/*box-sizing: content-box; /!* 默认值*!/*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
7border-radius左上对右下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>border-radius的使用</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
/*border-radius: 20px; /!*四个角都是圆角，值一样*!/*/
/*border-radius: 20px 40px; /!*左上右下是20px，右上左下是40px*!/*/
/*border-radius: 20px 10px 50px; /!*左上是20px，右上左下是10px, 右下是50px*!/*/
border-radius: 20px 10px 50px 30px; /*左上是20px，右上左下是10px, 右下是50px*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
8border-radius制作特殊图形
1半圆50%左上右上0.50.500
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>border-radius制作半圆形</title>
<style>
div{
background: red;
margin: 30px;
}
div:nth-of-type(1){
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
}
div:nth-of-type(2){
width: 100px;
height: 50px;
border-radius:0 0 50px 50px;
}
div:nth-of-type(3){
width: 50px;
height: 100px;
border-radius:0 50px 50px 0;
}
div:nth-of-type(4){
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
2扇形0.5 000
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>border-radius制作扇形</title>
<style>
div{
background: red;
margin: 30px;
}
div:nth-of-type(1){
width: 50px;
height: 50px;
border-radius: 50px 0 0 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
border-radius:0 50px 0 0;
}
div:nth-of-type(3){
width: 50px;
height: 50px;
border-radius:0 0 50px 0;
}
div:nth-of-type(4){
width: 50px;
height: 50px;
border-radius: 0 0 0 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
3圆形0.5
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>border-radius制作圆形</title>
<style>
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
9box-shadow
box-shadow: inset 3px 3px 10px #06c;
/*内阴影*/
/* box-shadow: 3px 3px 10px #06c; */
/*外阴影*/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>box-shadow的使用</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 8px;
margin: 20px;
/*box-shadow: 20px 10px 10px #06c; /!*内阴影*!/*/
/*box-shadow: 0px 0px 20px #06c; /!*只设置模糊半径的阴影*!/*/
box-shadow: inset 3px 3px 10px #06c; /*内阴影*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
10清除默认样式CSS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body,
button,
input,
select,
textarea {
/* for ie */
font: 12px/1 "微软雅黑", Tahoma, Helvetica, Arial, sans-serif;
/* 用 ascii 字符表示，使得在任何编码下都无问题 */
background: transparent;
}
a {
text-decoration: none;
}
/* 伪元素 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* IE6,IE7 */
.clearfix {
*zoom: 1;
}
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
