css笔记_盒模型一定要用class吗-CSDN博客

本文链接：https://blog.csdn.net/qq_41601327/article/details/100531536

需要注意的是，一定要让你声明的当前页面所使用的编码格式与当前页面文件的保存格式一致，否则会出现乱码
我们中文的世界里，目前采用的编码方式：UTF-8 GB2312

b、<meta name=“desription” content""/>给网站添加描述信息，便于搜索引擎搜索
c、给网站添加搜索关键字

7.ul标签：

无序列表，它是用来表示一组
语义相同的项
ul标签和li标签是成组出现的。换句话说ul和li不能单独存在
ul标签只能放li
li标签里可以放任何东西，可以非常复杂，甚至可以在li里套ul

8.ol标签：有序列表。

它是用来一组语义相关的项
ol和ul一样，必须跟li标签成组出现
一般情况下，既然ul和ol都是表示一组语义相同的项。所以我们很少用ol，一般都用ul。

9.dl 定义列表

dl：definition list
dt：definition title
dd: definition description
10.label标签
它往往和表单元素（input标签）搭配使用

第二部分：CSS

1.基本概念

css-cascading style sheet
我们学习的版本是CSS2.0
最新的版本是CSS3.0

2.网页设计中HTML，CSS，Javascript的地位

HTML：内容
CSS：呈现（样式）
JS：交互
实现：内容与样式与交互的分离

3.CSS的基本语法

选择器{
k：v；
k：v；
k：v；
}

4.CSS代码能写在三个地方，或者说三种用法

1》行内样式：坚决杜绝；
2》内联样式：学习时使用
3》外联样式：把样式表代码移出到一个单独.css文件中。内容与呈现的物理分离

5.选择器

（1）标签名做选择器

只写标签名就行了，不要加“<>”
标签名做选择器会把当前页面上的所有这个标签都选中

(2)id做选择器

每一个页面标签都可以添加id属性
标签的id这必须遵循以下的规范：
1.只能有字母、下划线、数字组成
2.必须是字母开头
3.不能与标签名同名
4.进来使用有意义的字母缩写。比如；nav
注意：1.任何一个页面上不能出现同名的id
通过实验，我们发现，如果出现同名的id，浏览器会把同名的id的元素都使用相同的央视修饰。但并不代表可以这样做。id是表示唯一性的
2.页面上任何一个元素，都可以同时被多个选择器同时选中，并且这多个选择器能同时作用与这个标签。也就是多个选择器选中同一个标签，他们的样式能叠加下来。这是CSS为啥叫“层叠”的一个原因
3.如果多个选择器选中同一个元素后，他们之间的样式有冲突，那么这时候就存在一个选择器优先级的问题

（3）类名做选择器

1.类名做选择器，必须在类名前打.
2.所有的标签都可以有class属性
3.class属性的名字与id命名规范一样
4.一个标签的id名和class名甚至可以相同，但千万不要这样做。
5.不同类型的标签可以从属于同一个class。
6.一个标签可以从属于多个不同的class
（1）不同的类名之间必须用“空格”隔开
（2）不允许在标签里出现两个class，任何html标签内都不能出现相同名字的属性
7.尽量使用原子化的类，少用大而全的类。

8.样式表中，尽量使用class，尽量不用id：class上样式，id上行为
class是为样式表准备的，id是为JS准备的
从语义上讲，
class是表示同一类元素，但是我们在样式表中即使这一类只有1个标签，我们也用class，不用id做选择器

（4）后代选择器

注意：后代选择器不是儿子选择器。
问题：用后代选择器还是直接给元素上个类，使用类选选择器？
后代选择器的意图是：表达出页面上的某一部分（区域）之内的所有什么什么元素，样式设置为

（5）交集选择器

语法：标记名，类名.类名…

（6）并集选择器（组选择器）

语法：多个选择器之间逗号隔开，表示被选中的这些元素，采用相同的样式

（7）通配符*

*表示页面上的所有元素。这么做不好，效率太低。

6.css继承性

（1）只能把自己的样式继承给后代元素但是不能影响自己的父节点和兄弟节点
（2）什么样式能继承下来？修饰文本样式的属性能被继承下来。color 、text-、font-、line-、
不是修饰文本的属性不能被后代节点继承下来。比如：有关盒子模型，定位的属性、背景属性

7.css的层叠性

1》层叠性指的是当css的样式产生冲突时的处理机制
2》层叠性的优先级：算权重的算法，谁权重大，就听谁的，权重小的就会被覆盖掉。
3》计算权重的描述方式（id的个数，class的个数，标签名的个数）
4》id的优先级最高，class次之，标签名的优先级最低，并且三者不存在进位。
实际上也是存在进位的，255个进一位，所以根本没有意义。
（5）如果都选中同一个元素，并且权重计算都一样，听谁的？谁写到最后听谁的。
（6）如果是继承过来的样式，权重是0（如果没有直接选中这个标签，你给他写的属性权重是0）
（7）如果大家都没有直接选中，权重都是0，这时候有一个就近原则

判断那个样式起作用：
（1）先看有没有直接选中
（2）如果选中了，就计算权重
（3）如果权重都一样，谁写在最后谁起作用
（4）如果没选中，采用就近原则

注意：内联样式无论权重多大，都不如行内样式。但是如果使用行内样式，就违背了我们内容与呈现与交互相互分离的初衷。所以无论如何也不要使用行内样式。

8.！important

！important属性是个修饰符，他的语法是k：V !imprtantl;
错误写法：（1）V；！important;
(2).box1 !important{;}
!important只能提升一条语句的优先级，不能提升一个选择器的优先级。
!important把被修饰的语句的优先级提升到无穷大。
如果被层叠的样式有使用:!important修饰。那么按照语句所在选择器的权重来起作用。
如果是继承过来的样式，它的权重是0，!important属性无法提升权重为0的样式。
如果样式都是继承过来的，！important能否提升（能打破就近原则吗）？还是就近原则管用。

9.盒子模型

它讲了这样一个事实：在HTML里，在浏览器渲染页面时，所有的元素都是要占据一定空间的，而且这个空间一定是一个矩形。在我们的浏览器中绝对不会出现占据圆形、不规则图形这样的元素存在。
简单的说，我们可以把页面上的所有元素都当作一个盒子看。
盒子由边框（border）、内边距（padding），内容区（content）外边距（margin）
内边距会影响盒子所占的实际空间大小
盒子在浏览器中所占空间大小是由：border，padding，width，heigh共同作用的

（1）边框 border属性

1.border属性是由三个子属性构成，缺一不可。缺少任何一个子属性，都不能正常显示出边框
2. border的三个子属性：style width color
3.各个浏览器，对于border-style的值，渲染出来的样子不是100%相同的。能100%相同的有：solid，double，dashed 如果说有特殊样式的边框，还要求必须所有的浏览器100%的呈现一致，就只能使用图片。
4.在一个盒子里，后出现的边框样式会覆盖先出现的边框样式。我们往往都先写一个合写的总的样式，然后再单独写某个方向上的边框样式，来达到某个方向上的特殊的边框样式。
5.边框的各个子属性可以给一个值，表示四个方向上的样式都一样。
给2个值，分别代表的是（上下，左右）
给3个值，代表的是（上，左右，下）
给4个值，代表的是（上，右，下，左）
简单的说就是从上方向开始，顺时针转。

（2）padding属性

padding也分着上，右，下，左4个方向

（3）盒子的实际占用空间的大小是由三个属性决定的：border、padding、、width

盒子的实际大小=border-width2+padding2+width

10.标准文档流

标准文档流概念：它不是一个东西，也不是一个物件，它其实是浏览器渲染页面的一个规则，都要按照它下html文档中出现的先后顺序，依次在浏览器中，从左上角开始，从上到下，从左到右的顺序依次显示。

标准文档流的几个性质

（1）空白折叠
（2）高低不齐，底端对齐

标准文档流把页面上的元素分成了两大类：

（1）块级元素

 1.单独的占一行
 2.可以设置宽、高
 3.如果不设置宽度，那么它将默认的占满父盒子的宽度

（2）行内元素

 1.与其他元素并排在一行上
 2.不能设置它的宽、高。它的宽、高就是它内容的宽、高

（3）那些是块级元素，那些是行内元素？p标签

块级元素都是容器级标签，文本级元素都是行内标签。p标签是个特例，它是个文本级标签，但它是个块级元素

（4）块级元素与行内元素是能够相互转换的。

display:block(块)inline（行内）

现在无法实现设置宽高，又能让不同的块并排在同一行，原因是标准文档流的性质不允许这样做。
所以，现在如果我们必须把网页的内容以这个形式来显示，就必须打破标准文档流的限制。
打破标准文档流的限制的三种方法：浮动，相对定位，绝对定位.

11.浮动float

浮动分为左浮动和右浮动
float：left/right；

浮动带来的特性：

（1）浮动元素会脱离标准文档流。
脱离了标准文档流的元素，就可以设置宽和高，而不用理会它是不是块级元素还是行内元素
（2）浮动的元素会相互依靠
（3）文字环绕现象
（4）收缩

写选择器时，我们一般都把这个嵌套关系写足

12.清除浮动

（1）给父盒子添加高度属性（height）

父盒子不能被浮动的子元素撑开高度。
添加高度虽然能够清除浮动带来的影响，但它会给我们的页面带来不好的限制，也就是父盒子不能自适应内容的多少。所以我们需要找到一种不需要添加高，也能清除浮动的办法

（2）给第二个盒子添加属性clear：both；

clear就是清除浮动的意思。clear的值有三个left，right，both
这个方法有个后遗症，就是垂直方向是的margin失效了。原因还是父盒子没高度

（3）隔墙法

1》就是在2个相互影响的盒子中间，添加一个div，给他添加样式clear：both 隔墙法隔开的两个盒子，仍然是没有height的。 2》内墙法把墙修在在一个盒子的内部，必须放在最后一个元素（4）over、flow 给内部有浮动的元素的盒子，添加一个overflow：hidden属性，就能够清除浮动影响 overflow叫溢出 overflow：hidden就是溢出隐藏

注意:
使用原子化的类

13.外边距margin

margin也分为4个方向，与padding相同

①盒子居中

margin：0 auto；
使用这个语法水平居中的前提
（1）盒子必须有明确的宽度
（2）只有标准流中的盒子才能使用margin：0 auto；
（3）margin：0 auto是使被修饰的盒子在父盒子的区域内部居中，而不能使盒子内部的文本居中对齐。
文本的居中对齐属性：text—align：center

②margin的叠加

 （1）水平方向上的margin是叠加的
 （2）垂直方向上的margin不叠加：margin的塌陷现象
 就高不就低

14.行高：line-height

css里实现一个效果，往往有多种手段
font属性：有三个小属性组成
font-size
font-family
font-height
语法font：字号/行高字体；
一个盒子可以同时设置多个字体，一定要让英文的字体写前面。
所有的汉字字体都有个对应的英文字体“Microsoft Yahei”<=>宋体
做网页的时候不要用稀奇古怪的字体。所有的字体都必须是客户端的电脑里有这样的字体才能够按你的意图来显示，所以，如果你想用奇特的字体，只能用图片

16.背景设置

背景颜色：background-color：
背景图：background-imag
如果同时设置了背景图和背景颜色，那么背景颜色就会被背景图盖住

17.精确的还原一个盒子

18.超链接样式

伪类：
：link 表示用户没点击过
：visited 表示用户点击过之后的样式
：hover 表示鼠标悬停在超链接之上的样式
：active 表示鼠标点下去但是不松开手的样式
a：link，a：visited 选择器等价于 a
如果你真的要同时设置4个伪类，那么你必须按照lahv的顺序来写样式表
特例，text-decoration不能从父盒子继承给a标签

19.定位方式

定位方式有三种：相对定位，绝对定位，固定定位
position：relative/absolute/fixed；

一、相对定位

position定位要跟，top/left/bottom/right搭配使用，来进行盒子的位置调整
相对定位的盒子不会条例标准文档流，它的身体还在老家，只是灵魂出窍了
为啥叫相对定位：因为它是相对自己原先的位置调整的

（2）相对定位的用途

①盒子位置的微调
②作为绝对定位的参照物

二、绝对定位

position：absolute；
①绝对定位的盒子会脱离标准文档流。所以，绝对盒子将不再遵守标准文档流的性质，不管盒子是不是块级元素，都不需要display：block就能设置它的width/height
②定位
也是要搭配top/bottom/left/right
定位是，如果使用了top就不要设置bottom，left和right也是如此。