1、块级元素

  A:特点:

    A.1默认显示在父标签的左上角

    A.2块级元素默认占满一行(占满整个文档流)

  B:常见的块级元素

    P   h1--h6   ul  li    ol  li   div  hr    table

2、行内元素(内联元素)

   A:常见的=行内元素有

    a  span  img   input

   B:行内元素的特点

    B.1 大小受到文字区域影响,不受width  height 影响

    B.2 行内元素不会单独占满一行

3、 行内元素和块级元素相互转换

  A:  行内元素转换成块级元素    display:block;

  B:  块级元素转换成行内元素    display:inline;

4、padding

  A: padding 是内边距,结果是撑开外框相应的宽度

   A.1 padding 10px 20px 30px 40px ; 表示撑开的顺序是   上10    右20  下30   左40

   A.2 padding 10px 20px 30px ;  表示撑开的顺序是  上10    左右20   下30

   A.3 padding 10PX 20PX ;    表示撑开的顺序是   上下10   左右20

   A.4 padding 10PX ;    表示撑开的是四周各10

5、margin

  A: margin  是外边框的距离,

6、在边框大小固定之后增加了 Padding ,而后又改变原来边框大小时,则是对于DIV right  和 bottom 操作,改变的是右边和下边的距离。

7、padding的各种情况,行内元素是支持的,margin行内元素只支持左右,不支持上和下。

8、定位(绝对定位、相对定位)

  A:绝对定位 position:absolute

   A.1  当位置设置为绝对定位之后,脱离文档流,不会单独占满一行,不受float 影响

   A.2  当设置为绝对定位后,元素的方位收到窗体的top left right bottom 影响。

  B: 相对定位 positon:relative

   B.1 当设置为相对定位时候没有脱离文档流,float 对其有影响

   B.2 当设置为相对定位时候,方位是相对于元素父标签;由于标签没有脱离文档流所以它是占着位置

  C:固定 positon:fixed

   C.1 设置固定之后,DIV 不受float影响,会固定在设定的位置不变

    

#d1  /*这个DIV则紧紧贴在右下角*/
{
width:200px;
height:200px;
border:1px # solid;
position:fixed;
 right:0px;
 bottom:0px; 
}

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922的更多相关文章

  1. css position 和 块级/行内元素解释

    一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保 ...

  2. 块级&行内元素总结

    一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的 ...

  3. CSS中的行内元素和块级元素

    我们在构造页面时,会发现有的元素是上下排列的,而有的则是横向排列的,这是为啥子呢   看看上图,我们也没给他设置啥子属性咋就不一样了,其实是因为每个元素都有默认的 display 属性,比如 div ...

  4. css中的行内元素和块级元素总结

    块级元素 <address>,  <button>,  <caption>,  <dd>,  <del>,  <div>,  & ...

  5. 块级&行内(内联)元素

    行内元素列表 <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的 ...

  6. CSS - flex使行内元素快速对齐

    div{ display:flex; alian-items:center; //使垂直对齐 justify-content:center //使水平对齐 }

  7. css笔记12:块元素和行内元素

    1.概念: 行内元素:又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的内联元素有<span><a> 块元素:块元素一般都是从新行开始,可容纳文本,其他内联元素和其他块 ...

  8. CSS块元素、行内元素、行内块元素的转换

    一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...

  9. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

随机推荐

  1. 批处理备份和恢复mysql数据库

    备份 set "Ymd=%date:~,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%%time:~6,2%" md "D: ...

  2. Ajax 技术原理(转)

    Ajax 技术原理 2010-01-04 原文出处:http://www.nowamagic.net/ajax/ajax_AjaxPrinciple.php 在写这篇文章之前,曾经写过一篇关于AJAX ...

  3. UCOS 请求任务删除函数 及其应用

    有时候,如果任务A拥有内存缓冲区或信号量之类的资源,而任务B想删除该任务,这些资源就可能由于没被释放而丢失.在这种情况下,用户可以想法子让拥有这些资源的任务在使用完资源后,先释放资源,再删除自己.用户 ...

  4. oldboy第四天学习

    一.感觉上课没有太多的知识.也可以去理解.但是作业太难了... 二.hash() #python里面的哈希类型是在一个程序中不变,如果换了python 哈希是不#一样的. #字典为什么快,因为他把字典 ...

  5. UICollectionView 讲解-备

    什么是UICollectionView UICollectionView是一种新的数据展示方式,简单来说可以把他理解成多列的UITableView(请一定注意这是UICollectionView的最最 ...

  6. notes: the architecture of GDB

    1. gdb structure at the largest scale,GDB can be said to have two sides to it:1. The "symbol si ...

  7. Spring 定时任务之 @Scheduled cron表达式

    一个基于Spring boot的一个demo: Java配置中开户对Scheduled的支持 import org.springframework.context.annotation.Configu ...

  8. iOS越狱开发手记 - iOS9.3 dyld_decache不能提取arm64的dyld的解决方法

    参考以下文章 http://iosre.com/t/when-dyld-decache-fails-on-dyld-shared-cache-arm64-dsc-extractor-saves-our ...

  9. 理解JavaScript中的事件处理 阻止冒泡event.stopPropagation();

    原文地址:http://www.cnblogs.com/binyong/articles/1750263.html 这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时 ...

  10. 你应该了解的 7个Linux ls 命令技巧

    在前面我们系列报道的两篇文章中,我们已经涵盖了关于‘ls’命令的绝大多数内容.本文时‘ls命令’系列的最后一部分.如果你还没有读过该系列的其它两篇文章,你可以访问下面的链接. 15 个‘ls’命令的面 ...