css知识归纳

ゝ一世哀愁。 2022-05-20 08:20 587阅读 0赞

**目录**

css知识归纳

css引入方式

选择器介绍

字体属性

文本属性

文本和字体综合设置

常用文字对齐方法

背景的属性

盒模型

padding内边距

border设置

margin外边距

\*margin垂直方向塌陷问题

\*子盒子中设置margin-top导致父亲盒子也往下移动，从而设置不了

清除页面padding、margin（常用）

display属性

标准文档流

浮动

定位position

相对定位

绝对定位

固定定位

--------------------

# css知识归纳 #

层叠样式表，css表现

**为什么将css和html分离？**

1.  将内容和表现分离，使页面布局更加灵活
2.  减少网页代码，增加浏览器速度，节省网络带宽
3.  独立页面的css，有利于网页被引擎收录

## css引入方式 ##

### 行内样式 ###

在标签类添加style属性

示例：

### 内嵌方式 ###

在head标签内添加一个style标签

示例：

<!doctype html>
    <html>
        <head>
                <meta charset="utf8">
            <style>
                p {
                    color: red;
                }
            </style>
        </head>
    <body>
        <p>这是一个p标签！</p>
    </body>
    </html>

### 外联样式表 ###

**1.链接式**

用link标签连接一个\*.css文件

示例：

**2.导入式**

用@import url()方式

@import url()必须写在文件最开始的位置。

示例：

@import url(other.css)

两者区别：

1.link属于XHTML,@import属于css2.1(对不兼容css2.1的浏览器无效)

2.用link连接的网页先加载css，用@import导入的css文件，先加载html再加载css

**css注释**

/*这是注释*/

## 选择器介绍 ##

主要用于选择标签对象，以设置样式或者脚本。比如第一个例子，标签选择器选择p标签，则html中所有p标签都会被选择

统一设置样式——字体颜色为红色

**基本选择器：标签选择器，类选择器，id选择器，通用选择器**

**高级选择器：并集选择器，交集选择器，后代选择器，子元素选择器，属性选择器**

详细介绍

### **标签选择器** ###

选择所有是该标签的对象，直接写标签名

示例：

p {
    
        color: red;
    
    }

### **类选择器** ###

选择class属性相同的标题,类名前面要加点.

示例：

.cl {
    
        color: red;
    
    }

### **id选择器** ###

选择id属性的标签，id名前面加\#

示例：

#i1 {
    
        color: red;
    
    }

### **通用选择器** ###

设置所有标签格式，用\*表示

*{
    
        color: red;
    
    }

注意：

1.  一个标签可以有多个类，一个类可以属于多个标签（多对多关系）
2.  一个标签只能有一个id，一个id只能属于一个标签（一对一关系）

### **后代选择器** ###

可以选择该标签里面所有符合条件的标签，父标签与后代标签用空格隔开

示例：

div p{
    
        color:red;
    
    }

解释：选择所有div标签下，也包括子元素中嵌套的p标签

### **儿子选择器** ###

只选择直接子元素，父标签与子标签用>

示例：

div>p{
    
        color:red;
    
    }

解释：只在所有div下面找p标签，不包括div下面子元素中嵌套的p标签

### **并集选择器（分组选择器）** ###

只要满足其中一个条件就生效，两标签用逗号,隔开

示例：

div,p{
    
        color:red;
    
    }

### **交集选择器** ###

必须同时满足多个条件

示例：

div#wrapper{
    
        color:red;
    
    }

解释：选择器1选择器2  没有加空格，两个选择器直接连接在一起。该标签是div标签且id名为wrapper才生效。

### **毗邻选择器** ###

找到所有紧挨在div后面的第一个p标签

示例：

div+p {
    
        color: red;
    
    }

### **弟弟选择器** ###

示例：

找到所有div标签后面同级的p标签

div~p {
    
        color: red;
    
    }

注意：基本选择器和高级选择器可以混合使用例如上例所述，

交集选择器可以是多个不同的id，class，标签名。。。

### **属性选择器** ###

根据属性查找

示例一：

将含该属性的标签字体设置为红色

[title] {
    
        color: red;
    
    }

示例二：

将该属性等于hello的标签字体设置为红色

[title="hello"] {
    
        color: red;
    
    }

同理，也可以用^=,$=,\*=,~=代表以hello开头/结尾/字符串包含/多个title属性中一个为hello

示例：

input[type="text"] {
    
        backgroundcolor: red;
    
    }

### **伪类选择器** ###

**1.用在超链接上**

示例一：

a:link{
    
        color:blue
    
    }

没有访问超链接时，超链接为蓝色

同理，可以设置visited,hover,active分别代表访问过/鼠标悬浮/点击瞬间时超链接的样式

2.选择特点元素

first-child：选中第一个元素

last-child：选中最后一个元素

nth-child()：选中当前指定的元素，索引从0开始

0代表没有选中，若索引为n，则代表选中全部child；

索引为2n时代表选中所有偶数的child

索引为2n-1代表选中所有奇数的child

索引为4n+1，隔三换一，为3n+1时，隔二换一

**伪元素选择器**

示例一：

p:first-letter {
    
        font-size: 48px;
    
    }

选择p标签中第一个文字，设置字体大小为48px

示例二：

p:before {
    
        content: "*";
    
        color: red;
    
    }

在p标签前面插入颜色为红色的\*

示例三：

p:after {
    
        content: "?";
    
        color: red;
    
    }

在p标签后面插入?颜色为红色

注意：这个after用的很频繁，主要用在清除浮动上

### **选择器优先级** ###

权重优先顺序：id选择器 类选择器 标签选择器

选择器特点：继承性，重叠性

继承性

子类可以继承部分父类的属性

可继承的属性：color.font-\*.text-\*.line-\*

像一些布局的盒子元素，定位的元素（浮动，绝对定位，固定定位）是不能继承。

background-color属性是不能继承的(因为默认子级标签是透明色，所以设置父级标签时，子类标签也是红色)

层叠性

设置相同的属性时（权重相同），以后设置的为准

注意：

1.继承来的属性权重为0；都是继承来的属性，以选择器描述靠近标签的为准

2.一个标签有多个类时，而且有属性重叠时，谁最后设置就以谁为准

!import属性介绍

设置权重为无限大，但子元素继承来的权重还是0.（不推荐使用）

## 字体属性 ##

这里简单介绍一些关于css的字体样式设置方法

**font-family:设置标签中的字体**

示例：font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif

解释：浏览器先看系统有无Microsoft Yahei字体，有则设置；没有则查看有无微软雅黑字体，依次直到遇到系统有该字体时才设置

注意：备选字体用逗号隔开。英文字体在前，中文字体在后，因为英文字体可以识别中英文，中文字体只能识别中文。中文字体一般都有对应的英文字体，如微软雅黑对应Microsoft Yahei。

若系统没有任何一个备选字体，则设置宋体

**font-weight:设置标签字体的粗细**

示例：font-weight:bold

注意：默认粗细为normal，可以设置bold粗体，border更粗，light更细。或者用100-900之间的数字来具体设置粗细

**font-size:设置字体的大小**

示例：font-size:15px

注意：默认字体大小为16px，设置字体大小时必须有单位(如px，rem，rm)。1px代表1像素大小，1rm代表一个字的宽度(具体多少像素看父盒子字体大小，父盒子16px，那么1em就代表16px)

rem只相对html或body的字体尺寸来设置（1rem相当于一个html或body的字体大小）

**color:设置字体的颜色**

示例：color:\#666666

注意：表示字体颜色有三种方法

1.十六进制，如\#ffffff,\#000000，\#666666

2.rgb或rgbs，如rgb(0,0,0),rgbs(255,255,0,0.5)

rbg三个值代表，红(r-red),蓝(b-blue),绿(g-green),每个值的范围\[0,255\]

3.颜色名,如red，blue，green

## 文本属性 ##

设置一些常用的文本对齐方式

**text-align:文本水平对齐方式**

示例：text-align:center （常用来设置文本水平居中对齐）

注意：可以设置的属性有left/right/center/justify，分别代表水平靠左/水平靠右/水平居中/两端对齐

**text-decoration:设置文字装饰**

示例：text-decoration:none（常用来取消超链接文字默认的下划线）

注意：可以设置的属性有none/underline/overline/line-through/inherit，分别代表默认文本样式/下划线/上划线/删除线（一般删除线直接用<del></del>）/继承父元素的该条属性

**text-index:设置缩进，相当于首行缩进**

示例：text-index:2em（首行缩进2的字）

注意：一般不用px，使用em

**line-height:设置行高**

示例：line-height:16px（常用行高=字体大小设置单行垂直对齐）

注意：行高必须大于字体大小，行高也可以使用百分比，100%代表行高=字体大小

## 文本和字体综合设置 ##

示例:font:14px/30px "宋体";

解释：字体大小/行高 字体样式

## 常用文字对齐方法 ##

text-align:center

line-height:100% 或者line-height:16px(具体内容高度)

使文字垂直水平居中

## 背景的属性 ##

设置标签的背景

**background-color:设置背景颜色**

示例：background-color:red;

注意：背景设置颜色不仅可以用十六进制，直接输入单词，用rbg表示；还有可以用rbga

rbga(255,255,0,0.5):前三个数和rgb中三个数意义一样，最后一个数代表透明度

**background-image:设置背景图片**

示例：background-image:url(./bobo.jpg)

注意：url中的地址可以是网络地址，也可以是本地地址

**background-size:设置背景图片的属性**

示例：background-size: 300px 300px

注意：两个值分别代表长宽

**background-repeat:设置当图片尺寸小于盒子尺寸时，是否重复图片**

示例：background-repeat: no-repeat;

注意：可选repeat/no-repeat/repeat-x/repeat-y,分别代表平铺/不平铺/x轴方向平铺/y轴方向平铺

**background-attachment:设置背景是否随着浏览器滚动而滚动**

示例：background-attachment:fixed

注意：可以设置scroll/fixed/inherit，分别代表默认值，背景图像会随着页面其余部分的滚动而移动/图片不随页面滚动而滚动/继承父类的属性

**background-position:规定图片的位置**

注意：有如下三种方法

第一种方法：设置水平方向，垂直方向。

示例：background-position:top left

可以设置的值有top/bottom/left/right,分别代表上下左右四个方法

第二种方法：设置 x% y%

示例：background-position:50% 50%

x,y取值范围\[0,100\],x为0时代表最左端,y为0时代表最右端

第三种方法：用字体大小方法 xpos ypos

示例：background-position:60px 150px

设置水平垂直方向，单位可以是px,em,rem。该种方法和第二种方法可以混合使用

注意：背景有白色背景的图片，用img会显示白色背景，换做div盒子+调整白色盒子背景就OK

未写完的部分：

1.css精灵图

## 盒模型 ##

在前端中，css+div是一个很重要的模型

如图

盒子分为内容content、padding内边距、边框border、外边距margin；

注意：盒子真实大小是内容部分+内边距+边框。也就是说盒子背景会填充内边距部分，

不会填充外边距，但是外边距也属于盒子的一部分，这部分会以空白显示

### **内容部分content** ###

主要指内容的长和宽，具体属性有height,宽width。

### padding内边距 ###

主要指边框到内容的距离，可以设置上下左右四个方向

具体设置方法有四种

示例一：padding:10px 15px 20px 30px

解释：设置上边距，右边距，下边距，左边距（逆时针）

示例二：padding:10px 15px 20px

解释：设置上边距，左右边距，下边距

示例三：padding:10px 15px

解释：设置上下边距，左右边距

示例四：padding:10px

解释：设置上下左右边距

### border设置 ###

设置边框粗细、线型、颜色

可以设置指定方向的边框样式，示例：border-top-width、border-left-style

值为none或者0时，代表不设置该样式

**border-width:设置边框粗细**

示例：border-width:3px

**border-radius:设置边框角度（设置后，边框成圆角）**

示例：border-radius:3px

**border-style:设置边框样式**

示例:border-style:solid

注意：还可以设置dotted、dashed、solid，分别代表点状虚线边框、矩形虚线边框、实线边框

同理，也可以设置border-color

总结：一般直接使用如border:5px solid blue;整体设置。通过设置内边距来调整内容在盒子中的位置

### margin外边距 ###

指该标签与标签之间的距离

示例：margin:0 auto（常用于使盒子水平居中）

注意：外边框也能设置四个方向，设置方法和padding一样

0代表靠边，auto代表居中

**margin用法**

margin：0 auto盒子水平居中

等价于

margin-left:auto

margin-right:auto

注意：必须设置宽度时，才可以设置margin：0 auto。只有标准流下的盒子才能这样设置，盒子浮动，固定定位绝对定位也不能使用

### \*margin垂直方向塌陷问题 ###

当上下两个盒子同时设置垂直方向的margin，则两盒子之间的距离以较大的为准，这种现象叫塌陷

例如：box1，box2,为上下两个相邻盒子，box1的margin-bottom为20px，box2margin-top为50px，即两个标签的距离是50px，则两盒子距离是50px

注意：垂直方向出这个问题，水平方法不会出这个问题

### \*子盒子中设置margin-top导致父亲盒子也往下移动，从而设置不了 ###

原因：父亲没有border

解决方法：设置border或使用父亲的padding

通常设置父盒子和子盒子之间距离时采用padding而不是margin

### 清除页面padding、margin（常用） ###

*{
    
        padding:0;
    
        margin:0;
    
    }

## display属性 ##

display属性可以设置元素的类型，可以设置block/inline/inline-block/none,分别代表块级元素、行内元素、行内块元素、无

作用：控制元素的显示和隐藏，块级元素和行内元素转换

注意：当设置为none时，元素隐藏。

**display:none和visibility:hidden有什么区别呢？**

display:none隐藏标签后，不占用页面空间，而visibility:hidden方式隐藏标签后，原来标签地方显示空白，占用标签

未完成的部分

3.倒三角示例

## 标准文档流 ##

web网页制作是以流的方式，从上到下

分别有以下几种特点：

1.空白折叠现象

2.高矮不齐，底端对齐（当图片或文字大小不相同时，底部保持对齐）

3.自动换行（文字太多时，多出的文字自动换到下一行）

## 浮动 ##

通过设置浮动，可以使标签并排显示。浮动的元素脱标、互相贴靠、有字围效果、紧凑的效果，也能设置宽高。

设置方法：在标签样式中设置float

示例：float:left

注意：可选择left/right,分别代表左浮动/右浮动

浮动特点

**脱标**

浮动元素脱离标准流，如果上面盒子有浮动效果，下面没有浮动效果的盒子会挤上去，和上面盒子重合

**互相贴靠**

当浏览器宽度足够时，浮动的盒子之间互相贴靠；宽度不够时，紧贴在最外面的盒子会掉下去，

（注意不是直接换一行显示，而是判断该层是否有子盒子可以拖住该盒子，可以拖住，便贴在这个盒子上）

**字围效果**

当div浮动，p不浮动。div挡住了p(div的层级提高)，p中的文字不会被遮盖，此时就形成了字围效果。

**收缩效果**

一个浮动元素，如果没有设置width，那么自动收缩为文字的宽度(这和行内元素很像)

**浮动元素顺序**

浮动元素顺序是根据标签在html中的上下顺序决定的

总结：浮动在网页中运用很频繁，通常外层盒子不用浮动，内层盒子通过浮动效果并排显示

**\*清除浮动**

上层盒子用浮动时，下面盒子就会挤上去，为了避免这一效果，使用清除浮动

主要两种方法

方法一：（最常用）

.clearfloat:after{
    
        content='.';
    
        display:block;
    
        height:0;
    
        clear:both;
    
        visibilility:hidden;
    
    }

然后将clearfloat类添加在需要清除浮动的标签类中

注意：content代表添加的盒子里的内容，加入.可以防止盒子高度变成父级元素高度

方法二

在父级盒子的样式中加入overflow:hidden;

注意：overflow有visible、hidden、scroll、auto、inherit几种选项，分别代表超出部分显示、隐藏、以滚动方式显示、以滚动方式显示、继承父级盒子overflow属性

## 定位position ##

定位有三种：相对定位relative，绝对定位absolute，固定定位fixed

默认为static静态定位

### **相对定位** ###

作用：微调元素的位置或决定定位的参考

特点：不脱标，形影分离，老家留坑，一般不用来做遮盖效果

不脱标：不脱离标准流