Web前端——CSS盒模型

一、CSS简介

CSS：Cascading Style Sheet 层叠样式表

作用：主要用来设计网页的样式,美化网页

CSS语法规范：

<style>
     元素选择器{                  /* 选中要修改地元素 */
            属性名:属性值;        /* 属性名：修饰语法*/
            属性名:属性值;        /* 属性值：属性的取值*/ 
        }
</style>

CSS引入方式：

1、行间引入（内部样式）：权重1000

<div style="行间引入"> </div>

2、内部引入：内部和外部引入没有优先级之分，谁在后边听谁的

<style>
     元素选择器{                  /* 选中要修改地元素 */
            属性名:属性值;        /* 属性名：修饰语法*/
            属性名:属性值;        /* 属性值：属性的取值*/ 
        }
</style>

3、外部引入(项目中最常用的)

<link rel="stylesheet" href="需要引入的CSS文件路径">

二、盒模型简介

盒模型本质就是把网页中的各种元素封装成一块一块的。

 盒模型包括：

1. height(高度)

2. width(宽度)

3. margin(外边距)：盒子与其他元素之间的距离

4. padding(内边距)：盒子内容和边框之间的距离

5. border(边框)

 三、盒模型的属性

        1.height和width：设置盒模型内容区的宽高

属性	效果
height	设置盒模型内容区高度
width	设置盒模型内容区宽度
max-height	设置盒模型内容区最大高度
max-width	设置盒模型内容区最大宽度
min-height	设置盒模型内容区最小高度
min-width