一、CSS简介
CSS:Cascading Style Sheet 层叠样式表
作用:主要用来设计网页的样式,美化网页
CSS语法规范:
<style>
元素选择器{ /* 选中要修改地元素 */
属性名:属性值; /* 属性名:修饰语法*/
属性名:属性值; /* 属性值:属性的取值*/
}
</style>
CSS引入方式:
1、行间引入(内部样式):权重1000
<div style="行间引入"> </div>
2、内部引入:内部和外部引入没有优先级之分,谁在后边听谁的
<style>
元素选择器{ /* 选中要修改地元素 */
属性名:属性值; /* 属性名:修饰语法*/
属性名:属性值; /* 属性值:属性的取值*/
}
</style>
3、外部引入(项目中最常用的)
<link rel="stylesheet" href="需要引入的CSS文件路径">
二、盒模型简介
盒模型本质就是把网页中的各种元素封装成一块一块的。
盒模型包括:
height(高度)
width(宽度)
margin(外边距):盒子与其他元素之间的距离
padding(内边距):盒子内容和边框之间的距离
border(边框)
三、盒模型的属性
1.height和width:设置盒模型内容区的宽高
属性 | 效果 |
---|---|
height | 设置盒模型内容区高度 |
width | 设置盒模型内容区宽度 |
max-height | 设置盒模型内容区最大高度 |
max-width | 设置盒模型内容区最大宽度 |
min-height | 设置盒模型内容区最小高度 |
min-width |