CSS知识点总结
一、什么是CSS？
CSS是Cascading Style Sheet的缩写，是层叠样式表的意思，是一种用来表现HTML或XML等文件样式的计算机语言。
二、CSS的主要作用是什么
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
学习CSS就是学习一堆的选择器和属性，其最主要的作用包括布局和美化两个方面。。
2.1 CSS引入方式
一、行内样式
使用style属性引入CSS样式。
示例：
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例：
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2、导入式
<style type="text/css">
@import url("css文件路径");
</style>
2.2 CSS布局
CSS布局主要涉及两方面的内容，包括盒子模型的布局和块级元素并排显示的布局。
2.2.1 盒子模型
Q：盒子模型的六大属性：
A：1）内容区域 width height
2）内填充区域 padding
3）边框 border
4）外填充区域 margin
5）背景 background （img标签也可以添加背景图片）
男盒子和女盒子
男盒子：男标签、块级元素
女盒子：女标签、行内元素
行内元素：完全行内元素
行内块级元素：img input 除了可以并排显示，其他特点和男盒子一样
盒子模型： 只要使用选择器选中了一个盒子，先设置盒子模型的相关属性，然后考虑是否并排显示，最后再去考虑美化。
内容区域：width 和weight
内填充区域：padding
边框：border
外填充区域：margin
背景：background
一张网页就是一堆盒子堆积起来的，盒子就是标签，都是矩形。
内容区域 width和height
对于男盒子来说，表示内容区域
对于女盒子来说，width和height不起作用
注意点：
（1）不设置宽度时，宽度默认值是auto，对于块级元素来说，auto表示尽可能大，但对于行内元素来说，auto表示尽可能小。
（2）不设置高度时，男盒子的高度就是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说，也是由内容撑起来的，但是和font-size也有一定关系。
（3）宽度和高度可以设置成百分比，此时的百分比是父元素的百分比。设置百分比的情况一般用于移动端开发时多一些。
边框： border
边框的粗细：border-width
边框的样式：border-style（none-定义无边框 dotted-定义点状边框 dashed-定义虚线 solid-定义实线 doouble-定义双线）
边框的颜色：border-color
一般情况下，边框不单独设置，border是一个复合属性
注意点：
（1）border:1px solid red border后面的属性是没有顺序的，但一般都是先写边框的粗细，样式，颜色。
（2）粗细大部分情况下单位都是px，也可以使用一些单词，但考虑到浏览器的兼容问题，可能不同的浏览器显示的粗细不太一样。
（3）边框的样式是非常多的，常用的包括：solid 实线 dotted 点画线 dashed虚线 none 没有线
（4）边框的颜色设置也是多样的：可以使用颜色的单词，也可以使用16进制，还可以使用rgb三原色。
（5）border可以单独设置某一个方向上的边框 l例如 border-top：1px solid red等
内填充区域： padding
用来设置内填充，也叫补白，表示内容区域到边框之间的距离
常用的包括四个方向：padding-top；padding-right；padding-bottom；padding-left
padding后面也可以跟一个值、两个值、三个值、四个值：
一个值：padding:10px； 四个方向的padding都是10px；
两个值：padding：10px 20px；上下10px，左右20px；
三个值：padding：10px 20px 30px 上是10px，左右20px，下是30px；
四个值：padding：10px 20px 30px 40px ；上右下左依次是10px 20px 30px 40px
注意点：
（1）有些标签是有默认padding的，如ul、ol等，所以在设计css样式的时候一般都需要使用*{padding：0；margin：0}来重置默认padding和margin
（2）对于行内元素来说，padding在垂直方向上不影响行高，效果上看似是有padding，但是padding不是真正的padding，或者说对于一个女盒子来说，padding在垂直方向上是无效的。
（3）对于会计元素来说，上下padding可以撑起男盒子的高度。
外填充区域： margin
表示外边距，盒子与盒子之间的距离 是边框之外的间隔 实在border之外的
margin和border一样也是有四个方向，也是一个复合属性，也是可以有一个值、两个值、三个值和四个值的。
注意点：
（1）有些标签有默认的margin，可以重置样式*{margin：0；padding：0}
（2）对于行内元素来说，margin在垂直方向上是无效的
（3）margin可以设置auto，表示尽可能大{margin：0 auto；}
（4）margin可以设置为负值
（5）对于块级元素来说，margin有重叠问题（塌陷问题）
margin的重叠（塌陷）问题
对于块级元素来说，margin有重叠问题（塌陷问题）
（1）兄弟元素之间的重叠问题
（2）父子元素之间的重叠问题
兄弟元素之间的重叠问题
<style type="css/text">
.box7{ width: 200px;height: 200px;background-color: gold; margin-bottom: 150px;}
.box8{ width: 200px;height: 200px;background-color: skyblue; margin-top: 100px;}
</style>
<div class="box7">box7</div>
<div class="box8">box8</div>
按理说，两个盒子之间的margin应该是250px，但实际只有150px，这种现象就叫做兄弟之间margin的塌陷问题。
解决方法就是把第一个盒子的margin-bottom等于250px，第二个盒子的margin-top=0px；或者第一个盒子的margin-bottom=0，第二个盒子的margin-top=250px
父子元素之间的重叠问题：
<html>
<div class="box9">
<p class="box10">我是一个段落</p>
</div>
.box9{
background-color: pink;
margin-top: 50px;
}
.box9 .box10{
background-color: gold;
margin-top: 30px;
}
</html>
按理说：p标签上面的margin=80px，但实际只有50margin，这就叫做父子元素之间的margin重叠
解决方案：
（1）给父元素加上border
（2）给父元素加padding，但padding不能等于0px
盒子模型的背景： background
background-color：设置盒子的背景颜色，背景颜色可以填充padding，也可以填充border
background-image：设置盒子的背景图片，img标签也是盒子，也可以给img这个盒子设置背景图片
一个盒子大小正好和背景图片一样：正好装进去
一个盒子如果大于背景图：默认会在x和y轴都进行平铺
一个盒子如果小于背景图：只会显示背景图的一部分，背景图的左上角和盒子的左上角对齐 左上角是指从padding开始，但是border中也会填充图片
background-repeat：
控制是否平铺 repeat-x只平铺x轴 repeat-y 只平铺y轴 no-repeat 不平铺
background-position：
一个大盒子中放一个小的背景图，可以使用background-position定位。
一个小盒子中放一个大的背景图，也可以使用background-position定位。
2.2.2浮动：
float:把图像向右浮动：
| 值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值，元素不浮动，并会显示在其在文本中出现的位置 |
| inherit | 规定应该从父元素继承float属性的值 |
** 浮动元素的特点：**
（1）贴靠性：如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。
（2）包裹性：如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么他的宽度会尽可能小。
（3）一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0px（高度塌陷）
（4）如果一个女盒子浮动了，就可以设置宽度和高度了，换种说法就是女盒子变成了男盒子。
元素浮动会造成的影响：
（1）对父元素造成影响
（2）对后面的兄弟元素造成影响
清除浮动造成的影响的方法即清除浮动的方法：
（1）清除对父元素造成的影响
①overflow：hidden
②加高度（height：xx px；）
（2）清除后面兄弟元素的影响
clear：both 只能写在第一个受影响的元素上，写在父元素上并没有什么作用
浮动为什么是半脱离？
浮动的初衷是实现字围效果，字肯定是钻不上去的，由于字钻不上去，所以说浮动是半脱离标准文档流
一个DIV中的浮动元素，能不能脱离DIV？
浮动肯定脱离不了父元素，但可以影响父元素的高度。
两个浮动能不能重叠到一起？
不能
什么时候可以让两个盒子重叠到一起？
（1）一个盒子浮动，另一个不浮动
（2）定位，定位是完全脱离标准文档流
浮动元素都是先向上浮动吗？浮动到什么地方？
是先向上浮动，浮动到了父盒子的边界，如果是body，body没有设置高度，也会对body造成影响，body的高度也会塌陷，使用overflow：hidden是不能清除浮动的，所以说一般情况下不要在body里面进行浮动。
2.3 字体设置
字体设置：
font：在一个声明中设置所有字体属性
| 值 | 描述 | 备注 |
|---|---|---|
| font-style | 规定字体样式 | normal:默认样式；italic：斜体；oblique：倾斜；inherit：继承父元素字体样式 |
| font-weight | 规定字体粗细 | normal：默认值，定义标准的字符 bold：定义粗体字符 bolder：定义更粗的字符 lighter：定义更细的字符 inherit：规定从父元素继承字体的粗细 |
| font-size | 规定字体尺寸 | medium：默认值；length：设置为一个固定的值；%：基于父元素的一个百分比值 |
| line-height | 规定字体行高 | normal：默认值；number：设置数字，为字体大小的倍数；length：设置固定行间距；%：基于当前字体尺寸的百分比；inhert：继承父元素 |
| font-family | 规定字体系列 | 后面跟一系列字体 |
| … | … |
2.4 文本设置
文本设置：
text-decoration：用来设置文本的装饰线
| 值 | 描述 | 备注 |
|---|---|---|
| none | 默认，定义标准的文本 | 没有线 |
| underline | 定义文本下的一条线 | 上划线 |
| overline | 定义文本上的一条线 | 删除线 |
| line-through | 定义穿过文本下的一条线 | 下划线 |
| blink | 定义闪烁的文本 | |
| inhert | 规定应该从父元素继承text-decoration属性的值 |
本文地址：https://blog.csdn.net/lyh1291341482/article/details/107255657
上一篇： js新入小白的练习题