CSS核心内容
来源:互联网 发布:社交软件的英文单词 编辑:程序博客网 时间:2024/06/06 14:28
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; }
- CSS核心内容
- 牛腩之CSS核心内容
- CSS核心内容整理
- 【牛腩】-css核心内容
- CSS核心内容定位和浮动
- CSS核心内容整理 - (中) css学习
- CSS网页布局的核心内容:CSS盒模型
- HTML+CSS入门笔记二之HTML+CSS核心内容
- CSS核心内容-标准流、盒子模型、浮动、定位
- CSS核心内容-标准流、盒子模型、浮动、定位
- spring 核心内容
- zigbee核心内容
- 项目管理核心内容
- 搜索引擎的核心内容
- AJAX 核心内容精髓
- shell编程的核心内容
- ERP的核心内容
- s2sh分页(spring)核心内容
- TAO 中间件
- 影响项目进度的几大因素
- 开学心得
- C#设计模式之6——原型模式
- c++中const的作用
- CSS核心内容
- TAO 中间件2
- 验证用户名的格式
- 链表的创建和遍历算法
- java日期获取前一天和后一天
- 对纹理个参数的分析
- 网络防火墙开发二三事
- Netcat使用方法
- 结构体对齐