第九章 CSS 构造模型学习吧

小秋同学 11-01 18:24:29 学习园地
摘要: 今天开始CSS的构造模型,今天的课程推荐大家先看看第四章 CSS 边框border与边界padding和margin和第五章 CSS 区块、浮动、定位、溢出、滚动条,看过这2章后可以更好的理解下面内容,大家可以把下面代码复制带页面摘要: 今天开始CSS的构造模型,今天的课程推荐大家先看看第四章 CSS 边框border与边界padding和margin和第五章 CSS 区块、浮动、定位、溢出、滚动条,看过这2章后可以更好的理解下面内容,大家可以把下面代码复制带页面

今天开始CSS的构造模型,今天的课程推荐大家先看看第四章 CSS 边框border与边界padding和margin和第五章 CSS 区块、浮动、定位、溢出、滚动条,看过这2章后可以更好的理解下面内容,大家可以把下面代码复制带页面中查看效果。
第九章 CSS 构造模型学习吧(图1)一、div
部分(division)---<div>元素,经常以div 形式引用,是XHTML 元素,用于定义XHTML 文件中的区域。

1、添加div

  1. <div>

  2. <p>This is our content area.</p>

  3. </div>

复制代码

给div 添加一个id

  1. <div id=”container”>

  2. <p>This is our content area.</p>

  3. </div>

  4. #container {

  5. Padding: 20px;

  6. Border:1px solid #000;

  7. Background:#ccc;

  8. }

复制代码

2、添加子div

  1. <div id=”container”>

  2. <p>This is our content area.</p>

  3. <div class=”box”>

  4. <p>I’m in a box!</p>

  5. </div>

  6. <div class=”box”>

  7. <p>I’m also in a box!</p>

  8. </div>

  9. </div>

  10. .box {

  11. margin: 10px;

  12. padding: 20px;

  13. border: 1px solid #000;

  14. }

复制代码

3、div 和上下文选择器

  1. .box p {Color: #333;}

  2. #container p {Color: #333;}

复制代码

二、边距

1、外边距(margin)

外边距声明:

  1. #container {

  2. Margin:-top: 20px;

  3. Margin-left: auto;

  4. Margin-right: auto;

  5. Margin-bottom; 20px;

  6. Width: 300px;

  7. Border: 1px solid #333;

  8. Padding: #ccc;

  9. }

  10. #container {

  11. Margin: 20px auto 1em auto; /*上,右,下,左*/

  12. }

复制代码

用margin:auto 居中

  1. Body {Text-align: center;}

  2. #container {

  3. Width: 400px;

  4. Margin: 10px auto 10px auto;

  5. Padding: 20px;

  6. Background: #ccc;

  7. Text-align: left;

  8. }

复制代码

2、内边距(padding)

  1. #container {

  2. Padding-top: 20px;

  3. Padding-left: 10%;

  4. Padding-right: 1em;

  5. Padding-bottom: 0;

  6. Background: #ccc;

  7. }

复制代码

3、外边距,内边距和主体

  1. Body {

  2. Margin: 0;

  3. Padding: 0;

  4. }

复制代码

三、边框

Border-style (边框样式):None(无边框)、dotted(点线)、dashed(虚线)、Solid(实线)、double(双线)、groove(凹槽)、ridge(凸槽)、Inset(凹边)、outset(凸边)
/*上右下左*/

  1. Border-style: solid dotted inset outset;

  2. Border-width(长度)

  3. Border-top-width

  4. Border-right-width

  5. Border-bottom-width

  6. Borer-left-width

  7. Border-color

  8. Border

  9. Border-top

  10. Border-right

  11. Border-bottom

  12. Border-left

复制代码

Border(四周)Border-top(上)…

四、定位

P,h1 和div 等成为块级元素。意思是这些元素显示为一块内容,即”块框”。与之相反,strong 和span 等元素称为行内元素,即”行内框”。

1、相对定位

  1. #myBox {

  2. Position: relative;

  3. Top: 20px;

  4. Left: 20px;

  5. }

复制代码

2、绝对定位

  1. #myBox {

  2. Position:absolute;

  3. Top: 20px;

  4. Left: 20px;

  5. }

复制代码

五、浮动

  1. .news img {

  2. Float: left;

  3. }

  4. .news p {

  5. Float: right;

  6. }

复制代码

更多请查看:15天学习DIV+CSS教程


原贴: http://www.zb7.com//thread-7613-1-1.html

文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/839.html发布于 11-01 18:24:29
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享
加入收藏

发表评论
加载中~