【查缺补漏】CSS

icon-Y

已于 2022-07-03 21:55:48 修改

阅读量137

点赞数 1

分类专栏：【查缺补漏】文章标签： css html 前端

于 2022-07-03 21:21:23 首次发布

原文链接：https://web.qianguyihao.com

版权

【查缺补漏】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.网站logo的SEO

（1）导航栏，左侧的logo：

错误的写法：

可能会有人直接将img标签作为logo的布局：

    <div class="logo">
        <img src="images/logo.png " alt="">
    </div>

然后将img的样式设置为：

    .header .logo{
        float: left;
        margin-right: 40px;
    }

这样写虽然视觉效果上达到了，但是搜索引擎是搜不到图片的，不利于SEO。

正确的写法：

正确的写法是将超链接作为logo的布局，里面放入文字（文字可以被SEO）：

			<h1 class="logo">
				<a href="#">
					博雅互动-世界上最好的游戏公司
				</a>
			</h1>

然后将logo设置为背景图：

		.header .logo{
			float: left;
			padding-left: 12px;
			margin-right: 39px;
			width: 174px;
			height: 58px;
		}
		.header .logo a{
			display: block;
			width: 174px;
			height: 58px;
			background:url(images/logo.png) no-repeat;
			text-indent: -999em;
		}

由于搜索引擎是搜不到图片的，所以一定要把“博雅互动”这几个文字加上去，然后通过text-indent缩进的属性把文字赶走到视线以外的地方。这是做搜索引擎优化的一个重要的技巧。

2.结构伪类选择器

伪类选择器的标志性符号是 :。

CSS中有一些伪类选择器，比如:link、:active、:visited、:hover，这些是动态伪类选择器。

CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的结构伪类选择器：即通过结构来进行筛选。

1、格式：（第一部分）

E:first-child 匹配父元素的第一个子元素E。
E:last-child 匹配父元素的最后一个子元素E。
E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。
E:nth-child(odd) 匹配奇数
E:nth-child(even) 匹配偶数
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。

2、格式：（第二部分）

E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。

3、格式：（第三部分）

E:empty 匹配没有任何子节点（包括空格等text节点）的元素E。
E:target 匹配相关URL指向的E元素。要配合锚点使用。

3.清除浮动

方法1：给浮动元素的祖先元素加高度

设置height

缺点：工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化

方法2：clear:both;

最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。

缺点：浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。

方法3：隔墙法

外墙法：在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。墙用自己的身体当做了间隙。

缺点：隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”

内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了

方法4：overflow:hidden

这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。并且,overflow:hidden;能够让margin生效。

4.水平垂直居中

1.如何让一个行内元素（文字、图片等）水平垂直居中

行内元素水平居中

给父容器设置：

    text-align: center;

行内元素垂直居中

让文字的行高 等于 盒子的高度，可以让单行文本垂直居中。比如：

    .father {
        height: 20px;
        line-height: 20px;
    }

2.如何让一个块级元素水平垂直居中

如果它是一个块级元素，就对它自身应用 margin: auto或者 margin: 0 auto

方式一：绝对方式一：定位 + margin（需要指定子元素的宽高，不推荐）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father{
            position: relative;
            min-height: 500px;
            background: pink;
        }
        .son {
            position: absolute;
            width: 200px;
            height: 100px;
            background: red;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">子元素的内容</div>
    </div>
    <script></script>
</body>
</html>

方式二：绝对定位 + translate（无需指定子元素的宽高，推荐）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father{
            position: relative;
            min-height: 500px;
            background: pink;
        }
        .son {
            position: absolute;
            background: red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">子元素的内容</div>
    </div>
    <script></script>
</body>
</html>

方式3：flex 布局（待改进）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: pink;
        }
        .son {
            background: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">子元素的内容</div>
    </div>
    <script></script>
</body>
</html>

方式4： flex 布局 + margin: auto（推荐）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father{
            display: flex;
            min-height: 100vh;
            background: pink;
        }
        .son {
            margin: auto;
            background: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">子元素的内容，想水平垂直居中</div>
        <div class="son2">这个元素不想水平垂直居中</div>
    </div>
    <script></script>
</body>
</html>