CSS复习-CSDN博客

本文详细讲解了CSS的引入方式、选择器权重、ID与Class区别、盒模型、浮动元素与定位技巧，以及HTML布局中的行内元素、块级元素和行级块元素。涵盖了样式优先级、布局控制和常见问题解决方案。

1.css引入方式：

①行间样式

<div style=""></div>

②页面级css，在head中定义style标签

③外部css

<link rel="stylesheet" type="text/css" href="xxx">

注意：type和rel属性指的是这是一个css文件，可以不写type

2.装饰div的css方式和顺序

！important>行间样式>id>class/属性>标签选择器>通配符选择器

他们是按照权重来排序的，权重是156进制

选择器	权重
！important	Infinity（正无穷）
行间样式	1000
id	100
class/属性/伪类	10
标签/伪元素	1
通配符	0

属性选择器：通过已存在的属性名和或者属性值匹配元素

3.id和class的区别：一个标签只能有一个id，一个id对应一个标签；一个标签可以有多个class，一个class可以对应多个元素。

4.选择器：

①父子选择器/派生选择器

例：

div em{}

div下面任意em标签

②直接子元素选择器

例：

div>em

div下面em标签

③ 并列选择器

例：若想让class名为demo盒子名为demo的背景颜色设置成红色？

<div>1</div>
<p class='demo'>2</p>
<div class='demo>3</div>

标签写前，类名写后

div.demo {
    background-color:red;
}

还可以写成

div[class='demo'] {
    background-color:red;
}

④分组选择器

例：想让em标签和p标签的宽高都设置成200px

em,p {
    width:200px;
    height:200px;
}

扩展：若两个选择器指向同一个元素，则比较权重之和，若权重大的优先执行，若权重相等，则执行最后一个，会覆盖前面的样式。

5.foint-size：指文字的大小，改变的是文字的高度

font-style：字体样式，例如italic斜体

font-weight：字体粗细

font-family：字体包

color：文字颜色，有三种方式

①纯英文：red/green....

②颜色代码：R B G （red/green/blue)

00-ff 00-ff 00-ff (16进制)

③颜色函数 rgb(a,b,c) 0-255 10进制数

6.border：混合属性（边框粗细）（边框样式）（边框颜色）

由border-width,border-style,border-color组成

7.画出三角形（边框三边透明）

<div></div>

div {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: red;
}

展示效果：

8.css只有段注释

9.首行缩进：text-indent：2em

1em = 1*font-size

10.像素（px）：屏幕是由一个个小像素格组成，每个格一个颜色，分辨率是一英寸容纳像素的大小，是一种相对单位

11.光标元素：cursor:pointer/e-rsize/help...

12，伪类：选择器的一种，css内置类，css内部赋予他一些特性和功能，例如：a:link

13.

①行级元素，内联元素（inline）：内容决定元素所占宽高，不可以通过css改变宽高。

例如：<span><strong><em><a><del>

②块级元素（block）：独占一行，可以改变宽高

例如：<div><p><form><address><ul><li><ol>

③行级块元素（inline-block）：可以改变宽高，内容决定大小

例如：<img>

14.盒模型

分为两种：

①标准盒模型

总宽度：border(左右)+width+padding(左右)

总高度：border(上下)+height+padding(上下)

②IE盒模型(怪异盒模型)

总宽度：width

总高度：height

15.

relative:相对定位，保留原来位置定位

absolute：绝对定位，相对于有定位的父元素进行定位，如果没有，相对文档定位

注意：absolute和relative一般配套使用

16.对于两栏布局，我们可以一个进行定位，另一个自适应让出被压住的部分

17.经典问题

①

<img></img>
<img></img>
<img></img>

img展示的过程中，图片之间会出现间隙

原因：任何文本类元素都具有文本的特性，img是行级块元素，所以可以删除img之间的空格和空行来解决图片之间的缝隙问题。

②

<div>
    <div></div>
<div>

在改变子元素的margin-top的时候，会发现父元素也会跟着一起移动，造成margin塌陷。

原因：父子嵌套在垂直方向的margin是结合在一起的，会使用最大的值。

解决方法:

Ⅰ.给父级元素设置边框（不推荐，因为在需求中对像素非常严格）

Ⅱ.触发bfc（block format content 块格式上下文），每个元素相当于盒子，每个盒子有自己的语法规则，bfc让该盒子所属的语法规则发生改变。

（1）position：absolute

（2）display：inline-block

（3）float：left/right

(4) overflow:hidden

③

span标签及其示意图

<html>
<head>
    <style>
        span{
            margin: 0 100px;
            background-color:#f40;
        }
    </style>

</head>
<body>
    <span>2</span>
    <span>3</span>
</body>
</html>

div标签及其示意图

<html>
<head>
    <style>
        div{
            margin: 100px 0;
            background-color:#f40;
        }
    </style>

</head>
<body>
    <div>2</div>
    <div>3</div>
</body>
</html>

首先有两个span标签，我们让他们的margin-left和margin-right都设置成100px，可以看到两个元素之间相差200px，当我们把span标签换成div的时候，可以发现div之间的间隔相差100px。

可以看出span不共用区域，而div公用区域，对于这种问题，不做解决，如果div想要上面的效果，可以直接把上面的margin值设成200px。

注意：html结构不能随意更改，结构改动对整体影响很大。

扩展知识：在实际开发过程中，通常先开发css，在开发html，因为在结构中会有很多相似的点，可以先列举出来，然后在赋给html元素。

20.浮动元素float(left/right)

会使元素向左或者向右移动，其周围元u尿素也会重新排列。浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们。

*产生了bfc的元素和文本类属性的元素（如inline）可以看到浮动元素。

21.如果有个div，里面包括这几个div。里层的元素都是浮动元素，div包裹无法里层div，该如何处理？

<html>
<head>
    <style>
        .wrapper {
            border: 1px solid black;
        }
        .content {
            width: 200px;
            height: 30px;
            background-color: red;
            float: left;
        }
    </style>

</head>
<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>
</body>
</html>

解决方法：①div是块级元素，不能识别浮动元素，可以让父级元素也变成浮动元素

②使用伪元素处理，清除浮动

<html>
<head>
    <style>
        .wrapper {
            border: 1px solid black;
        }
        .content {
            width: 200px;
            height: 30px;
            background-color: red;
            float: left;
        }
        .wrapper::after{
            content: "";
            display: block;
            clear: both;
        }
    </style>

</head>
<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>
</body>
</html>

22.伪元素

①伪元素天生就存在，它存在于css，不存在于html。

②伪元素天生就是行级元素。

注意：凡是设置了position：absolute，float：left/right之后，元素自动变成行级块元素

23.文字溢出处理

①单行文本

overflow:hidden;
white-space:nowrap；(换行不生效)
text-overflow:ellipsis;(超出部分截断，本处作用是溢出部分添加截断符...)

24.背景图片的处理

因为存在背景颜色，所以同理，存在背景图片

background-image:url(//地址)

background-size:(w,h) *宽高 /per(w,h) *百分比 /cover / contain

background-repeat:repeat(默认)/norepeat...

background-position：一个背景图片初始位置

图片的意义：①展示文字展示不了的内容

②替代文字

25.所以再有css条件下，可以使用background-url显示图片，当图片加载不出的时候，我们需要用文字替代。

<html>
<head>
    <style>
        a {
            background-image: url("code.png");
            width: 200px;
            /* 第一种做法 */
            /* display: inline-block;
            white-space:nowrap;
            overflow: hidden;
            height: 200px;
            text-indent: 200px; */
            /* 第二种做法 */
            display: block;
            padding-top: 200px;
            height: 0px;
            overflow: hidden;
        }
    </style>

</head>
<body>
    <a href="#">这是图片</a>
</body>
</html>

注意：为什么不直接用img的alt替代文本，是因为还需要去加载图片的操作，为了加快代码运行效率，推荐使用上图方法。

26.vertical-height：垂直偏移量

用在指定行内元素（inline）和表单元素（tabel-cell）元素的垂直对齐方式。

27.

① 行级元素内部只能放行级元素;

块级元素可以装任何元素;

但是p标签里面不能套div.

② inline和inline-block被称为文本类元素，是因为凡是带有inline的元素都具有文本特性。

③文字特征：下对齐

④行级块元素或者文本类元素包含文字，那么外面的元素和里面的元素底对齐。