• 布局属性


    学习布局所需要的到属性。

    1、 display

    属性用来设置元素的显示方式。

    block 块对象指的是元素显示为一个方块,默认显示状态下将占据整行,其它的元素只能另起一行显示。

    inline 行间对象与block刚好相反,它允许其它元素在同一行显示。

    none 隐藏对象

    div{display:block}

    2、float

    用来控制元素是否浮动显示。

    left   向左浮动

    right 向右浮动

    none  不浮动

    浮动的时候元素的显示属性也变化了 变为 “行内元素”

    div{ float:left;}

    3、position

    position : static | absolute | fixed | relative

    static : 无定位,默认值

    absolute:绝对定位

    relative : 相对定位

    fixed:固定定位

    absolute

    说明: 脱离文档流。

    通过 top,bottom,left,right 定位。

    如果父元素 position 为 static 时,将以body坐标原点进行定位。

    如果父元素 position 为 relative 时,将以父元素进行定位。

    div { position:absolute; left:100px; top:100px;}

    总结:

    块的特征

    1、默认独占一行

    2、没有宽度时,默认撑满一排

    3、支持所有css命令

    内嵌(内联、内行)的特征

    1、同排可以继续跟同类的标签

    2、内容撑开宽度

    3、不支持宽高

    4、不支持上下的margin

    5、代码换行被解析           //就是相邻的两个内联之间有个空白处

    inline-block

    1、块在一行显示

    2、行内属性标签支持宽高

    3、没有宽高的时候内容撑开宽度

    4、代码换行被解析             //就是相邻的两个内联之间有个空白处

    浮动的定义:使用元素在脱离文档流,按照指定方向发生移动,遇到父级边界或相邻的浮动元素停下来。

    浮动的走向是先后顺序,如给3个div内分别加1、2、3,左浮动是1、2、3;

    右浮动是3、2、1;因为1先浮动后到2,再到3 ;

    当使用p标签时,p的文字会围绕浮动元素,而不是重合,这个是很重要的知识,所以这也达到文字围绕的目的。

    浏览器的窗口缩小,字体还是围绕浮动元素,但这时内容变成多段围绕,就像响应式。

    对clear属性的设置要放到文字所在的盒子里,例如一个p段落的css设置中,而不要放到对浮动盒子的设置里面。

    经常有初学者没有搞懂原理,误以为在对某个盒子设置了float属性以后,要消除它对外面的文字的影响,就要在

    它的css样式增加一条clear,其实这是没有用的。

    我们要清除的元素相邻的浮动元素的浮动,让浮动影响不了它。

    清除浮动,clear:left|right|both|none|inherit

    使元素的某个方向上不能浮动。

    清除浮动就是浮动元素在浮动时脱离文档流,而文档流的元素会叠到浮动元素下面,

    那么浮动元素是那个方向浮动,你就清除那个方向的浮动,就可以不叠在它之下了,

    这个经常使用到撑开父级元素中,因为浮动后父级元素会没有浮动元素的高,这样

    父级就没有高了,对于某些操作会很麻烦。

    子元素有浮动,父元素就包不住它。

    清除浮动的方法:

    1、加高(扩展性不好)

    2、给父级加浮动,但margin左右自动失效(float bad!)

    3、inline-block清除浮动(问题margin左右auto失效)

    4、空标签清除浮动(ie最小高度19px;(解决后IE6还有2px的偏差))

    5、br清除浮动,br标签上有个属性clear(影响w3c标准,不符合工作要求)

    6、:after伪类清除浮动

    代码:

    .clearfix:after{ content:"";  display:block;   clear:both;}
    
     .clearfix{*zoom:1;}  为ie6、ie7兼容解决的。

    7、overflow:hidden;清除浮动,也会出现问题,如不在这个父级范围内的内容,

    就无法显示。

    relative

    position:relative 相对定位

    a、不影响元素本身的特性;

    b、不使元素脱离文档流(元素移动之后原始位置会被保留)

    c、如果没有定位偏移量,对元素本身没有任何影响

    d、提升层级

    定位元素位置控制

    top、right、bottom、left定位元素偏移量

    absolute:

    a、使元素完全脱离文档流

    b、使内嵌支持宽高

    c、块属性标签内容撑开宽度

    d、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于

    document发生偏移

    e、相对定位一般都是配合绝对定位元素使用

    f、提升层级


    z-index:[number];定位层级

    a、定位元素默认后者层级高于前者

    b、建议在兄弟标签之间比较层级

    fixed 固定定位

    与绝对定位的特性基本一致,差别是始终相对整个文档进行定位。

    问题:IE6不支持固定定位;

    定位其他值:

    static 默认值

    inherit 从父元素继承定位属性的值(火狐不兼容)

  • 相关阅读:
    d3.js--04(enter和exit)
    d3.js--03(增删改查)
    d3.js--02(data和datum原理)
    css文件和js文件后面带一个问号----2015-1103
    json_decode()和json_encode()区别----2015-0929
    随记--更新于20150925
    个人火狐插件汇总--20150924
    『jQuery』.html(),.text()和.val()的概述及使用--2015-08-11
    矩阵求导
    傅里叶变换
  • 原文地址:https://www.cnblogs.com/zhangzhicheng/p/5777487.html
Copyright © 2020-2023  润新知