HTML+CSS基础学习笔记

最新推荐文章于 2023-11-20 15:24:50 发布

FFZZLee

最新推荐文章于 2023-11-20 15:24:50 发布

阅读量534

点赞数 1

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/qq_42570487/article/details/106533035

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

CSS基础知识
CSS高级技巧

CSS基础知识

1. CSS的元素显示模式

html的元素通常分为块元素和行元素。

1.1 块元素

常见的块元素有h1、h6、div、p、ul、ol、li等，其中 div 是最典型的块级元素。

块级元素的特点：

① 自己独占一行

② 高度、宽度、外边距以及内边距都可以控制

③ 宽度默认是容器（父级宽度）的100%

④ 是一个盒子容器，里面可以放行内或块级元素

注意：

文字类的元素不能使用块级元素
p标签主要用于存放文字，
里面不能放会计元素，比如div
h1-h6等都是文字类块级标签，也不能放其他块级元素

1.2 行内元素

常见的行内元素有a,strong,b,em,i,del,s,ins,u,span等，其中 span 标签是最典型的行内元素，有的地方也将行内元素称为内联元素。

行内元素的特点：

① 相邻行内元素在一行上，一行可以显示多个；

② 高、宽直接设置是无效的；

③ 宽度默认是它本身内容的宽度；

④ 行内元素只能容纳文本或其他行内元素。

注意：

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

1.3 行内块元素

在行内元素中有几个特殊的标签 img、input、button、td，同时具有块级元素和行内元素的特点。

行内块元素的特点：

① 相邻行内元素（行内块）在一行上，它们之间会有空白缝隙，一行可以显示多个；

② 默认宽度是它本身内容的宽度；

③ 高度、宽度、外边距以及内边距都可以控制。

1.4 元素显示模式总结

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

1.5 元素显示模式的转换

简单理解：一个模式的元素需要另一种模式的特性，比如增加a标签的触发范围（给a标签设置宽度和高度）。

行内元素转换为块级元素： display: block
块级元素转换为行内元素： display: inline
行内元素转换为行内块元素： display: inline-block

1.6 单行文字垂直居中

css没有提供文字垂直居中的代码。解决方案：让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中。

2. CSS的背景

通过CSS背景属性，给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

2.1 背景颜色

background-color属性定义了元素的背景颜色。

background-color:颜色

背景颜色默认是transparent(透明)

2.2 背景图片

background-image属性描述了元素的背景图像，实际开发常用于装饰性的小图片或超大背景图，优点是便于控制位置。

            background-image: url(images/logo.png);
            /* 背景图片不平铺 */
            /* background-repeat: no-repeat; */

            /* 默认背景图是平铺的 */
            /* background-repeat: repeat; */

            /* 沿x轴平铺 */
            /* background-repeat: repeat-x; */

            /* 沿y轴平铺 */
            background-repeat: repeat-y;

            /* 页面元素可以添加背景颜色 */
            background-color: pink;

2.3 背景位置

利用background-position属性可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思是：x、y坐标，可以使用方位名词或精确单位

参数值	说明
length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \|center \|right 方位名词

参数是方位名词：

如果指定的两个值都是方位名词，两个值前后顺序无关，如left top 和 top left
如果只指定一个方位名词，则第二个值默认是居中
如果参数是精确坐标，第一个必须是x，第二个必须是y
如果只指定一个数值，该数值一定是x，另一个默认垂直居中

2.4 背景图像固定

background-attchment属性设置背景图片是否固定或者随着页面的其余部分滚动

	background-attchment : scroll | fixed

参数	说明
scroll	背景图像是随着对象内容滚动
fixed	背景图像固定

2.5 背景色半透明

 background: rgba(0,0,0,0.3)

最后一个参数是alpha透明度，取值在0-1之间
背景色半透明，但是盒子中的内容并会有任何影响

3 CSS的三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先级

3.1 层叠性

相同的选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式，层叠行主要解决样式冲突的问题。

层叠性原则：

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

3.2 继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

3.2.1 行高的继承

        body {
            color: pink;
            font: 12px/1.5 'Microsoft YaHei';
        }

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前元素的文字大小*1.5

3.3 优先级

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

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器权重如下表所示：

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

继承的权重是0，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重值。

4. 盒子模型

页面布局的三大核心：盒子模型，浮动和定位。

4.1 盒子模型概念

CSS盒子模型本质就是一个盒子，封装周围的HTML元素，包括：边框、外边距、内边距、和实际内容。

4.2 边框（border）

border可以设置元素的边框，边框由三部分组成：宽度、边框样式、边框颜色

语法：

border : border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框简写：

border: 5px solid pink;
border-top: 5px solid blue;

表格的细线边框：

border-collapse属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框。

语法：

border-collapse:collapse;

边框会影响盒子的实际大小。

4.2.1 内边距

padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

复合写法：

值的个数	表达意思
padding: 5px	1个值，代表上下左右都有5像素内边距
padding: 5px 10px	2个值，代表上下内边距都是5像素，左右内边距是10像素
padding: 5px 10px 20px	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding: 5px 10px 20px 30px	4个值，待变上5像素，右10像素，下20像素，左30像素顺时针

padding会影响盒子的实际大小

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

4.2.2 外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin的简写方式跟padding一致。

外边距的典型应用：

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定宽度
盒子左右的外边距都设置为auto

.header {
    width:960px;
    margin:0 auto;
}

常见写法：

margin-left:auto; margin-right:auto;
margin:auto;
margin:0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

外边距合并：

使用margin定义元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象称为相邻块元素垂直外边距的合并

外边距的合并

解决方案：尽量只给一个盒子添加margin值

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值。

外边距塌陷

解决方法：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden

还有其他方法：比如浮动、固定、绝对定位的盒子不会有塌陷问题。

4.2.3 清除内外边距

网页元素很多带有默认的内外边距，而且不同的浏览器默认的也不一致，因此在布局前，首先要清除网页布局元素的内外边距。

* {
	padding:0; 
	margin:0;
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块级元素就可以了

新知识点：去掉li前面的项目符号（圆点）

语法：

list-style: none

4.2.4 圆角边框

border-radius属性用于设置元素的外边框圆角，语法：

border-radius:length;

参数值可以为数值或百分比的形式
如果是正方形，想设置为圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
如果是个矩形，设置为高度的一半即为圆角矩形
该属性是一个简写属性，可以跟4个值，分别代表左上角、右上角、右下角、左下角

4.3 阴影

4.3.1 盒子阴影

语法：

box-shadow:h-shadow v-shadow blur spread color inset;

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

注意：

默认是外部阴影（outset）,但是不可以写这个单词，会导致阴影无效
盒子阴影不占用空间，不会影响其他盒子排列

5. 浮动（float）

5.1 传统网页布局的三种方式

CSS提供了三种传统布局方式：

标准流（普通流）
浮动
定位

5.1.1 标准流

所谓标准流，就是标签按照规定好的默认方式排列。

块级元素会独占一行，从上向下顺序排列。
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

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

5.2 浮动的概念

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含快或另一个浮动框的边缘。

语法：

选择器 { float: 属性值;}

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

5.3 浮动的特性

浮动元素会脱离标准流（脱标）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会有行内块元素的特性

5.3.1 脱标

设置了浮动的元素最重要特性：

脱离标准普通流的控制移动到指定位置
浮动的盒子不再保留原先的位置

5.3.2 行内显示

如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐。

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

5.3.3 具有行内块元素的特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

如果块级盒子没有设置宽度。默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来定。
浮动的盒子中间是没有缝隙的，是紧挨着的
行内元素同理

5.4 浮动的使用

为了约束浮动元素的位置，网页布局一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

5.5 清除浮动

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

语法：

选择器 {clear:属性值}

属性值	描述
left	不允许左侧有浮动元素，清除左侧浮动的影响
right	不允许右侧有浮动元素，清除右侧浮动的影响
both	同时清除左右两侧浮动的影响

清除浮动的策略：闭合浮动

5.5.1 清除浮动的方法

额外标签法也称为隔离法，是W3C推荐做法。
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

额外标签法：

额外标签法会在浮动元素末尾添加一个空的标签，例如

，或者其他标签元素。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构比较差

注意：要求这个新加的空标签必须是块级元素。

父级添加overflow属性:

可以给父级元素添加overflow属性，将其属性值设置为hidden,auto或scroll.

优点：代码简洁
缺点：无法显示溢出部分

父级添加after伪元素：

:after方式是额外标签法的升级版，也是给父元素添加。

语法：

        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

优点：没有增加标签，结构更简单
缺点：要兼容浏览器

父级添加双伪元素：

语法：

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

优点：代码简洁
缺点：要兼容低版本浏览器

6. 学成在线案例

6.1 页面布局整体思路

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

导航栏注意事项：

实际开发中，不会直接用a标签，而是用户li包含链接a的做法。

li>a语义更清晰。
如果直接用a，搜索引擎容易辨别为有对齐关键字嫌疑（故意堆砌挂机案子容易被搜索引擎有降权的风险）

7. 定位

7.1 为什么需要定位

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

7.2 定位组成

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

定位 = 定位模式 + 边偏移。

7.2.1 定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可分为四个：

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

7.2.2 边偏移

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

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

7.3 定位模式

7.3.1 静态定位 (了解)

静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器 {position : static}

静态定位按照标准流特性摆放位置，没有边偏移
静态定位布局时很少用

7.3.2 相对定位(重要)

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

语法：

选择器 {position : relative}

相对定位特性：

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

7.3.3 绝对定位(重要)

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

语法：

选择器 {position : absolute}

绝对定位的特性：

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

7.3.4 子绝父相

子级是绝对定位的话，父级用相对定位。

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

7.3.5 固定定位(重要)

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

选择器 {position : fixed}

固定定位特性：

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

7.3.6 粘性定位(了解)

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

语法：

选择器 {position : sticky; top : 10px}

粘性定位特性：

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

7.4 注意事项

7.4.1 定位叠放次序

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

语法：

选择器 { z-index : 1}

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

7.4.2 定位特殊性

行内元素添加绝对或固定定位，可以直接设置高度和宽度。
块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容的大小。
浮动元素、绝对定位或固定定位元素不会触发外边距合并的问题。
浮动元素会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。
绝对定位（固定定位）会压住下面标准流所有的内容。

8. 元素的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来。

display 显示隐藏
visibility 显示隐藏
overflow 溢出显示隐藏

8.1 display属性

display:none；隐藏对象
display:block; 除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置。

8.2 visibility属性

visibility属性用于指定一个元素应可见还是隐藏。

visibility: visible;元素可视
visibility:hidden;元素隐藏

visibility隐藏元素后，继续占有原来的位置。

8.3 overflow溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时：

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏
scroll	不管超出内容否，总显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

CSS高级技巧

1. 精灵图

目的：为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度。

总结：

精灵图主要针对于小的背景图片的使用。
主要借助北京位置来实现—background-position.
一般情况下精灵图都是负值。（x轴右边是正值，左边是负值，y轴同理）

2. 字体图标

字体图标展示的是图标，本质属于字体。

字体图标优点：

轻量：一个图标字体比一系列的图像要小，一旦字体加载了，图标马上就会渲染，减少服务器请求。
灵活性：本质是文字，可以随意改变颜色、产生阴影，透明效果、旋转等。
兼容性：几乎所有浏览器都支持。

3. 界面样式

3.1 鼠标样式

li {cursor: pointer}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

3.2 轮廓线

给表单添加 outline:0；或outline:none;样式之后，就可以去掉默认的蓝色边框。

input {outline:none }

3.3 防止文本域拖拽

语法：

textarea {resize: none}

3.4 vertical-align 属性应用

css的vertical-align属性：经常用于设置图片或者表单（行内块元素）和文字垂直对齐，只针对行内块元素或者行内元素。

语法：

vertical-align: baseline | top | middle | bottom

属性值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐。
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。

解决图片底部默认空白缝隙问题：

原因：行内块元素会和文字的基线对齐。