css定位和浮动

时间:2022-09-07 21:51:08

1.css中一切元素皆为框。div、p、h1等为块框;span、strong等为行内框,(在文本中每一行会被自动默认为行框,行框和行内框是不一样的概念)。通过display可以改变框的类型,行内框通过display:block可以变为块框,块框通过display:inline-block可以变为行内框,display:inline可以变为内联元素,diplay:none可以变的没有框不显示不占文档空间()。

2.css机制有3种:普通流、浮动和绝对定位。

3.css位置有5种:

  • static:静态。元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
  • relartive:相对定位。相对自己原有的位置进行定位,位置变化后,原框仍在文本流中占有空间。
  • absolute:绝对定位。相对以定位了(级级上寻)的父框进行定位,位置变化后,原框不在文本流中站有空间。
  • inherit:继承定位。继承父框的定位属性。任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
  • fixed:固定定位。相对于浏览器屏幕视窗进行定位。

4.

  • 块内元素的溢出用overflow来控制:auto,scroll,hidden。
  • 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。clip 属性剪裁绝对定位元素。clip:rect(0px 50px 200px 0px)。
  • z-index 属性设置元素(定位元素上奏效)的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
  • clear 属性规定元素的哪一侧不允许其他浮动元素。
  • 设置元素的垂直对齐方式。vertical-align 定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
    描述
    baseline 默认。元素放置在父元素的基线上。
    sub 垂直对齐文本的下标。
    super 垂直对齐文本的上标
    top 把元素的顶端与行中最高元素的顶端对齐
    text-top 把元素的顶端与父元素字体的顶端对齐
    middle 把此元素放置在父元素的中部。
    bottom 把元素的顶端与行中最低的元素的顶端对齐。
    text-bottom 把元素的底端与父元素字体的底端对齐。
    length  
    % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
    inherit 规定应该从父元素继承 vertical-align 属性的值。

 附:

1.内联元素和块级元素:

内联元素是不可以控制宽高,margin等,在同一行显示,不换行;
块级元素可以控制宽高,margin等,并且会换行。
inline:元素会被显示为内联元素,不换行。
block:元素会被显示为块元素,换行。
inline-block:即使元素以块级的形式出现在行内。IE6不能用。

2.块框、行内框、行框、无名块框

  • 块框:div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。
  • 无名块框:但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待。在这种情况下,这个框称为无名块框。块级元素的文本行也会发生类似的情况。无法直接对无名块或行框应用样式,因为没有可以应用样式的地方(注意,行框和行内框是两个概念)。
  • 行内框:span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
  • 行框:行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

css定位和浮动的更多相关文章

  1. CSS:CSS定位和浮动

    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...

  2. CSS定位与浮动

    定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.显然,这个功能非常强大,也很让人吃惊.要知道,用户代理对 CSS2 中定位 ...

  3. css定位之浮动定位

    浮动定位可以是原本垂直排列的块级元素,变成水平排列 1浮动元素 float:left 或者float:right  这些浮动会直接碰到父容器的边界为止. 2设置了浮动的元素,元素会脱离标准文档流中,但 ...

  4. CSS定位——浮动定位

    CSS定位机制Ⅱ——浮动定位 float属性:进行浮动定位   left,right clear属性:清除浮动   left,right,both  ㈠  float属性 1.概述 ⑴div实现横向多 ...

  5. CSS 定位

    一.CSS 定位和浮动   它们代替了多年来的表格布局.   定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置.   浮动在 CSS1 中被首次提出.浮动不完全是定位, ...

  6. 【CSS】 CSS 定位

    css 定位和浮动 *******本章大量内容copy自w3school********* 定位对于html界面还是很重要的,因为定位会直接影响到用户的视图.对于css而言,定位也比较灵活. 浮动是一 ...

  7. CSS 定位 (Positioning) 实例

    CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...

  8. CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...

  9. CSS定位(Positioning)

    CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 一切皆为框 div.h1 或 ...

随机推荐

  1. java并发编程(十五)内存可见两种方式 加锁和volatile

    1.volatile变量是一种稍弱的同步机制在访问volatile变量时不会执行加锁操作,因此也就不会使执行线程阻塞,因此volatile变量是一种比synchronized关键字更轻量级的同步机制. ...

  2. android开发之存储数据

    android数据存储之SharedPreferences 一:SharedPreferences SharedPreferences是Android平台上一个轻量级的存储类,用来保存应用的一些常用配 ...

  3. fdatool 设计IIR滤波器

    [B,A] = sos2tf(SOS);K = cumprod(G);k=K(end); [y_out] = filter(B, A, win_up_data, []) .*k;

  4. .Net MVC+bootstrap Table学习

    一.效果展示 二.使用方法 1).相关css和js的引用 <link href="~/Themes/Bootstrap/css/bootstrap.css" rel=&quo ...

  5. &lbrack;问题2014A02&rsqb; 复旦高等代数 I(14级)每周一题(第四教学周)

    [问题2014A02]  求下列 \(n\) 阶行列式的值, 其中 \(a_i\neq 0\,(i=1,2,\cdots,n)\): \[ |A|=\begin{vmatrix} 0 & a_ ...

  6. fir&period;im Weekly - 新开发时代,每个人都在创造

    七夕纷纷扰扰地过去了,身边的程序员们依旧安静从容地写代码.可是满屏幕的"对象",不如身边一个对象(。・`ω´・)- 闲话说完,这周像往期一样为大家收集了一些优秀的 GitHub 资 ...

  7. 软件工程小组讨论设计NABCD

    项目名称:失物招领平台 项目工作小组:冰淇淋队 项目简介:目前同学们丢了东西都qq空间转发或者某个特定的qq群发消息,qq空间转发浪费了别人的时间,qq群发消息也浪费了别人的时间.怎么样才能浪费最少的 ...

  8. Django之--通过MVC架构的html模板展示Hello World&excl;

    上一篇:Django之--网页展示Hello World! 初步说明了如何使用Django来显示hello world,本文略微进阶下使用html模板来展示hello world~ 首先在mysite ...

  9. C&plus;&plus;学习(五)(C语言部分)之 运算符

    运算符学习时的笔记(其实也没什么用,留着给自己看的) 运算符 用来对数据运算的符号 优先级 3+4*5+6 先乘除 然后加减 运算符优先级高就先算 40多个运算符 15层优先级 不需要背 1.查表 2 ...

  10. 十、jdk工具之Jdb命令&lpar;The Java Debugger&rpar;

    目录 一.jdk工具之jps(JVM Process Status Tools)命令使用 二.jdk命令之javah命令(C Header and Stub File Generator) 三.jdk ...