zoukankan      html  css  js  c++  java
  • 定位 盒模型 浮动 css优先级 伪类伪元素选择器---未完成

    定位:

    fixed是有目标的定位,绝对定位。而absolute是没有目标的绝对定位。relative相对于我原有的位置的定位。
    一个元素对他自己设置了 position:relative; top:0; right:0; bottom:0; left:0; 相当于自己把自己当做了原点,并没有位置移动(层级提升)和改变自身属性(即使设置了偏移量相对定位的本身也没有脱离文档流,它本身仍然会在以前的位置,之后的元素并不会因此出现位置移动)(float就是隐性的把内联元素转化为块元素,这是对内的特性就是有物理特性,但是他不占据一行。对外是内联元素的属性。他有个会影响兄弟元素。相当于:display:inline-block;),但是对他的子元素形成了定位目标  。子元素就可以设置position:absolutely。
    一个元素,如果要进行 position:absolutely 他必须要有进行绝对定位的目标(*参见后文包含块),进行绝对定位后,元素脱离文档流,之前的位置就不见了
    z-index就是网页的z轴,用相对定位绝对定位把两个层重叠在一起,z-index的值越大,就越靠上,注意,z-index没有单位,z-index:99;这样写就够了。
    一、包含块简单说就是定位参考框或者定位坐标参考系,元素一旦定义了定位显示(相对、绝对、固定)都具有包含块性质,它所包含的定位元素都将以该包含块为坐标系进行定位和调整。
    二、包含块是视觉格式化模型的一个重要概念,它与框模型类似,也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。
    三、原理:一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的,这个长方形就被称之为元素的 containing block。一个元素的 containing block 按以下方式定义:
    1、用户代理选择根元素作为包含块(称之为初始 containing block)。
    2、对于其它元素,除非元素使用的是绝对位置,包含块由最近的块级祖先元素盒子的内容边界组成。
    3、如果元素有属性 'position:fixed',包含块由视口建立。
    4、如果元素有属性 'position:absolute',containing block 由最近的 position 不是 static 的祖先建立,按下面的步骤:
    a、如果祖先是块级元素,由祖先的 padding edge 形成。
    b、如果祖先是内联元素,取决于祖先的 direction 属性。
    ⑴如果 direction 是 ltr(左到右),祖先产生的第一个盒子的上、左内容边界是包含块的上方和左方,祖先的最后一个盒子的下、右内容边界是包含块的下方和右方。
    ⑵如果 direction 是 rtl(右到左),祖先产生的第一个盒子的上、右内容边界是包含块的上方和右方,祖先的最后一个盒子的下、左内容边界是包含块的下方和左方。
    如果没有祖先,根元素盒子的内容边界确定为包含块。

    盒模型:margin border padding 
     
    margin
    border:CSS3 有用的新方式:border-radius:50%/xxpx,可以分着写 比如 border-top-left-radius:50%; box-shadow:水平方向 垂直方向 模糊程度 阴影尺寸 颜色 (inset); 设置多个的时候用“,”隔开 box-shadow:0 0 0 10px red , box-shadow:0 0 0 5px; 注意shadow为前压后,和普通css后压前不同。
    padding:通过设置背景了解背景也会在内边距的位置显示,而内容不会;行内元素没有上下!!!
    盒子大小 = border + padding + width/height
    盒子宽度 = 左border+左padding+width+右padding +右border
    盒子高度 = 上border+上padding+height+下padding+下border
     
    浮动:
    清除浮动方法
    0、overflow:hidden的原理说白了就是window里面创建了function
    1、在需要清除浮动元素的后面添加空div,使其clear:both;左右都不要有浮动元素(clear:left;clear:right;);
    2、伪元素清浮动
    选择器:{zoom:1;}元素缩放,数值为1,说明是正常显示;( 触发 IE下 haslayout,haslayout是IE渲染引擎组成部分;特定情况下运行,使元素根据自身内容计算宽高,做兼容。)
    选择器:after{ content:""; display:block; clear:both;}
    eg:  黑色的并没有在蓝色的旁边,所以W3C不同文档流没有可比性
     
    CSS优先级

    CSS的优先级
    内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pseudo-class)和属*(attribute)选择符 > 类别(type),伪对象(pseudo-element)
    解释:
    *内联样式(inline style):元素的style属*,比如 <div style="color:red;"></div> ,其中的color:red;就是内联样式
    *ID选择符:元素的id属*,比如 <div id="content"></div> 可以用ID选择符#content
    *类选择符:比如<div class="box"></div>,可以使用类选择符 .box
    *伪类(pseudo-class):最常见的是锚(a)伪类,比如a:link,a:visited.
    *属性选择符(attribute selectors):比如div[class=demo],含有class为demo的div元素
    *类别选择器(type selector):HTML标签选择,比如div .demo,div元素下含有class为demo的元素
    *伪对象选择器(pseudo-element selector):比如div:first-letter,div元素下的第一个单词。

    *多重CSS样式定义,属性追加重复最后优先原则

     伪类,伪元素区别关系

    • CSS 伪类用于向某些选择器添加特殊的效果。
    • CSS 伪元素用于将特殊的效果添加到某些选择器。

    伪类选择器

    a标签的四种伪类:

    a :link 未访问(默认)

    a :visited 访问过后(点击过后)

    a :hover 鼠标悬停(鼠标经过)

    a :active 链接激活(鼠标按下)

    注意:顺序不能打乱;

    伪类的原理:如果a标签里有一个class 和几个class属性,我们可以通过改变类,改变a标签的颜色或者状态,那么我么可以假定有那么一个类

      a:visited{color:red;}

      X:first-chlid{};

      X:nth-last-child(n)   选择器选的必须满足x和n同时满足

      eg:

      

     

  • 相关阅读:
    XML介绍
    JavaScript基础
    pygame模块参数汇总(python游戏编程)
    CSS3
    CSS( Cascading Style Sheets )简书
    HTML5
    用python进行应用程序自动化测试(uiautomation)
    HTML入门
    Selenium2 (python)
    C#快速入门
  • 原文地址:https://www.cnblogs.com/ziyuan-shanliangdehaohaizi/p/6559680.html
Copyright © 2011-2022 走看看