盒子模型(CSS重点)

CSS学习三大重点:

CSS盒子模型、浮动、定位

一：盒子模型(CSS重点)

1. 网页布局的本质

2. 盒子模型(Box Model)

所谓盒子模型:

标准盒子模型

 3. 盒子边框(border)

 边框的样式：

none：没有边框即忽略所有边框的宽度(默认值)

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

3.1 边框综合设置

 3.2 盒子边框写法总结表

 3.3 表格的细线边框

<style>
table {
width: 500px;
height: 300px;
border: 1px solid red ;
}
td {
border: 1px solid red;
text-align: center;
}
table,
td {
/*合并相邻边框*/
border-collapse: collapse;
}
</style>

 4. 内边距(padding)

4.1 内边距:

 4.2 设置

 4.3 内盒尺寸计算(元素实际大小)

 4.4 内边距产生的问题

 4.5 课堂—练

 4.6 padding不影响盒子大小情况

如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子。

 5. 外边距

 5.1外边距

margin属性用于设置外边距。margin就是控制盒子和盒子之间的距离

 5.2设置:

 5.3 外边距实现盒子居中

 5.4 文字居中与盒子居中区别

 5.5 插入图片和背景图片区别

1. 插入图片我们用的最多，比如产品展示类，移动位置只能靠盒模型padding margin

2. 背景图片我们一般用于小图标背景或者超大背景图片，背景图片只能通过background-position

img {
/*插入图片更改大小width 和height */
width: 200px;
height: 210px;
/*插入图片更改位置可以用margin 或padding盒模型*/
margin-top: 30px;
/*插入当图片也是一个盒子*/
margin-left: 50px;
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
/*背景图片更改位置我用background-position */
background-position: 30px 50px;
}

 5.6 清除元素的默认内外边距(重要)

 5.7 外边距合并

 

 

 6. 盒子模型布局稳定性

 二. 拓展@

1. 圆角边框(CSS3)

 2. 盒子阴影(CSS3)

 

 3. 文字阴影