ife(7-9)

最新推荐文章于 2021-09-28 17:46:13 发布

N_ora

最新推荐文章于 2021-09-28 17:46:13 发布

阅读量121

点赞数

分类专栏：笔记文章标签：定位 css

本文链接：https://blog.csdn.net/qq_33359745/article/details/107556899

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一.定位元素
1.定位
absolute：相对于定位（定位不为static）的父元素定位，如果父元素均无定位，则以body为父元素；
fixed：相对浏览器定位；
relative：相对元素本身定位；
sticky：相对位置和固定定位的混合体：先是相对定位，等到滚动到一定的位置（top或者bottom）就会变成固定定位；

2.定位特点：
同级定位元素之间使用z-index设置级别；默认为0；如果父元素的z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方；如果父元素z-index失效（未定位或者使用默认值0），那么定位子元素的z-index设置生效，如果值小于父元素就被覆盖；

3.简单的tab切换：

    <style>
    *{
         margin: 0;
         padding: 0;
     }
    a{
        padding:20px 60px;
        color:#fff;
        background-color: #f00;
        text-decoration: none;
    }
    .con{
        position: fixed;
        text-align: center;
        background-color: #710d0a;
        width: 510px;
    }
    .active{
        background-color: #710d0a;
    }
    .con ul,.con ol{
        list-style:none;
        width: 100%;
    }
    .con li{
        float: left;
    }
    .con a{
        width:50px;
        display: inline-block;
    }
    ul::after{
        content: '';
        height: 0;
        visibility: hidden;
        display: block;
        clear: both;
        zoom:1;
        // 或者浮动父元素overflow:auto;zoom:1;
    }
        .panels{
            position: relative;
            width: 100%;
        }
    .panels > .panel{
        position: absolute;
        top:0;
        left: 0;
        height: 250px;
        background-color: #710d0a;
        color:#fff;
        padding:0 30px;
    }
    .panel:first-child{
        z-index: 1;
    }
        .panel h2{
            margin:20px 0;
        }
        .panel > p{
            text-align: left;
        }
    .panel li{
        line-height: 20px;
    }
    </style>
</head>
<body>
    <div class="con">
        <ul>
            <li><a href="#" class="active">Tab1</a></li>
            <li><a href="#">Tab2</a></li>
            <li><a href="#">Tab3</a></li>
        </ul>
        <div class="panels">
            <div class="panel">
                <h2>The first tab</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
            </div>
            <div class="panel">
                <h2>The second tab</h2>

                <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>

            </div>
            <div class="panel">
                <h2>The third tab</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>

                <ol>
                    <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
                    <li>Aliquam ut porttitor urna.</li>
                    <li>Nulla facilisi</li>
                </ol>
            </div>
        </div>
    </div>
    <script>
        // let panels = document.querySelector('.panels');
        // let ul = document.querySelector('ul');
        // let arr = [];
        // ul.addEventListener('click',clickfn);
        // function clickfn(e) {
        //     if(e.target.constructor === HTMLUListElement) return;
        //     for(let i =0;i<ul.children.length;i++){
        //         let el = ul.children[i];
        //         arr.push(el);
        //         removeClass(el.firstElementChild,'active');
        //     }
        //     addClass(e.target,'active');
        //     let index = arr.indexOf(e.target.parentNode);
        //     showPanel(index);
        // }
        // function removeClass(el,classname) {
        //     let classlist = el.className.split(/\s/g);
        //     let idx = classlist.indexOf(classname);
        //     if(idx > -1){
        //         classlist.splice(idx,1);
        //         if(!classlist.length){
        //             el.removeAttribute('class');
        //         }else{
        //             el.className = classlist.join(' ');
        //         }
        //     }
        // }
        // function addClass(el,classname) {
        //     if(!el.className){
        //         el.className = classname;
        //         return;
        //     }
        //     let classlist = el.className.split(/\s/g);
        //     let idx = classlist.indexOf(classname);
        //     if(idx > -1){
        //         return;
        //     }
        //     classlist.push(classname);
        //     el.className =(classlist.length===1)?classlist.join(''):classlist.join(' ');
        // }
        // function showPanel(index) {
        //     for(let i =0;i<panels.children.length;i++){
        //         panels.children[i].style.zIndex = '0';
        //     }
        //     panels.children[index].style.zIndex = '1';
        // }
        let panels = document.querySelector('.panels');
        let ul = document.querySelector('ul');
        let arr = [];
        ul.addEventListener('click',clickfn);
        function clickfn(e) {
            togglePanel(e.target)
        }
        function removeClass(el,classname) {
            let classlist = el.className.split(/\s/g);
            let idx = classlist.indexOf(classname);
            if(idx > -1){
                classlist.splice(idx,1);
                if(!classlist.length){
                    el.removeAttribute('class');
                }else{
                    el.className = classlist.join(' ');
                }
            }
        }
        function togglePanel(elem) {
            if(elem.constructor === HTMLUListElement) return;
            for(let i =0;i<ul.children.length;i++){
                let el = ul.children[i];
                el.index = i;
                // el.setAttribute('index',i);
                removeClass(el.firstElementChild,'active');
            }
            addClass(elem,'active');
            // let index = e.target.parentElement.getAttribute('index')
            let index = elem.parentElement.index;
            showPanel(index);
        }
        function addClass(el,classname) {
            if(!el.className){
                el.className = classname;
                return;
            }
            let classlist = el.className.split(/\s/g);
            let idx = classlist.indexOf(classname);
            if(idx > -1){
                return;
            }
            classlist.push(classname);
            el.className =(classlist.length===1)?classlist.join(''):classlist.join(' ');
        }
        function showPanel(index) {
            for(let i =0;i<panels.children.length;i++){
                panels.children[i].style.zIndex = '0';
            }
            panels.children[index].style.zIndex = '1';
        }
    </script>
    </body>

二，flex布局
详细链接：https://www.runoob.com/w3cnote/flex-grammar.html
如果有三个flex的行，要想让所有flex行中的每个flex项都有相同的距离，给每个flex项设置相同的margin-left和margin-right,并设置flex：1，在flex项中设置display：flex，justify-content：center，align-items：center可以让flex项中的元素或者文本居中。

// 父元素
.parent{
	display：flex;// display:inline-flex;
	flex-direction:column // row  row-reverse  column-reverse 设置主轴方向
	justify-content:center // 主轴居中排列
	flex-wrap:wrap // 换行 
	// flex-flow:row wrap  // 是flex-direction和flex-wrap的缩写
	align-items:center //stretch  center  flex-start flex-end 交叉轴居中排列  默认stretch，沿交叉轴延伸填充父容器，如果没有设定固定值，则跟最长的flex项一样长
}
.son{
	flex:200px; // 每个子元素最少宽度为200px   数字 表示占几份
	// flex:1 200px;每个flex项会先给出200px空间，剩余可用空间根据分配比例分享
	// flex:flex-grow flex-shrink flex-basis
	align-self:baseline;// 覆盖父元素的align-items
	order:1 //  所有的flex项默认为0  order值大的显示在更后面，可以用负值
}

三：内联块：
1.内联块之间产生距离：
1》使用font-size：0；
2》使用float；
3》使用block
2.使ie支持内联块：
zoom:1;// 触发IE的haslayout
display:inline-block;
*display:inline;

3.垂直居中几种方法：
1》flex布局

  justify-content：center；
  align-items:center；

2》行内块/行内元素

   text-align：center；
   line-height；

3》行内块元素

  // 父元素设置
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  // 子元素
  display:inline-block;

4》块元素

   margin:值 auto;

5》父元素固定高，块级子元素没有固定高

   //父元素设置
   display:table-cell;
   vertical-align:middle;

6》绝对/固定定位元素

   position：absolute；// fixed
   top：0；
   left：0；
   right：0；
   bottom：0；
   width:200px;
   margin:auto;
  ------------------------------
   positon：absolute
   left:50%;
   top:50%;
   transform:translate(-50%,-50%)；// margin-left

布局【固定宽度和不固定宽度】：
1.脱离文档流【float、position】+正常文档流【margin、padding】
2.脱离文档流【float】+脱离文档流【float】
3.flex
4.脱离文档流【float】+BFC【overflow等】

N_ora

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ife(7-9)

一.定位元素1.定位absolute：相对于定位（定位不为static）的父元素定位，如果父元素均无定位，则以body为父元素；fixed：相对浏览器定位；relative：相对元素本身定位；sticky：相对位置和固定定位的混合体：先是相对定位，等到滚动到一定的位置（top或者bottom）就会变成固定定位；2.定位特点：同级定位元素之间使用z-index设置级别；默认为0；3.简单的tab切换： <style> *{ margin: 0;
复制链接

扫一扫