• 标签嵌套的规则 定位元素 高度自适应 伪元素


    标签嵌套使用:

    1,块状元素一般作为父元素使用

    2,H标题标签不能相互嵌套

    3,P标签里面别嵌套h1-h6 div等块状元素,尽量套内联元素

    4,P标签之间别相互嵌套

    置换元素或非置换元素

    置换元素:

    标签在页面中的显示状态,通过当前标签里面属性来决定,置换元素在页面显示的过程中会生成一个框这个框能添加大小

    非置换元素:只要不是置换元素就是非置换元素

    定位:

    第一步:怎么通知html的元素进行位置的变化

    属性:position:;定位元素

    作用:检索或者设置元素的定位方式

    第二步:确定参照物

    position的属性值们

    第三部:坐标

    left:;

    right:;

    top:;

    bottom:;

    position的属性值:

    第一个定位:静态定位

    positionstatic是默认值

    第二个定位:绝对定位:

    positionabsoulte

    绝对定位的参照物:

    定位的参照物是“已经有定位的父元素”如果一个元素或者是父元素都没有定位,按照整个文档来定位

    绝对定位的特点:

    绝对定位是不占据空间的,可以脱离文档流

    第三个定位:相对定位

    positionrelative

    A,相对定位参照物是自身默认的位置

    B,相对定位的特点,相对定位是占据空间不会破坏文档流

    1,如果一个元素添加了positionabsolutemargin0 auto;还有浮动不起作用

    2,相对定位positionrelative;不会对浮动margin0 auto;没有影响

     

    1,给要做定位的元素的父元素添加:positionrelative;形成参照物

    2,给要做定位的元素添加positionabsolute

     

    定位元素的层次关系和html结构和书写顺序有关,后写的层次比较高

    控制定位元素的层次关系:

    z-index:;

    后面的属性值为一个数字,数值越大层次顺醋越高,z-index默认值是auto

     

    第四个定位:固定定位

    positionfixed

    A,固定定位参照物是浏览器窗口

    B,固定定位脱离文档流,不占据空间

     

    怎么让元素在窗口的正中间显示:

    第一个方法:

    positionfixed

    left50%

    height50%

    magin-left:宽度的一半;

    margin-top:高度的一半;

    第二种方法:

    positionfixed

    left0

    right0

    top0

    bottom0

    marginauto

    第三种方法:粘性定位

    positionsticky

    粘性定位是relativefixed的结合体

    执行逻辑:

    如果一个页面有滚动条,当前添加粘性定位的元素如果在页面内部执行的定位

     

    锚点:就是超链接的一种,能实现在一个页面内,不同位置的跳转

    锚点的使用:

    <标签 id=”box”></标签>

    <a href=”#box”></a>

    效果:让对应的id名称的标签在浏览器最顶端显示

    z-index调整定位元素的层叠顺序

     

    Pc端宽高自适应:使用项目内部板块,更加灵活,能适应不同的pc端设备。适应不同的pc端分辨路,能适应各种数据渲染

    width height设置方法及事项:

    宽度自适应:

    1,块状元素当宽度不去设置的时候,或者是设置width100%;跟随父元素宽度

    高度自适应第一种情况:

    height不去设置或者heightauto;元素的高度是被内容撑开的 但是height不去设置或者是auto存在问题:当内容极少 容器高度不会被撑开,影响版式布局  怎么解决当内容没有或内容极度减少 让容器保持一个最小高度

     

    高度自适应第一种情况需求:

    A, 当内容增加要内容撑开容器的高度

    B, 当内容极少要让容器保持最小高度

     

    最小高度的设置:属性:min-height:;

    min-height:;现代高版本浏览器都能支出:但是低版本(ie6)不认min-height

     

    补充:过滤器(兼容范畴)

    1,ie6过滤器(下划线过滤器)

    _属性:属性值;

    只有ie6能识别带有下划线的属性

    2,ie6不能识别!Important

    Ie6不认为!Important给属性增加权重

     

    解决高度塌陷:

    1第一个方法:

    给父元素添加overflowhidden

    原理overflowhidden

    触发了布局逻辑BFC

    BFC规定:计算BFC高度的时候,浮动元素也参与计算

    弊端:overflowhidden;本身使用溢出隐藏会隐藏掉一些定位溢出的内容

     

    第二个方法:(闭合浮动)

    在浮动元素下方添加同级元素并且给当前元素添加的元素设置样式clearboth

    clear:;清除浮动

    属性值:

    left  清除左浮动

    right 清除右浮动

    both 清除二侧的浮动

    忽略上方浮动元素预留出来的空间

    弊端:重复添加空的元素,会造成代码冗余,形成负担

     

    第三个方法:(万能清除法)

    出现高度坍塌的元素:after{

    content” ”;

    clearboth

    height0

    overflowhidden

    displayblock

    visibilityhidden

    }

    或者clear-fixafter{}  要解决高度坍塌的元素就起个classclear-fix就行了

     

    伪对象(伪元素)

    1,::after{

    content” ”;

    }

    在某个容器内容的最后添加conter里面的内容

    content可以是文本还可以是图片

     

    2,::before{

    content” ”;

    }

    在某个容器的前面添加content里面的内容

     

    3,first-letter{

    控制第一个字符的样式

    }

     

    4,first-line{

    控制第一行文字的样式

    }

     

    displaynone; 隐藏元素,并且不占据空间

    visibilityhidden; 隐藏元素,占据空间

     

    如果想实现让一个元素在窗口平铺:html body必须要有高度100%

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    oracle 10g 免安装客户端在windows下配置
    sql2005 sa密码
    使用windows live writer 有感
    windows xp SNMP安装包提取
    汉化groove2007
    迁移SQL server 2005 Reporting Services到SQL server 2008 Reporting Services全程截图操作指南
    foxmail 6在使用中的问题
    AGPM客户端连接不上服务器解决一例
    SpringSource Tool Suite add CloudFoundry service
    Java 之 SWing
  • 原文地址:https://www.cnblogs.com/ht955/p/13777138.html
Copyright © 2020-2023  润新知