盒子模型
1、宽高所划分的区域
2、边框
3、内边距
4、外边距
内边距和边框是不占据盒子本身的宽高的
内层盒子居中
外部盒子宽高固定,内层盒子宽高继承外部盒子
在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* .out-box{
width: 200px;
height: 200px;
border: 10px solid green;
padding: 50px;
margin: 50px;
}
.inner-box{
width: 100px;
height: 100px;
background-color: orange;
} */
.box{
width: 100px;
height: 100px;
padding: 30px;
border: 1px solid #000;
}
.box .box1{
/* width: 100px;
height: 100px; 或者*/
width: 100%;
height: 100%;
background-color:orange ;
}
</style>
</head>
<body>
<!-- <div class="out-box">
<div class="inner-box"></div>
</div> -->
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
使用box-sizing: border-box; 把边框和内边距收到盒子内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
padding: 30px;
background-color: green;
border: 10px solid #000;
/* 把边框和内边距收到盒子内部 */
box-sizing: border-box;
/* firefox */
-moz-box-sizing: border-box;
/* chrome safair */
-webkit-box-sizing: border-box;
/* IE8及以下 */
-ms-box-sizing: border-box;
/* presto opera */
-o-box-sizing: border-box;
}
.box1 {
width: 100%;
height: 100%;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
body默认的外边距
ie 8 上下16px 左右 8px
ie7 上下16px 左右 11px
盒子居中
水平居中 margin:0 auto;
定位
绝对定位 :设置了定位后,会在当前的文档层之上在重新建一个文档
层,它就到新建的文档层上去了,所以就会导致下边的元素会上去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box1{
/*
* 设置了定位后,会在当前的文档层之上在重新建一个文档
*层,它就到新建的文档层上去了,所以就会导致下边的元素会上去
*/
position: absolute;
width: 100px;
height: 100px;
background-color: rebeccapurple;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<!-- 绝对定位
position: absolute;
left/right top/bottom
-->
<div class="box1">
</div>
<div class="box2"></div>
</body>
</html>
相对定位: 设置相对定位后,依然会新建文档层,但是之前文档层的位置还会保留
绝对定位中的两栏设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
html,body{
height: 100%;
margin: 0;
overflow: hidden;
}
.left{
height: 100%;
margin-right: 300px;
background-color: #bfa;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
background-color: orange;
}
</style>
</head>
<body>
<!-- 绝对定位
position: absolute;
left/right top/bottom
-->
<div class="left">
left
</div>
<div class="right">
right
</div>
</body>
</html>
浮动
浮动流并没有新建一个层,块级元素无法识别浮动流的位置
内联、内联块、浮动、溢出隐藏、纯文本都可以识别浮动元素的位置
float以后元素就变成内联块了
伪类、伪元素
:after
:before
伪元素
::before
::after
<style>
p:before{
content:attr(data-username)
}
</style>
<body>
<p data-username="动态数据">内容</p>
</body>
盒子阴影
box-shadow:水平位置(必填) 垂直位置(必填) 模糊距离 阴影的尺寸 阴影颜色 阴影的种类(inset outset)
.box1{
width: 300px;
height: 150px;
background-color: orange;
margin: 100px;
/*
box-shadow:水平位置(必填) 垂直位置(必填)
模糊距离 阴影的尺寸 阴影颜色 阴影的种类(inset outset)
*/
/* box-shadow: 20px 10px; */
-webkit-box-shadow: 0px 10px;
-moz-box-shadow: 20px 0px;
-o-box-shadow: -20px -10px;
box-shadow: 20px 10px 20px;
box-shadow: 20px 10px 5px 10px;
}
边框圆角
border-radius: 纯圆 设置为50% 但是宽高要一样
半圆角 height/2 px
圆角被非圆角元素隐藏 解决方法:设置圆角元素的overflow:hidden
-webkit-border-radius:20px;
-moz-border-radius: 20px ;
-o-border-radius: 20px ;
bakckground-image: url(图片地址不用写引号)
.box1{
width: 300px;
height: 300px;
margin: 100px;
border: 1px solid #000;
background-image: url(../DOM/slider/img/1.jpg);
background-size: 300px 300px;//css3属性
/* 或者
background-size: 100% 100%;
background-size: cover
background-size: contain
*/
background-repeat:no-repeat|repeate|repeat-x|repeat-y;
background-position:left、right、bottom、top、center中的两两组合| 两个都是百分比形式|写两个像素;
background-position:left center;
background-position:50% 50%;
background-position:10px 10px;
background-attachment: fixed;背景图片不滚动,默认是scroll
/*
复合值写法
*/
background: background-color background-image
background-repeate background-attachment
background-position/background-size
}
logo设置主要注意设置overflow: hidden;height:0; padding-top: 容器的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.logo{
width: 200px;
height: 114px;
/* border: 1px solid #000; */
}
.logo h1 .logo-hd{
display: block;
width: 142px;
height: 0;
padding-top: 114px;
background: url(../DOM/slider/img/1.jpg) no-repeat 0 0/200px 114px;
border: 1px solid #000;
overflow: hidden;
}
</style>
</head>
<body>
<div class="logo">
<h1>
<a href="" class="logo-hd">
myLOGO
</a>
</h1>
</div>
</body>
</html>
table样式
1 | 2 |
1 | 2 |
4 | 2 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
}
.box1{
background-color: #baf;
margin-bottom: 100px;
}
.box2{
background-color:#bfa;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box box1">
</div>
<div class="box box2">
</div>
</body>
</html>
解决:
1、放在两个BFC元素里
2、不解决,直接把外边距写在一个盒子里就好
2、高度塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box {
width: 200px;
border: 10px solid #000;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: #baf;
}
.box2 {
float: left;
width: 100px;
height: 100px;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
</html>
解决将父级元素变成BFC
3、margin塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box {
/*解决方法设置border*/
/*border-top: 1px solid transparent;*/
/*解决方法触发BFC*/
display: inline-block;
width: 200px;
height: 200px;
background-color: #bfa;
}
.box1 {
width: 50px;
height: 50px;
margin: 0 auto;
margin-top: 100px;
background-color: #baf;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>
所有设置了float的元素都自动转换为inline-block
4、BFC可以解决浮动元素覆盖的问题
CSS书写顺序
显示属性: display, position, float, clear
自身属性:width, height,margin,padding,border,background
文本属性:color, font, text-align,vertical-align,whitespace