CSS入门学习笔记（复习用）

最新推荐文章于 2024-04-19 05:46:31 发布

靡_初

最新推荐文章于 2024-04-19 05:46:31 发布

阅读量110

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/kettlo/article/details/115144505

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS基础笔记，关键笔记（复习用）

本文章并没有记录特别基础的内容（基础语法和基础内容），而是学习css、使用css开发时中的重难点和细节性的内容。

文章目录

CSS基础笔记，关键笔记（复习用）

1. CSS构成：

由选择器和一条或多条声明组成。

每条声明由属性、值组成，以“键值对”的形式出现。

属性和属性值之间由 “:” 分开。

每条声明最后都要有 “;” 结尾。

在这里插入图片描述

2. CSS风格

紧凑型
```
h3 { color: red;font-size: 25px;}
```

展开格式

h3 {
    color: red;
    font-size: 25px;
}

空格规范
1. 属性值前面冒号后面保留一个空格。
2. 选择器与大括号之间保留一个空格。

3. font复合写法

/*常规写法*/
p {
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    line-height: 24;
    font-family: "Microsoft Yahei";
}

/*复合写法（有顺序要求）*/
/*p {font-style  font-weight  font-size/line-height  font-family}*/

p{
    font: italic 700 20px/24 "Microsoft Yahei";
}

font属性中各个属性值要严格按照以上规定顺序写，不能更换顺序，并且各个属性间要有空格隔开。
font属性中必须保留font-size和font-family属性，其它可以省略（取默认值），否则font属性将不再起作用。

4. CSS装饰文本

text-decoration属性

可以给文字添加下划线、删除线和上划线。也可以取消这些线，常用于超链接取消下划线

a {
    /*取消超链接的下划线*/
	text-decoration: none;    
}

p {
    /*给文字添加下划线*/
    text-decoration: underline;
}

text-index 属性：文本缩进

p {
	/*每段首行缩进两文字*/
	text-index: 2em;
}

5. CSS元素显示模式

元素主要分为块级元素和行内元素

块元素特点：

独占一行
宽度高度和内外边距可以控制
宽度默认为父容器的100%
是一个容器和盒子，里面可以放行内或块级元素

常见块级元素有： h1-h6、p、div、ol、li等

注意：

文字类元素内部不能使用块级元素
p标签主要用于存放文字，因此
里面不能放块级元素尤其是
同理 h1-h6内部都不能存放其它块级元素

行内元素特点：

相邻元素显示在一行上，一行可以显示多个。
高宽直接设置是无效的。
默认宽度是其本身内容的宽度。
行内元素只能容纳文本或其它行内元素

常见行内元素有 a、strong、b、em、i 、del、s、u、span等。

注意：

链接中不能再放链接
a里面可以放块级元素，但是给a转换一下块级模式最安全。

行内块元素：

特殊标签：img、input、td。
他们同时具备块元素和行内元素的特点。

特点：

相邻的行内元素在一行上，之间会有缝隙，一行可以显示多行。（行内元素特点）
默认宽度是本身宽度
高度，宽度和内外边距可以改变。（块级元素特点）

总结

转换方法

.a {
  /*转换为行内元素*/
  display：inline;
    
  /*转换为块级元素*/
  display：block;
    
  /*转换为行内块元素*/
  display：inline-block;
}

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不能设置宽度和高度	本身内容的宽度	容纳文本或者其它行内元素
行内元素块	一行可以放多个行内块元素	可以设置宽度和高度	本身内容的宽度

5. 背景图片

背景图片位置background-position ，两个参数。
- 参数方向是方位名词（left , right，top，bottom ，center）
  - 如果两个参数都为方位名词，则两个值前后顺序无关，
  - 如果只指定一个方位名词，另一个值省略，则第二个值默认垂直居中
- 参数是精确值（px，em等）
  - 如果参数是精确坐标，那么第一个是x坐标，第二个是y坐标
  - 如果只有一个值，该数值为x坐标，另一个为默认垂直居中
- 混合单位
  - 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。
背景图像固定（背景附着）background-attachment ：scroll | fixed（背景图像固定）

6. CSS特性----层叠性

相同选择器给设置相同样式，样式会被覆盖。

层叠性原则：

样式冲突遵循就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突不会层叠

7. CSS特性----继承特性

子标签会继承父标签的某些样式，恰当的使用继承可以简化代码，降低CSS样式的复杂性。

主要会继承文字样式（text-， font-，line-，color属性）

以下代码body中设置行高为1.5，代表其子代的行高都被设置成当前font-size的1.5倍。

body中div的font-size为14px，div的行高就为14*1.5=21px。

body {
	font: 12px/1.5 "Microsoft yahei";
}
div {
    font-size: 14px;
}

<body>
    <div>
        五彩斑斓
    </div>
    <div class="nav">

    </div>
</body>

8. CSS特性----优先级

当同一个元素指定多个选择器，会有优先级的产生

选择器相同则会执行层叠性
选择器不同，会按权重执行

选择器	选择器权重
继承或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=“”	1,0,0,0
!important 重要的	∞无穷大

p{
    /*优先级最高*/
    color:red!important;
}

注意：继承的权重为0

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。（权重叠加不会有进位的问题）

/* .nav li的权重为 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
    color: red;
}

/* ul li的权重为 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
ul li {
    color: blue;
}

/* li 的权重为 0,0,0,1 */
li {
    color: green;
}

<ul class="nav">
    <li>山东建筑大学</li>
    <li>山东建筑大学</li>
    <li>山东建筑大学</li>
    <li>山东建筑大学</li>
</ul>

.nav li的权重最大，li的权重最小，最后字体颜色为red。

9. 盒子模型

边框（border）

border-width（边框粗细）、border-style（边框样式）、border-color（边框颜色）。

复合写法： border：10px , solid, #fff;（顺序可以变化）

内边距（padding）

值的个数	表达意思
padding: 5px;	一个值代表上下左右都是5像素内边距
padding: 5px 10px;	两个值代表上下内边距为5px ，左右内边距为10px
padding: 5px 10px 20px;	三个值代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding: 5px 10px 20px 30px;	四个值代表上5像素，右10像素，下20像素，左30像素

注意：

padding会影响盒子大小（盒子在具体指明了大小的情况下），一般要将容器的width/height减去多出来的内边距大小。
容器的属性中在不指定width或height的情况下不会影响盒子大小（即使是继承了父容器的具体大小）。

外边距（margin）

外边距合并问题

使用margin定义块级元素的垂直外边距时，可能会出现外边距的合并。
- 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

在这里插入图片描述

解决方案：

可以为父元素定义上边框。

.father{
	border: 1px solid transparent;
}

可以为父元素定义上内边距。
```
.father{
	padding-top: 1px;
}
```
可以为父元素添加overflow: hidden。
```
.father{
	overflow: hidden;
}
```
浮动、固定，绝对定位的盒子不会有塌陷的问题。
清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除网页元素的内外边距。
```
* {
    padding: 0;
    margin: 0;
}
```
**注意: **行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

圆角边框（border-radius）

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。

在这里插入图片描述

注意：

可以跟四个值，分别代表左上角，右上角，右下角，左下角。
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。

盒子阴影（box-shadow）

语法：box-shadow: h-shadow v-shadow blur spread color inset。

值	描述
h-shadow	必须。水平阴影位置。允许负值
v-shadow	必须。垂直阴影位置。允许负值
blur	可选。模糊距离（阴影的虚实）
spread	可选。阴影尺寸（阴影的大小）
color	可选。阴影颜色
inset	可选。将外部阴影（outset）改为内部阴影

10. 浮动

三种传统布局方式：

普通流（标准流/文档流）

标签按照规定好默认方式排列

块级元素会独占一行，从上向下顺序排列
- 常用元素：div、hr、p、h1~h6、ol、dl、form、table
行内元素会按照顺序，碰到父元素边缘会自动换行
- 常用元素：span、a、i、em等

浮动（float）

布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动特性：

浮动元素会脱离标准流（脱标）
- 移动到指定位置。
- 浮动的盒子不再保留原先位置（原先位置会被其它元素占有）。

在这里插入图片描述

浮动的元素会一行内显示并且元素顶部对齐

**注意：**浮动的元素是互相靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

在这里插入图片描述

浮动的元素会具有行内块元素的特性
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的
- 行内元素同理
使用浮动进行布局的一般策略是：

先用标准流的父元素排列上下位置（每一个大部分用标准流），之后内部子元素采取浮动排列左右位置。
浮动注意点：
- 浮动和标准流的父盒子搭配。
- 一个元素浮动了，理论上其余的兄弟元素也要浮动。
- 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
浮动清除

由于父级盒子很多情况下不方便给高度（内容总是变化的，不确定的），但是子盒子浮动又不占有位置，最后父级盒子高度为0，就会影响下面的标准流盒子。

在这里插入图片描述

清除浮动的本质：清除浮动元素造成的影响。
如果父盒子本身有高度，则不需要清除浮动。
清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的方法：

额外标签法，W3C推荐

.box {
	background-color: royalblue;
}

.box .one {
    height: 100px;
    width: 200px;
    float: left;
    background-color: green;
}

.box .two {
    height: 100px;
    width: 300px;
    float: left;
    background-color: red;
}

.footer {
    height: 200px;
    background-color: black;
    }

/* 给最后一个浮动子元素后面添加一个块级元素 属性设置clear:both来清除浮动 */
.clear {
    clear: both;
}

<body>

    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>

缺点：添加无意义的标签，结构化较差。只能添加块级元素。

父级添加overflow属性

.box {
    background-color: royalblue;
    /* 清除浮动 */
    overflow: hidden;
}

.box .one {
    height: 100px;
    width: 200px;
    float: left;
    background-color: green;
}

.box .two {
    height: 100px;
    width: 300px;
    float: left;
    background-color: red;
}

.footer {
    height: 200px;
    background-color: black;
}

<body>

    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="footer"></div>
</body>

缺点:无法显示溢出的部分（溢出隐藏）。

父级添加after伪元素

.box {
    background-color: royalblue;
}

.box .one {
    height: 100px;
    width: 200px;
    float: left;
    background-color: green;
}

.box .two {
    height: 100px;
    width: 300px;
    float: left;
    background-color: red;
}

.footer {
    height: 200px;
    background-color: black;
}

/* 给父元素添加如下类来清除浮动 */
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear {
    /* IE 6、7 专有 */
    *zoom: 1;
}

<body>
    <div class="box clearfix">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="footer"></div>
</body>

缺点:照顾低版本浏览器

父级添加双伪元素

.box {
    background-color: royalblue;
}

.box .one {
    height: 100px;
    width: 200px;
    float: left;
    background-color: green;
}

.box .two {
    height: 100px;
    width: 300px;
    float: left;
    background-color: red;
}

.footer {
    height: 200px;
    background-color: black;
}

/* 给父元素添加如下类来清除浮动 */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clear {
    /* IE 6、7 专有 */
    *zoom: 1;
}

<body>
    <div class="box clearfix">
        <div class="one"></div>
        <div class="two"></div>
    </div>
    <div class="footer"></div>
</body>

缺点:照顾低版本浏览器。

清除浮动总结：

1. 为什么要清除浮动：

父级没高度
子盒子浮动了
影响下面布局了，我们就应该清除浮动了

定位（position）

为什么使用定位：

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其它盒子。

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。

定位模式

定位模式决定元素的定位方式，通过CSS的position属性来设置。

值	语义
`static`	静态语义
`relative`	相对定位
`absolute`	绝对定位
`fixed`	固定定位

边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4 个属性。

边偏移属性	示例	描述
`top`	`top: 80px`	顶端偏移量，定义元素相对于其父元素上边线的距离
`bottom`	`bottom: 80px`	底部偏移量，定义元素相对于其父元素下边线的距离
`left`	`left: 80px`	左侧偏移量，定义元素相对于其父元素左边线的距离
`right`	`right: 80px`	右侧偏移量，定义元素相对于其父元素右边线的距离

1. 静态定位（默认定位方式）

静态定位按照标准流特性拜访位置，它没有边移量。
静态定位在布局时很少用到。

2. 相对定位（relative）

相对定位是元素在移动位置的时候，相对于它原来位置来说的。

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）

3. 绝对定位（absolute）

绝对定位是元素在移动位置的时候，相对于它祖先元素来说的。

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有之前的位置。（脱离标准流）

定位的使用场景：子绝父相

子级元素绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
父盒子需要加定位限制子盒子在父盒子内显示。
父盒子布局时，需要占有位置，因此父亲只能是相对定位。

总结：父级元素需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

4. 固定定位（fixed）

固定定位是元素固定于浏览器可视区的位置。主要场景：可以在浏览器页面滚动时元素的位置不会改变。

特性：

以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系。
- 不随滚动条滚动。
固定定位不再占有原先的位置。

固定定位也是脱离标准流的，也可以看成是一种特殊的绝对定位。

固定小技巧：固定在版心右侧位置。

让固定定位的盒子left：50%。走到浏览器可视区（也可以看做版心）的一半位置。
让固定定位的盒子margin-left：版心宽度的一般距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

5.粘性定位（sticky）

粘性定位可以被认为是相对定位和固定定位的混合。

特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）。
粘性定位占有原先的位置（相对定位特点）。
必须添加top、left、right、bottom其中的一个才有效。

定位总结

定位模式	是否脱标（脱离标准流）	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
relative相对定位	否（占有位置）	相对于自身位置移动	常用
absolute绝对定位	是（不占有位置）	带有定位的父级	常用
fixed固定定位	是（不占有位置）	浏览器可视区	常用
sticky粘性定位	否（占有位置）	浏览器可视区	当前阶段很少

一定记住相对定位、固定定位、绝对定位两大特点：①是否占有位置。②以谁为基准点移动位置。
学习定位重点学会 “ 子绝父相 ” 。

定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）。

z-index：1;

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
如果属性值相同，则按照书写顺序，后来居上。
数值湖面不加单位。
只有定位的盒子才有z-index属性。

定位的扩展

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto; 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

① left: 50%; 让盒子的左侧移动到父级元素的水平中心位置。

② margin-left: -100px; 让盒子向左移动自身宽度的一半。
定位特殊特性
1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。

绝对定位（固定定位）会完全压住盒子
- 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。
- 但是绝对定位（固定定位）会压住下面标准流所有的内容。
- 浮动之所以不会压住文字，因为浮动产生的最初目的是为了做文字环绕效果的，文字会围绕浮动元素。

注意：实际开发中，一个页面基本都包含了三种布局方式。

11. CSS属性书写顺序

建议遵循以下顺序

布局定位属性：display / position / float / clear / visibility / overflow（建议display第一个写，因为关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
其它属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient…

12. 页面布局整体思路

必须确定页面版心（可视区），我们测量可得知。
分析页面中的行模块，以及每个行模块中的列模块。其是页面布局第一准则。
一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则。
制作HTML结构。遵循先有结构，后有样式的原则。结构最重要。
综上，先理清布局结构，再写代码尤为重要，这需要我们多写多积累。

导航栏注意：

实际开发中不会直接用链接a而是用li包含链接（li+a）的做法。
li+a语义更加清晰，一看这就是有条理的列表行内容。
文字，因为浮动产生的最初目的是为了做文字环绕效果的，文字会围绕浮动元素。

注意：实际开发中，一个页面基本都包含了三种布局方式。

11. CSS属性书写顺序

建议遵循以下顺序

布局定位属性：display / position / float / clear / visibility / overflow（建议display第一个写，因为关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
其它属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient…

在这里插入图片描述