`
chenhua_1984
  • 浏览: 1235232 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

CSS样式学习笔记之二:定位

阅读更多

   1 P ,H1,div等元素称为块元素,就是说这些元素显示为一块内容。而Strong,Span则是行内元素,应为他们的内容显示在行中,即行内框。

   2可以使用display属性改变框的类型,通过将display属性设置为block,可以让行内元素变的像块一样,也可以通过将dispay属性设置为NONE,让生成的元素没有框。

   3CSS样式中有3种定位机制,普通流,浮动,绝对定位。默认为普通流定位。

   <div id="myBox">
            some text
            <p>Some more text</p>
        </div>

     some会被当作段落对待,下面显示Some more text的时候会自动换行显示。

   A相对定位:

   #myBox{
    position:relative ;
    left:500px;
    top:20px;

   }

   B绝对定位:

   
   #branding{
    width:600px;
    height:50px;
    position:relative;
   }

   #branding .tel{
    position:absolute ;
    right:10px;
    bottom:10px;
    text-align:left;

   }

   C浮动定位:

   .news{
      background-color:gray;
      border: solid 1px black;
      float:left;

      }
   .news img{
      float:left;
      }
   .news p{
      float:right;
     }

  .clear{
    clear:both;
   }

 

1
0
分享到:
评论

相关推荐

    CSS_study:CSS3学习笔记和代码

    CSS3狂神说Java系列-个人学习笔记CSS简介前端3大部分Html - 结构CSS - 表现,表皮JavaScript - 动态交互如何学习CSS是什么CSS怎么用-快速入门CSS选择器(如何定位,重难点)美化网页(文字,阴影,超链接,列表,...

    css入门笔记

    3.CSS样式特征 1.继承性 必须是父子(有层叠嵌套的关系)结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ ...

    css网站布局实录学习笔记第三部分网页布局与定位

    第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲。对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位。 3.1.1 div是什么 div是XHTML...

    HTML-CSS-JS:关于前端的一些技巧

    CSS嵌入HTML的第二种方式3-CSS嵌入HTML的第三种方式4-CSS嵌入HTML的第三种方式(外部的.CSS文件)5-display样式(隐藏列表)6-内补丁和外补丁7-去掉列表前边的标记8-定位样式position9-文本装饰样式10-浮动窗口11-鼠标...

    CSS学习之CSS网页制作的10个技巧

    学习ccs和制作网站当中遇到的一些疑问,整理的一些笔记. 1.marquee 滚动样式是IE独有的,FF不支持 2.css中的filter效果是IE的私有属性,同样所有的非IE浏览器都不认识的. 3.text-transform:capitalize 强制第一个字母...

    css html 新手入门 静态页面布局

     我们知道,无论是导入图片、链接还是CSS样式,都存在导入路径的问题。路径分为相对路径、绝对路径和远程路径,我们一般都使用的是相对路径。主要是有时候分不清./、 …/、/的区别。下面进行说明。

    重新整理了一遍,花了小半月终于将基础Html+css系统的学完,期间的学习笔记+中文手册都在这,分享..

    十三定位(position) 十四.overflow 溢出 十五.鼠标样式cursor 十六.溢出的文字省略号显示 一.认识WEB。 网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。 2....

    fedbook:前端修炼小册(Wenyuan's frontend developer book. Including HTML, CSS, JavaScript, etc.)

    小册以点亮技能树为主,系统梳理前端开发及其周边知识点,作为学习笔记和复习资料。 目录 编程进阶 手写系列 面试相关 计划 支持 版权信息 鸣谢 文章 持续更新,学习不止。 风格指南 文档规范 代码风格 HTML 规范 ...

    【JQuery学习笔记day11】HTML 布局

    CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。 虽然我们可以使用HTML table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的 – 表格不是布局工具。 使用 元素 元素是用于...

    asp.net知识库

    ASP.NET 2.0使用Web Part创建应用程序之二(共二) 体验 .net2.0 的优雅(2) -- ASP.net 主题和皮肤 NET2.0系列介绍(一).NET 2.0 中Web 应用程序主题的切换 ASP.NET 2.0 中Web 应用程序主题的切换 2.0正式版中...

    fylo-dark-theme-landing-page-created-by-austinet

    这是的解决方案。 前端导师挑战通过构建现实项目帮助您提高编码技能。... 我习惯于浮动和 CSS Box 模型来定位我的内容和样式我的布局。 这要容易得多,尤其是创建响应式网站。 &lt; div class =" container

Global site tag (gtag.js) - Google Analytics