zoukankan      html  css  js  c++  java
  • 标签嵌套的规则 定位元素 高度自适应 伪元素

    标签嵌套使用:

    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%

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    The type or namespace name 'Windows' does not exist in the namespace....
    WCF 事件处理
    ASP.Net程序在IIS7的部署问题
    Oracle Package的全局变量与Session
    [ASP.NET]C1Webgrid中实现编辑和计算
    EXCEL妙用:选取单元格时改变整行的背景色
    [转]22 个精美的网站管理后台模板推荐
    [转]C#开发Active控件(二)
    Oracle获取时间差的技巧
    C#里的Random
  • 原文地址:https://www.cnblogs.com/ht955/p/13777138.html
Copyright © 2011-2022 走看看