精心整理的一份CSS学习笔记+CSS思维导图
作者｜Panda
转载请注明出处。
文章目录
- 一、CSS简介
- 二、选择器
- 2.1 基本选择器：
- 2.2 组合（复合）选择器
- 2.3 选择器的优先级
- 三、盒模型
- 四、CSS思维导图
一、CSS简介
CSS全称：层叠样式表 (Cascading Style Sheets) 。
CSS作用：美化界面，布局页面，修饰元素外观，修改元素位置等。
CSS引入方式：
1.行内样式：
<div style="这里写样式">我是一个块级的标签div>
2.内嵌样式：将CSS样式表放到head中用
<head>
...
<style type="text/css">
...此处写CSS样式
style>
head>
3.外联样式：将一个独立的.css文件引入到HTML文件中，使用标记写在标记中。 链接式会以网页文件主体装载前装载CSS文件。
<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
head>
二、选择器
2.1 基本选择器：
1、通配符元素选择器：
{ 属性1:属性值1;* 属性2**:属性值2;属性3:属性值3; }
* 表示应用到所有的标签。
2、标签选择器
标签名{ 属性1:属性值1;** 属性2**:属性值2;属性3:属性值3; }
例如：div {color: yellow}
表示：匹配所有使用 div 标签的元素
3、类选择器
.类名{ 属性1:属性值1;** 属性2**:属性值2;属性3:属性值3; }
例如：
.mystyle{color:yellow}
<div class="mystyle"/>我的divdiv>
4、id选择器
#id名{ 属性1:属性值1;** 属性2**:属性值2;属性3:属性值3; }
使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。
例如：
#Mycolor {color: yellow}
<h3 id="Mycolor">H3h3>
5、伪元素选择器（CSS3)
E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式;
E::before和E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
div::befor {
content:"开始";
}
div::after {
content:"结束";
}
2.2 组合（复合）选择器
1、多元素组合选择器：同时匹配两个或多个标签，用逗号隔开。
p,a,div{color: yellow;}
<p>段落p>
<a>linka>
<div>块div>
2、后代元素选择器： 匹配所有div标签（其他标签类似）里嵌套的p标签，用空格分隔。
div p {color: yellow;}
<div>
<p>段落1p>
<div>
<p>段落2p>
div>
div>
3、子代元素选择器：匹配所有div标签里嵌套的子标签，之间用>分隔。
div > p {color: yellow;}
<div>
<p>divp>
<p>divp>
div>
PS: 后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中;子代元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签。
另外还有交集选择器、并集选择器、毗邻元素选择器、伪类选择器等，这些都是基于基本选择器的，就不再赘述了，用到的时候查阅即可。
2.3 选择器的优先级
| name | 权重 |
|---|---|
| !important | 正无穷 |
| 行间样式 | 1000 |
| id | 100 |
| class｜属性｜伪类 | 10 |
| 标签选择器｜伪元素 | 1 |
| 通配符 | 0 |
css中同一横行的那个权重大，以哪个为准，
权重相等时，遵循后来先到原则，即后来的覆盖之前的
三、盒模型
盒模型是CSS中的核心的概念，描述了元素如何显示。
盒模型由内容区 + 内边距/填充区(padding) + 边框(border) + 外边距/空白区(margin)组成。
盒子大小以宽度为例子：width + padding + border + margin，但我们比较关注的是元素可渲染内容区的宽度和高度。我们在给一个元素添加padding和border并不会影响内容盒子的大小，但会导致整个元素盒子的宽度变大。
简单的说padding和border的设置会影响元素的width的计算。
在box-sizing属性为conten-box的时候，width=元素的内容区
在box-sizing属性为border-box的时候，width=元素内容区padding+border
举个例子(来源于网络):
.group {
/* background-color: blue; */
overflow: hidden;
}
.block {
width: 33.33%;
padding: 20px;
float: left;
/* box-sizing: border-box; */
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.gray {
background-color: gray;
}
如上我们并排了三个宽度为33.33%的块，给每个块添加了padding，因为box-sizing默认是conten-box的计算方式，这样width实际上是父容器的33.33%+padding；这时候就可以给.block元素添加box-sizing:border-box; 让width=内容+padding+border。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
四、CSS思维导图
图片来源于网络，仅供学习使用，若有侵权，请联系删除。
码字不易，若有错误请指正，口下留情。求赞