[js]css导航栏细究

最新推荐文章于 2023-03-18 17:17:34 发布

txjjjjj

最新推荐文章于 2023-03-18 17:17:34 发布

阅读量511

点赞数

本文链接：https://blog.csdn.net/iiiiher/article/details/76417883

版权

a元素(行内元素)操作思想1–导航栏li>a

1,转块–display:block
2,设宽–即使设置了宽度也会独占一行
3,浮动

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a1{
            display: block;
            width: 200px;
            float: left;
        }
        .a2{
            display: block;
            width: 100px;
            float: left;
        }
    </style>
</head>
<body>
<a href="" class="a1">a1</a>
<a href="" class="a2">a2</a>
<a href="" class="a3">a3</a>
</body>

a元素(行内元素)操作思想2

1,转块–display: inline-block
2,设宽–inline-block不会独占一行
好处: 减免了浮动操作

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            display: inline-block;
        }
    </style>
</head>
<body>
<a href="" class="a1">a1</a>
<a href="" class="a2">a2</a>
</body>

转块 `display block`

行内元素转块了,即使设置了宽度,还是单独占一行,除非浮动
display:inline-block既可以设置宽和高,又可以设置

导航菜单实例–最佳代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .nav{
            width: 960px;
            height: 50px;
            background-color: black;
            margin: 0 auto;
        }
        .nav ul{
            list-style: none;
        }
        .nav ul li{
            float: left;
        }
        .nav ul li a{
            display: inline-block;
            height: 50px;
            font: 400 15px/50px "微软雅黑";
            padding: 0 20px;
            text-decoration: none;
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">导航菜单</a></li>
            <li><a href="#">导航菜单</a></li>
            <li><a href="#">导航菜单</a></li>
            <li><a href="#">导航菜单1234</a></li>
            <li><a href="#">导航菜单12345</a></li>
            <li><a href="#">导航菜单</a></li>
        </ul>
    </div>
</body>
</html>

1.整体思路

1.设置宽高背景–居中对齐
2.ul>li左浮动
3.ul>li>a转块,设高(撑开父亲li),设置字体大小行高使居中.
4.a设置padding左右使有间距

2.nav不给高度,a撑不开,为什么?–子浮动,撑不开父 nav(ul)>li

因为a的父li浮动了. 此处a可以撑开li,但是由于li浮动了,无法撑开父.

3.父亲浮动了,子还可以撑高父吗?—父浮动,子可以撑开父 li>a

可以,因为只有父设置了高度,子才没法撑开他.

4.a元素此处使用inline-block和block有啥区别吗?

他们本身是有区别的,行捏元素经过block后,即使设置宽度也会独占一行,除非float.而经过inline-block处理则不会独占一行.免去了float.
然而在此处没啥区别. a的父li,这里是一父一子的形式,,
- 使用inline-block会自适应内容
- 使用 block 会填满li的宽度,独占一行

然而这里li没设置宽,即li的宽度是由a的内容撑大的.所以没区别

盒子加了padding后会被撑大

盒子里套盒子,可以用父盒子调整子盒子的位置
如果加了padding,但是不希望父盒子变大,则需要减少宽高

研究一下padding

h3加padding-top padding-left, 发生位移
盒子即使设置了宽高,加padding 自动撑大
盒子加了宽高,子盒子无法撑大他. 子盒子使用padding可以发生出父盒子.

盒子加padding

盒子加padding调整内容的位置.一般是调整上下,即使撑大也撑大的是上下,本来内容就是要被撑大的
父定位子
子自己定位

垂直居中问题:文本在盒子里要居中

单行文字居中: line-height = div的高度
多行文本居中: 使用padding
- padding-top=(盒子高度-总行高)/2
- 总高度-(盒子高度-总行高)/2 ,如果不减少盒子会被撑大

水平居中问题: text-align: center;-只是针对块级元素

对块级元素居中直接生效

h1 {text-align: center}

对行内元素-情况1-需要将其转块后居中

<head>
    <title>Document</title>
    <style>
        a{
            display: inline-block;
            width: 400px;
            text-align: center;
            background-color: pink;
        }
    </style>
</head>
<body>
<h1>this is h1</h1>
<a href="">this is an a</a>

对行内元素-情况2,如a,需要把a放到块级元素里才能将它居中.

<head>
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            background-color: red;
            text-align: center;
        }
    </style>
</head>
<body>
<h1>this is h1</h1>
<div class="box1"><a href="">this is an a </a></div>
</body>

盒子撑开问题:

盒子里套盒子,
- 外盒子一旦设置了高度,里面的不会撑大
- 外盒子不设高度,则里面盒子高度会撑大外盒子

float

行内元素float后,自动转块,可以设置宽高了.如a.
2个盒子float第二个—相当于把自己当前位置腾开了
绝对定义–脱标,相对原来位置top left

相对定位:

原来位置定位,还占着,形影分离,能看到的是幻象
不脱标
形影分离,能看到的是幻象,使用margin和padding操作的是他本身位置,不是影子.
使用时候: top:10px,是向下移动,反着的.
作用: 微调元素,如input和按钮之间的位置.

绝对定位

一旦使用定位,则即使行内元素也可以设置高宽
会脱标
相对于页面左上角定位
滚动滚轮经过绝对定位的盒子可以被卷动走.因为参考点是页面右上角
如果使用bottom描述,那么就是浏览器首屏窗口尺寸对应的左下角.

绝对定位后

原来的块级元素不在是块级了不可以居中.居中方法: left 50%; margin-left: -宽度的一半.

        .box1{
            height: 200px;
            width: 200px;
            background-color: red;
            position: absolute;
            left: 50%;
            margin-left: -100px;
        }

脱标方法

浮动绝对定位固定定位

固定定位

做固定的nav
做返回顶部

显示隐藏的区别

overflow: hidden;
    溢出隐藏
visibility: none;
    隐藏元素
        隐藏后还会占据原来位置
display: none;
    隐藏元素
        隐藏后不会占据原来位置
display: block;
    元素可见

次日小结:

padding布局

1.一个盒子 padding定位自己里的内容

一般设padding-top,会撑开

2.父子盒子,父盒子给子盒子定位内容

父设置padding-top padding-left 同样被撑大.

3.父盒子-子盒子, 子盒子设置padding定位自己位置

父盒子不变,子盒子变大.

4.父盒子-子盒子–子子盒子,子盒子,子盒子定位子子盒子的内容

<head>
    <meta charset="utf-8">
    <style>
        /* 大盒子 */
        .box1{
            width: 200px;
            height: 200px;
            background-color:pink;
        }
        /* 子盒子 
            目的就是为了定位子子盒子*/
        .box1 .box11{
            /* 子盒子的宽度让充满父盒子 */
            width: 50px; 
            height: 100px;
            /* 待子子盒子位置位置通过padding调整好后这个子盒子颜色干掉. */
            /* background-color: green; */
            padding-top: 50px;
            padding-left: 50px;
        }
        /* 子子盒子 */
        .box1 .box11 .box111{
            width: 50px;
            height: 50px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box11">
        <div class="box111">12</div>
    </div>
</div>
</body>