CSS核心内容:标准流、盒子模型、浮动、定位。
在学习CSS核心内容之前,需要先明白两个基本的概念,HTML标签分为两种形式:块级元素、行内元素。
行内元素:<span> </span>
块级元素:<div> </div>
两者都是表示容器,并没有具体的表现样式。
区别:一个块级元素占满一行,行内元素在一行中填充。
可以通过CSS将行内元素转换为块级元素。方法是通过display关键字实现。
在HTML中添加一个行级元素:(同一个类中有多个标签)
<span class ="menu ttt"> 栏目三 </span >
在CSS中添加如下代码:(通过display关键字将行级元素换成块级元素)
.ttt
{
display :block block; /* 将行级元素变成块级元素 */
}
有了这个基础的概念之后再来学习CSS的四个核心知识:
1、标准流:
标签的顺序呈流水式排列,页面显示同标签顺序一致。这个跟我们一般的代码是一样的,先写的代码先执行。
2、盒子模型:
盒子模型的基本元素: 外边距(上下左右)、内边距、内容区(长和宽)、画框宽度。
详见下图:
需要注意的是:
盒子模型针对的是块级元素,针对行内元素不具有作用。
下面是CSS中盒子模型的一些相关的代码:
.menu
{
border :1px solid red ;
padding :5px;
margin :5px;
border-width :1px;
border-color:Red ;
border-style:solid ;
padding-top:3px;
padding-bottom :20px;
padding-left :10px;
margin:15px;
width :150px;
height :60px;
line-height:60px; /* 行间距=高:让文本垂直居中 */
}
3、浮动:通过 float 和 clear 关键字实现浮动的添加和清除。
浮动的本质是:将 块级元素 成最小的单元 进行级元素转换。
在没有添加浮动时的图如下:
在CSS的 menu 标签中添加如下代码:
.menu
{
line-height:60px; /* 行间距=高:让文本垂直居中 */
float :left ; /* 盒子向左浮动 */
}
向左浮动后的效果如下:
如果取消浮动,通过 clear 来实现:
.title /* 新闻标题样式 */
{
color :Red ; /* 文字颜色 */
clear:left ;
}
4、定位:分为绝对定位和相对定位。
相对定位没有脱离标准流,绝对定位则脱离了标准流,以它所在标签的第一个标准流父标签为基准。
.ttt
{
display :block block; /* 将行级元素变成块级元素 */
position :relative ; /* 相对定位,其他的盒子相对于该盒子原来的位置不变 */
position :absolute ; /* 绝对定位,脱离标准流,包含该盒子的更外一层盒子定位,
现在是绝对与body定位 */
top :20px;
}