CSS三个大模块: 盒子模型 、 浮动 、 定位
一、盒子模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:
外边距(margin)、
边框(border)、
内边距(padding)、
实际内容(content)四个属性。
每个盒子除了有自己大小和位置外,还影响着其他盒子的大小和位置。
二、盒子边框
语法:
border-width 边框粗细
border-style 边框样式
border-color 边框大小
边框样式(border-style),常用属性值如下:
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最为常用的)
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线
1. 边框综合设置
/*没有顺序*/
border: 1px solid red;
2 .圆角边框(CSS3)
语法格式:
border-radius: 左上角 右上角 右下角 左下角;
变成圆:border-radius: 50%;
三、内边距
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
/* 一个值,则上下左右都为这个值 */ padding: 20px;
/* 两个值,则为上下 左右 */ padding: 10px 20px;
/* 三个值,则为上 左右 下 */ padding: 10px 20px 30px;
/* 四个值,则为 上 右 下 左 */ padding: 10px 20px 30px 40px;
四、外边距
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
1.外边距塌陷
给元素设置边框:可以为父元素定义1像素的上边框 或上内边距。
2.外边距的应用-盒子居中
1.块元素 div
2.盒子必须指定了宽度(width)
3.左右的外边距都设置为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>
.main {
/* 版心 内容中心的宽度 */
background-color: aquamarine;
width: 1000px;
height: 100px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="main">文档的主题内容</div>
</body>
</html>
结果为:
3. 清除内外边距
为了更方便地控制网页中元素,制作网页时,可使用如下代码清除元素的默认内外边距:
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
4.外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
增大两个盒子之间的外边距,给一个盒子设置margin
不要给两个都设置,合并后以较大的为准
.bro1 {
background-color: aqua;
margin-bottom: 30px;
}
.bro2 {
background-color: aquamarine;
}
5. 嵌套的外边距合并情况
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。
解决方案:
可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情)。
注意!overflow:hidden;溢出隐藏 BFC原理 */ overflow: hidden;
BFC(Block Fomatting Context)为块级格式化上下文的的简称。
简单点说,把BFC看成一个渲染区域或者容器,在BFC这个容器内部的的元素无论如何布局都不会影响其外部的元素。
五、盒子模型计算大小
可以分成两种情况:
-
1、box-sizing: content-box 盒子大小为 content (width/heigth)+ padding + border, content-box:此值为其默认值,其让元素维持W3C的标准Box Mode。
-
2、box-sizing: border-box 盒子大小为 width/heigth 就是说 padding 和 border 是包含到width里面的。
1.盒子模型的分类
1.1W3C标准盒子(content-box):
在这种盒模型下,我们所说的元素的 width ,实际上只包含 content
盒子总宽度 = margin + border + padding + width
1.2.IE盒子(border-box):
又称怪异盒模型(边框盒子),是指块元素box-sizing属性为border-box的盒模型。
在这种盒模型下,我们所说的元素的 width ,实际上包含了 content + padding + border
盒子总宽度= margin + width
六、盒子阴影
语法格式:
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
注意:
-
前两个属性是必须写的。其余的可以省略。
-
默认是外阴影 (outset) ,不用设置, 想要内阴影设为 inset 。
-
X轴与Y轴如果有值,就改变了(正值 向右 向下)
<!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>
.box {
width: 200px;
height: 300px;
margin: 50px auto;
border: 2px solid #666;
/* box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影; */
box-shadow: 10px 30px 50px 10px greenyellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
结果为:
七、overflow 溢出
visible(默认) : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条,不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll : 不管超出内容否,总是显示滚动条