css学习之道

最新推荐文章于 2024-08-02 13:35:44 发布
最新推荐文章于 2024-08-02 13:35:44 发布
阅读量421 收藏
点赞数 1
分类专栏： css学习之道 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_29421531/article/details/121639508
版权

CSS 概述

产生背景

• 从 HTML 被发明开始，样式就以各种形式存在，最初的 HTML 只
包含很少的显示属性。
• 随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了
很多显示功能，例如文本格式化标签。
• 但是随着这些功能的增加，HTML 变的越来越杂乱，而且 HTML
页面也越来越臃肿。
• 于是 CSS 便诞生了

发展过程

版本说明
css11995年12月，层叠样式的第一份正式标准完成，成为w3c推荐标准
css21997年初，w3c组织负责css的工作组开始讨论第一版没有涉及到的问题。讨论结果组成了1998年5月出版的css规范第二版
css3css3是css层叠样式技术的升级版，于1999年开始制定，2001年5月23日完成css3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局的模块

CSS 概念

CSS：层叠样式表（Cascading style sheets）
CSS作用是什么
• 给页面中的HTML标签设置样式
CSS 可以说是网页的美容师， 让我们的网页更加美观。
​

CSS 语法规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

书写位置

css 的代码根据书写位置不同分为四种书写方式：内联式、内嵌式、
外联式、导入式。
​

内联式

内联式，也被习惯叫做行内式。
书写位置：在 HTML 标签之上的 style 属性中书写 css 样式。

<p style="font-size: 30px;">这是第二段文字内容p</p>

内联式缺点
a、内联式必须写在标签上，没有完全脱离 HTML 标签。
b、 css 样式代码让标签结构繁重，不利于 HTML 结构的解读。
c、一个内联式的 css 代码，只能给一个标签使用，如果多个标签有相同的样式，同
样的 css 代码需要书写多次，增加代码量。
因此，实际工作中不会使用内联式（行内式）编写 css 代码。
​

内嵌式

书写位置：在 HTML 文件中， 标签内部有一个 <style> 标签。
<style> 标签书写在< title> 标签后面，所有 css 代码书写在 

<style type="text/css">
    /* css规则：选择器、属性 */
    p,div {
      font-size: 30px;
    }
  </style>

内嵌式优点：
a.实现了结构与样式的初步分离
b.多个标签可以共用一段代码设置相同的样式，节省代码量
缺点：
a.结构与样式没有完全分离，代码依旧写在html中;
b.css只能够给一个html文件使用，不能被多个html文件使用；
c.在html中如果css代码太多，会造成头重脚轻

外联式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="01.css" type="text/css">
</head>
<body>
  <p>这是一段文字内容</p>
  <div>有一段文字div</div>
  <p>这是第二段文字内容p</p>
  <h1>03的一级标题</h1>
</body>
</html>

•外联式 CSS，也可以叫做外链式 CSS、外部 CSS。
•书写位置：在一个单独的扩展名为 .css 的文件中。
•书写语法：内部代码与内嵌式样式表中

外联式优点
①实现了 HTML 和 css 完全分离。
②多个 HTML 文件可以共用一个 css 文件，便于提取公共 css，减少代码量。
③可以实现一个 css 变化，多个 HTML 页面同时变化，减少工作量。
④一个 HTML 文件可以引入多个 css 文件，可以实现同一个页面中 css 代码分层。
​

导入式

•书写位置：在内嵌式样式表 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import url(02.css);
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <p>这是一段文字内容</p>
  <div>有一段文字div</div>
  <p>这是第二段文字内容p</p>
</body>
</html>

导入式问题
•导入式样式表的作用与外联式样式表基本相同。
•但是由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果
网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好。
•实际工作中，较少使用导入式，推荐使用外联式样式表。
​

实际应用
•小型案例：可以使用内嵌式 CSS。
•实际工作、大型网站项目：推荐使用外联式 CSS。

CSS常用样式

基础选择器

1.标签选择器

结构：标签名 { css属性名：属性值； }
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：

  1. 标签选择器选择的是一类标签，而不是单独某一个
  2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
    • 优点：可以选中所有的同名标签，设置所有同名标签的公共样式。
    • 缺点：只能实现全选，不能对局部的标签添加特殊样式。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      color: red;
    }
    h3 {
      color: green;
    }
  </style>
</head>
<body>
  <h3>三级标题标签内容</h3>
  <p>段落标签内容</p>
  <p>段落标签内容</p>
  <h3>三级标题标签内容</h3>
  <p>段落标签内容</p>
  <p>段落标签内容</p>
  <h3>三级标题标签内容</h3>
  <p>段落标签内容</p>
  <p>段落标签内容</p>
</body>
</html>

2.id 选择器特点

结构：#id属性值 { css属性名：属性值； }
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签
取不同的 id 名，分别选中设置。
​
缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。

3.类选择器

结构：.类名 { css属性名：属性值； }
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：

  1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
  2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
  3. 一个标签可以同时有多个类名，类名之间以空格隔开
  4. 类名可以重复，一个类选择器可以同时选中多个标签
    ​

类选择器的优点
①通过一个类选择器进行多选，选中多个标签，添加公共样式。
②一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样
式和单独样式，节省代码量。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .demo {
      color: red;
    }
    .ps {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h3 class="demo">三级标题标签内容</h3>
  <p class="demo ps">段落标签内容</p>
  <p class="demo">段落标签内容</p>
  <h3>三级标题标签内容</h3>
  <p>段落标签内容</p>
  <p>段落标签内容</p>
  <h3>三级标题标签内容</h3>
  <p>段落标签内容</p>
  <p>段落标签内容</p>
</body>
</html>

实际工作中，通常我们有一个使用规律：类上样式(CSS)，id 上行为(JavaScript)。

4.通配符选择器

结构：{ css属性名：属性值； }
作用：找到页面中所有的标签，设置样式
• 优点：可以实现全选，简化书写。
• 缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使
用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
• 注意：实际上线的网站不允许使用 去清除默认内外边距。
• 不过普通的案例，代码量较少时，为了节省书写，可以使用通配符
​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <h3>三级标题标签内容</h3>
  <p>段落标签内容</p>
  <p>段落标签内容</p>
  <h3>三级标题标签内容</h3>
  <p>段落标签内容</p>
  <p>段落标签内容</p>
  <h3>三级标题标签内容</h3>
</body>
</html>

Css选择器（高级选择器 ）

1.后代选择器

• 通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器。
• 后代选择器也叫包含选择器。
• 书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。
• 选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签。
• 注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是
父子关系。
后代选择器特点
• 优点：减少 class 属性的定义使用，选择效率更高。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* .box1 ul li p {
      color: red;
    } */
    .box1 p {
      color: green;      
    }
  </style>
</head>
<body>
  <div class="box1">
    <ul>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
    </ul>
    <p>这是 box1 标签内部的段落</p>
  </div>
  <div class="box2">
    <ul>
      <li><p>这是 box2 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box2 标签中 li 标签内部的段落</p></li>
    </ul>
    <p>这是 box2 标签内部的段落</p>
  </div>

</body>
</html>

2.交集选择器

通过一个标签之上满足所有的基础选择器的需求去选择标签。
• 书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。
• 选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中。
• 比较常见的是标签与类的交集。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* p.ps.demo {
      color: red;
    } */
    .box1 p.demo {
      color: green;
    }
  </style>
</head>
<body>
  <h2 class="demo">这是一个二级标题</h2>
  <div class="box1">
    <ul>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p class="demo ps">这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
    </ul>
    <p>这是 box1 标签内部的段落</p>
  </div>
  <div class="box2">
    <ul>
      <li><p>这是 box2 标签中 li 标签内部的段落</p></li>
      <li><p class="demo">这是 box2 标签中 li 标签内部的段落</p></li>
    </ul>
    <p>这是 box2 标签内部的段落</p>
  </div>

</body>
</html>

3.并集选择器

• 不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成
浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。
• 书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
• 选择范围：是所有的单独选择器选中的标签的并集集合。
• ①如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。
• ②可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* h2 {
      color: red;
    }
    .demo {
      color: red;
    } */
    /* h2,.demo {
      color: red;
    } */
    body,h2,div,ul,li,p {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <h2>这是一个二级标题</h2>
  <div class="box1">
    <ul>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p class="demo">这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
    </ul>
    <p>这是 box1 标签内部的段落</p>
  </div>

</body>
</html>

字体和文本样式

字体

1. 字体 font-family

作用：定义元素内文字的字体。
属性名 k ：font-family，字体属于 font 综合属性的一个单一属性。
属性值 v ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号分隔。
**常用字体 **
常用的中文字体：
宋体 SimSun
微软雅黑 Microsoft Yahei
常用的英文字体：
Arial
consolas
如果不设置字体属性，不同的浏览器有自己的默认字体。
​

2.字号 font-size

属性名：font-size
取值：数字 + px
注意点：
• 谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效

相对长度单位说明
px像素值，最常用的单位
em倍数，继承祖先元素设置的字号的倍数
%百分比，继承自祖先元素设置的字号的百分比
绝对长度单位说明
in英寸
cm厘米
mm毫米
pt点

实际应用
• 网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普遍使用14px+。
• 尽量使用12px、14px、16px等偶数的数字字号，ie6 等老式浏览器支持奇数会有bug。
• 实际工作中的字号，需要以设计图为准
​

3.字体粗细font-weight

属性名：font-weight
取值：
关键字

正常normal
加粗bold

纯数字100-900

正常400
加粗700

注意点：
• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
• 实际开发中以：正常、加粗两种取值使用最多。

4.字体样式font-style

属性名：font-style
取值：
• 正常（默认值）：normal
• 倾斜：italic
​

5.颜色 color

作用：给文字设置颜色。
属性名 k ：color
属性值 v ：颜色名、颜色值。
​

颜色名

红色 red
橙色 orange
黄色 yellow
绿色 green
青色 cyan
蓝色 blue
紫色 purple
黑色 black
白色 white
金色 gold
粉色 pink
浅黄色 lightyellow
黄绿色 yellowgreen
天蓝色 skyblue

颜色值
颜色值指使用具体颜色的数值表示。
包括： rgb 模式和十六进制模式写法。
rgb 模式
​

• rgb 模式：是根据红绿蓝三原色进行混合而成的颜色模式。
• 每个原色的取值范围是0-255，一共256个数值。三个原色共能混合成
1677多万种颜色。
• 书写方法：rgb(红,绿,蓝)
​

常用颜色的 rgb 色值：

红色 rgb(255,0,0)
绿色 rgb(0,255,0)
蓝色 rgb(0,0,255)
黑色 rgb(0,0,0)
白色 rgb(255,255,255)
灰色 rgb(128,128,128)

十六进制模式
• 十六进制模式：是 rgb 模式的一种简化写法，使用十六进制的数字字符去替换十进
制的 0–255 的数字。
• 十六进制：逢十六进一，每个数位上只能出现 0-9，a-f 之间的字符。
• 书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换。
0→00
255→ff
• 书写方式：使用 # 开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。
常用颜色的十六进制色值：

红色 #ff0000
绿色 #00ff00
蓝色 #0000ff
黑色 #000000
白色 #ffffff
灰色 #808080

红色 #f00
绿色 #0f0
蓝色 #00f
类似 #808080 是不能进行简化的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      /* color: blue; */
      /* color: rgb(0,255,0); */
      /* color: #0000f0; */
      /* color: #808080; */
      color: #00f;
      font-family: "Candara","Arial","微软雅黑","宋体";
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>这是一个段落内容。abc</p>
</body>
</html>

文本样式

1.文本缩进：text-indent

属性名：text-indent
取值：
• 数字+px
• 数字+em（推荐：1em = 当前标签的font-size的大小）
​

2.文本水平对齐方式：text-align

属性名：text-align：left、right、center
注意点：
• 如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
​

3.文本修饰：text-decoration

属性名：text-decoration
取值：

属性值效果
underline下划线（常用）
line-through删除线（不常用）
overline上划线（不常用）
none无线

注意点： • 开发中会使用 text-decoration : none ; 清除a标签默认的下划线
​

水平居中方法总结 text-align : center
text-align : center 能让那些元素水平居中？

  1. 文本
  2. span标签、a标签
  3. input标签、img标签
    注意点：
  4. 如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置
    ​

水平居中方法总结 margin : 0 auto
如果需要让div、p、h（大盒子）水平居中？
• 可以通过margin : 0 auto ; 实现
​

注意点：

  1. 如果需要让 div、p、h（大盒子） 水平居中，直接给 当前元素本身 设置即可
  2. margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
    ​
4.line-height行高

作用：控制一行的上下行间距
属性名：line-height
取值： • 数字+px • 倍数（当前标签font-size的倍数）
应用：

  1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
  2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距
    ​

盒子实体化三属性

如果想在浏览器中具体看到一个盒子占有的实际
位置，需要设置盒子可以实体化的三属性。
实体化属性

背景颜色

属性名：background-color（bgc）
属性值： • 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
注意点：
• 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

背景图片

属性名：background-image（bgi）
属性值：
注意点：
• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

背景平铺

属性名：background-repeat（bgr）
属性值：
image.png

背景位置

属性名：background-position（bgp）
注意点：
• 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
​

背景相关属性连写

属性名：background（bg）
属性值： • 单个属性值的合写，取值之间以空格隔开
书写顺序： • 推荐：background：color image repeat position

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      background-image:url("");
    }
  </style>
</head>
<body>
  <div>这是一个div盒子</div>
</body>
</html>

img标签和背景图片的区别
img标签是一个标签，不设置宽高默认会以原尺寸显示
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
​

元素显示模式

1.块级元素

属性：display：block
显示特点：

  1. 独占一行（一行只能显示一个）
  2. 宽度默认是父元素的宽度，高度默认由内容撑开
  3. 可以设置宽高
    代表标签： • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

2.行内元素

属性：display：inline
显示特点：

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高
    代表标签： • a、span 、b、u、i、s、strong、ins、em、del……
    ​

3.行内块元素

属性：display：inline-block
显示特点：

  1. 一行可以显示多个
  2. 可以设置宽高
    代表标签：
    • input、textarea、button、select……
    • 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4.元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

属性效果使用频率
display:block转换成块级较多
display:inline-block转化成行内块元素较多
display:inline转换成行内元素较少

HTML嵌套规范注意点
​

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
但是：p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签
​

居中方法总结
​

CSS 三大特性

理解层叠性和继承性
CSS 的概念中，除了前面提到的样式外，还有一个重要的
概念就是层叠式，层叠式是贯穿整个css的一个性质，包
含继承性和层叠性。

继承性

• 如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标
签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
• 能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。
可以继承的常见属性：

  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-align
  4. line-height
  5. ……
    继承性应用
    • 继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖
    先级标签比如 ，后期所有的后代标签都可以从 进行继承。
body{
font‐size: 14px;
font‐family: "微软雅黑";
color: red;
}

常见应用场景：

  1. 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
  2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

层叠性

• 思考问题：同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文字样式，后代中该继承哪个祖先级的？
• 解决方法：就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。

  1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
  2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

• 判断最终胜出的属性是谁，需要依赖判断优先级

优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式： • 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important>
注意点：

  1. !important写在属性值的后面，分号的前面！
  2. !important不能提升继承的优先级，只要是继承优先级最低！
  3. 实际开发中不建议使用 !important
    ​

! important 关键字
• 如果在比较选择器权重的过程中，遇见一个 !important 关键字，可以将某条 CSS
样式属性的权重提升到最大。
​

行内式权重
• 行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。
• 但是，与 !important 关键字相比权重要低。
​

权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：（每一级之间不存在进位）
​

盒模型属性

盒子模型的介绍

**盒子的概念 **

  1. 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
  2. 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
    盒子模型
    CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin ）构成，这就是 盒子模型
    常见盒模型区域
    • 盒模型的属性中，根据不同属性的效果，可以划分区域：
    • 书写元素内容区域：width+height
    • 盒子可以实体化的区域：width+height+padding+border
    • 盒子实际占位的位置：width+height+padding+border+margin
    ​

盒模型图

image.png

宽度 width

作用：设置可以添加元素内容的区域的宽度。
属性值：

属性值说明
auto默认值，浏览器可以计算的实际宽度
px像素值定义的宽度
%定义参考父元素宽度width的百分比宽度

特殊应用
如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算出实际宽度，例如 <div> 元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 区域，如果是 <span> 元素等不需要独占一行的，其 width属性的值是内部元素内容自动撑开的宽度。
<body> 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度。

高度 height

作用：设置可以添加元素内容的区域的高度。
属性值：

属性值说明
auto默认值，浏览器可以计算的实际宽度
px像素值定义的宽度
%定义参考父元素宽度height的百分比宽度

特殊应用
• 如果一个元素不添加 height 属性，默认属性值为auto，浏览器会自动计算出实际
高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。
​

内边距 padding

作用：设置的是元素的边框内部到宽高区域之间的距离。
特点：可以去加载背景，不能书写嵌套的内容。
属性值：常用px为单位的数值。
padding 是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性。

p{
	padding-top:10px;
	padding-right:20px;
	padding-bottom:30px;
	padding-left:40px;
}

简写
有时为了化简书写，一般习惯将四个方向的单一属性进行合写成 padding 属性。
padding 属性值：可以有 1-4 个值，值之间用空格进行分隔。
根据四个方向属性值不同，padding 有多种值的书写表示方法。
根据 padding 的属性值的个数不同，区分了四种表示法：
​

四值法
设置四个属性值，分配方向上、右、下、左。
​

边框 border

作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层。
属性值：由三个值组成，分为线的宽度、线的形状、线的颜色 。
border 属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式
​
按照属性值的类型划分

线宽：border-width
线型：border-style
颜色：border-color
作用：设置边框线的宽度。
属性值：常用px形式的数值，四个方向都有边框，属性值类似于 padding，也有四
种值的写法。
​

线型 border-style
作用：设置边框的线条形状。
属性值：形状的单词，总体也是类似 padding 的综合属性写法。
属性值的单词可能性：

边框颜色 border-color
作用：设置边框的颜色。
属性值：颜色名或颜色值，整体类似 padding 综合属性写法。
​
根据边框的方向划分
上边框：border-top
右边框：border-right
下边框：border-bottom
左边框：border-left
每个单一属性都必须与复合属性 border 一致，设置三个属性值。

p {
 border-top:10px solid #fff;
 border-right: 10px solid #0f0;
}
外边距 margin

作用：设置的是盒子与盒子之间的距离。
特点：不能渲染背景。
属性值：常用 px 为单位的数值。
外边距的设置方式与内边距 padding 一模一样的。
单一属性
margin‐top: 20px;
margin‐right: 20px;
margin‐left: 20px;
margin‐bottom: 10px;

复合属性的四种值的写法
margin: 10px 20px 30px 40px;
margin: 10px 20px 30px;
margin: 10px 20px;
margin: 10px;
​

盒模型扩展应用

清除默认样式

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的 margin和padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• <ul> 和 <ol> 两种列表有默认的列表前缀：清除 list--style 属性。
• <a> 标签的默认样式，顺带设置页面中常用的a的公共样式：设置 color 和 text- decoration。
• 清除默认加粗效果：设置font-weight。
​


还可以给
标签设置整体文字样式，让大部分后代标签全部去继承。

body{
  color:#666;
  font-size:14px;
  font-family:"Arial","consolas","Microsoft Yahei","SimSun";
}

height 应用

高度 height 应用
• 根据不同的需求，高度属性可以设置也可以不设置。
• 如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载。
• 如果不设置高度：会根据标签内部内容高度自动撑开。
• 以 <div> 标签为例，根据情况不同选择是否设置高度：
​

必须设置高度
设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。 自身盒子内部内容过多会溢出盒子区域。
overflow 属性
设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。
可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置
​

必须不设置高度
要求盒子高度必须自适应内部内容的高度。
或者设置height的属性值是自动的。

水平垂直居中总结

在网页中经常见到元素或者文字居中的效果。

文本水平居中

水平居中：text-align属性。
不论单行或多行都可以设置。

文本垂直居中

单行文本垂直居中：让文字行高 line-height 等于盒子高度 height。
多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同。
​

元素垂直居中

一个元素内部嵌套的子元素，在父元素中居中。
垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。
​

元素水平居中

针对类似

样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto。
原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。
​

父子盒模型

一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度 width。父元素的width ≥ 所有子元素width + padding + border + margin如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素.
​

特殊情况：盒模型自动内减
父子盒模型中，只有一个子元素，且子元素是类似

标签必须占一行的。不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减，子元素的 width 会自动收缩尺寸。子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。
​

margin 塌陷现象

margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的
真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到
了边距值大的值内部。
​

同级元素塌陷
上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是
较大的那个值。
​

父子元素塌陷
父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的
margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生
margin 塌陷。
​

解决 margin 塌陷问题的方法
①同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆
分。
②父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距
分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，
而是父级的 padding 挤出来。
另外注意：水平方向的 margin 没有塌陷现象。
​

margin外边距折叠现象

外边距正常情况

场景：水平布局 的盒子，左右的margin正常，互不影响
结果：最终两者距离为左右margin的和
​

外边距折叠现象 – ① 合并现象

场景：垂直布局 的 块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：避免就好 • 只给其中一个盒子设置margin即可
​

外边距折叠现象 – ② 塌陷现象

场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
结果：导致父元素一起往下移动
解决方法：

  1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
  2. 给父元素设置overflow：hidden
  3. 转换成行内块元素
  4. 设置浮动
    ​

行内元素的margin和padding无效情况

场景：给行内元素设置margin和padding时
结果：

  1. 水平方向的margin和padding布局中有效！
  2. 垂直方向的margin和padding布局中无效！

伪元素

伪元素：一般页面中的非主体内容可以使用伪元素
区别：

  1. 元素：HTML 设置的标签
  2. 伪元素：由 CSS 模拟出的标签效果
    种类：
伪元素作用
::before在父元素内容的最前面添加一个伪元素
::after在父元素内容的最后面添加一个伪元素

注意点：

  1. 必须设置content属性才能生效
  2. 伪元素默认是行内元素
    ​

标准文档流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素 常见标准流排版规则：

  1. 块级元素：从上往下，垂直布局，独占一行
  2. 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
    ​

脱离标准流
display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下
加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准
流的限制。
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。
​

浮动属性

浮动定义
• 浮动是一种非常重要的布局属性。
• 属性名：float，漂流、浮动的意思。
• 属性值：
left 左浮动
right 右浮动
• 作用：
图文环绕
让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。
​

浮动的特点

  1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

  2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素

  3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

  4. 浮动元素会受到上面元素边界的影响

  5. 浮动元素有特殊的显示效果

    • 一行可以显示多个
    • 可以设置宽高
    ​

清除浮动方法

清除浮动一：父元素设置高度

• 解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。
• 问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。
​

清除浮动二：clear属性

clear，清除。
作用：清除标签元素自身受到的前面的浮动元素的影响。
属性值：
left 清除前面左浮动带来的影响
right 清除前面右浮动带来的影响
both 清除前面所有浮动带来的影响
给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的
位置。
• clear: both;
• 解决：浮动元素影响后面元素标准流位置和贴边。
• 问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确。
​

清除浮动三：隔墙法

外墙法：在两个大的父盒子之间，添加一个空的
标签，标签上带有 clear： both 属性。
​

• 外墙法
• 解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离。
• 问题：父元素没有高度自适应。
​

• 内墙法：在父元素内部，所有的浮动子元素后面添加一个空的

元素，标签高
度为 0，添加 clear 属性。
​

• 内墙法
• 解决：父元素高度自适应，浮动影响后面的元素位置和贴边。
• 缺点：浮动是 css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题，
如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗
余。

清除浮动四：伪类

本质是使用伪类方法利用css代码书写一堵内墙。伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。:after：这个伪类表示选中的是某个标签内部的最后的位置。
书写方法：前面必须加普通的选择器，后面连续书写伪类名称。
将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。

    .clearfix::after {
         content: "1";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden; /*将创建的元素占位隐藏*/
       }
清除浮动五：溢出隐藏

给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以解决浮动的所有问题
补充：overflow 属性
元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏
​

元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适
应内容的高度。
​

总结
如果父元素高度是固定的，建议使用 height 属性解决。
如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。
​

BFC的介绍

块格式化上下文（Block Formatting Context）：BFC
• 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
创建BFC方法：

  1. html标签是BFC盒子
  2. 浮动元素是BFC盒子
  3. 行内块元素是BFC盒子
  4. overflow属性取值不为visible。如：auto、hidden…
  5. ……
    ​

BFC盒子常见特点：

  1. BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动
  2. BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷
  3. ……
    伪类

定位属性

1.定位属性 position

属性名：position。
属性值：

  • relative 相对定位
  • absolute 绝对定位
  • fixed 固定定位

作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移。

定位方式属性值
静态定位static
相对定位relative
绝对定位absolute
固定定位fixed

2.偏移量属性

定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。

  • 水平方向：left、right。
  • 垂直方向：top、bottom。

属性值：常用 px 为单位的数值，或者百分比。
​

3.静态定位

静态定位是默认值，就是之前认识的标准流
注意点：

  1. 静态定位就是之前标准流，不能通过方位属性进行移动
  2. 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
    ​

4.相对定位

属性值：relative，相对的意思。
参考元素：标签加载的原始位置。
必须搭配偏移量属性才能发生位置移动。

.box{
  position:relative;
  top:100px;
  left:100px;
}

相对定位的性质
性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。元素显示效果上，原位留坑，形影分离。
注意①：偏移量属性的值是区分正负的。
正数：表示偏移方向与属性名方向相反。
负数：表示偏移方向与属性名方向相同
注意②：同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和right 属性，只会加载 left 属性。垂直方向只加载 top 属性。
注意③：由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的 正值等价于 bottom 的负值。 为了方便记忆，可以选择只使用 left、top 组合。
​

应用场景：

  1. 配合绝对定位组CP（子绝父相）
  2. 用于小范围的移动
    ​

5.绝对定位

属性值：absolute
参考元素：拼爹型定位，相对于非静态定位的父元素进行定位移动
特点：

  1. 需要配合方位属性实现移动
  2. 默认相对于浏览器可视区域进行移动
  3. 在页面中不占位置 → 已经脱标
    应用场景：
    配合绝对定位组CP（子绝父相）
    ​

绝对定位相对于谁移动？

  1. 祖先元素中没有定位 → 默认相对于浏览器进行移动
  2. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
    ​

子绝父相水平居中案例
需求：使用子绝父相，让子盒子在父盒子中水平居中（父子元素任意宽度下都能实现）

  1. 子绝父相
  2. 先让子盒子往右移动父盒子的一半

• left：50%

  1. 再让子盒子往左移动自己的一半

• 普通做法：margin-left：负的子盒子宽度的一半
缺点：子盒子宽度变化后需要重新改代码
• 优化做法：transform：translateX(-50%)
优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码
​

（案例）子绝父相水平垂直都居中案例

  1. 子绝父相
  2. left：50%；
  3. top：50%；
  4. transform：translate（-50%，-50%）；
.son {
      /* 1、子绝父相 */
      position: absolute;

      /* 2、让子盒子往右走大盒子一半 */
      left: 50%;

      /* 3、让子盒子往下走大盒子一半 */
      top: 50%;

      /* 4、让子盒子往左+往上走自己的一半 */
      /* transform: translateX(-50%); */
      /* transform: translateY(-50%); */
      /* 合写： */
      transform: translate(-50%,-50%);

      width: 200px;
      height: 100px;
      background-color: blue;
    }

6.固定定位

属性值：fixed，固定的意思。
参考元素：浏览器窗口。
特点：

  1. 需要配合方位属性实现移动
  2. 相对于浏览器可视区域进行移动
  3. 在页面中不占位置 → 已经脱标
    应用场景： 1. 让盒子固定在屏幕中的某个位置
.backtop {
  position: fixed;
  width: 100px;
  height: 50px;
  right: 50px;
  bottom: 50px;
}

7.元素的层级关系

不同布局方式元素的层级关系：

• 标准流 < 浮动 < 定位

不同定位之间的层级关系：

• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
​

更改定位元素的层级

场景：改变定位元素的层级
属性名：z-index
属性值：数字
• 数字越大，层级越高
自定义顺序注意事项
① 属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。
② 如果属性值相同，比较HTML书写顺序，后写的压盖先写的。
③ z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
④ 父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：
父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。
子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了
z-index：无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。

伪类选择器

概念
• 伪类和类之间有一定的相似之处，也存在明显的区别。
• 普通的类：必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。
• 伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
• 伪类选择器的权重与普通的类选择器相同。
• 伪类选择器写法：前面是普通的选择器，后面紧跟:伪类名。
​

a标签的伪类

a:link { /* 访问前状态 */
  color: gray; 
}
a:visited { /* 访问后状态 */
  color: cyan; 
}
a:hover { /* 悬浮状态 */
  color: red; 
}
a:active { /* 鼠标点击状态 */
  color: yellow; 
}

标签的伪类书写顺序
• a 标签上可能会同时触发 2 到 3 个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠。
• 伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。
• 要想让每个伪类的状态正常加载，书写顺序必须是：
访问前link、访问后visited、鼠标移上hover、鼠标点击active。
• 为了方便记忆，利用爱恨准则：love hate。
a标签的伪类实际应用
• 一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态。

a:link,a:visited {
  color:#666;
}
a:hover {
  color:#f00;
}

焦点伪类选择器

场景：用于选中元素获取焦点时状态，常用于表单控件
选择器语法：

input:focus {
 background-color:#000; 
}

属性选择器

场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签
选择器语法：

input[type="text"] { }
选择器
E[attr]选择attr的元素
E[attr=“val”]选择有attr属性且属性等于val的E元素

元素的装饰

基线

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
文字对齐问题
场景：解决行内/行内块元素垂直对齐问题
问题：当图片和文字在一行中显示时，其实底部不是对齐的
​

垂直对齐方式

属性名：vertical-align
属性值：

属性值效果
baseline默认，基线对齐
top顶部对齐
middle中部对齐
bottom底部对齐

项目中 vertical-align 可以解决的问题

  1. 文本框和表单按钮无法对齐问题
  2. input和img无法对齐问题
  3. div中的文本框，文本框无法贴顶问题
  4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
  5. 使用line-height让img标签垂直居中问题
    ​

光标类型

场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：

属性值效果
default默认值，通常是箭头
pointer小手效果，提示用户可以点击
text工字型
move十字标签，提示可以移动

元素本身隐藏

常见属性：

  1. visibility：hidden
  2. display：none
    区别：
  3. visibility：hidden 隐藏元素本身，并且在网页中 占位置
  4. display：none 隐藏元素本身，并且在网页中 不占位置
    注意点：
    • 开发中经常会通过 display属性完成元素的显示隐藏切换
    • display：none；（隐藏）、 display：block；（显示）

元素整体透明度

场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字
• 1：表示完全不透明
• 0：表示完全透明
​

溢出部分显示效果

属性名：overflow
常见属性值：

属性值效果
visible默认值、溢出部分可见
hidden溢出部分隐藏
scroll无论溢出，都显示滚动条
auto根据是否溢出，自动显示或者隐藏滚动条

边框合并

场景：让相邻表格边框进行合并，得到细线边框效果
代码：border-collapse：collapse；
​

用CSS画三角形技巧

实现原理：
• 利用盒子边框完成
实现步骤：

  1. 设置一个盒子
  2. 设置四周不同颜色的边框
  3. 将盒子宽高设置为0，仅保留边框
  4. 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明
    div {
      width: 0px;
      height: 0px;
      /* background-color: pink; */

      /* 方法一： */
      /* border-top: 100px solid skyblue;
      border-right: 100px solid yellow;
      border-bottom: 100px solid purple;
      border-left: 100px solid blue; */

      /* 方法二： */
      border: 100px solid transparent;
      border-bottom-color: blue;
    }

请添加图片描述

奔跑的飞
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
高效学习CSS布局之道
11-26
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
CSS基础
小小前端攻城狮的博客
02-24 1093
前言 之前假期累积的CSS学习笔记终于有时间整理发出来了，本篇文章着重梳理之前所学的CSS基础知识点，由于都是基础就不拆分发出来了，就一篇汇总，有着自己的总结，方便以后的复习，也希望对大家有帮助。???????? pink老师教程传送门 接下一篇 HTML和CSS进阶 CSS构造块 「1. HTML的局限性」 HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。 操作html属性不方便 HTML里面添加样式带来的是无尽的臃肿和繁琐 「2. C
word中段落行间距单位_如何在Microsoft Word中段落的第一行之后阻止页面中断
09-05 638
word中段落行间距单位In typesetting terms, “widows” and “orphans” are lines at the end or beginning of a paragraph that are separated from the rest of the paragraph by a page break. If you think widows and orp...
同时为一个标签添加多个样式，类名之间用空格分隔
weixin_34279246的博客
06-05 1404
2019独角兽企业重金招聘Python工程师标准>>> ...
2021-06-09 css基础
weixin_48606165的博客
06-09 719
一、css概念及作用 1.概念：CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） 2.作用： 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 二、引入css样式 引入css样式有两种：行内式、内部样式表、外部样式表（外链式）
CSS布局之道
07-11
本资源"CSS布局之道"是一个专为初学者准备的学习资料，旨在帮助新手掌握CSS布局的核心概念和技术。 1. **CSS基础知识**：首先，了解CSS的基本语法和选择器至关重要。包括ID选择器、类选择器、元素选择器等，以及...
css布局之道
09-19
《CSS布局之道》是一本深入探讨CSS布局技术的专业书籍，由陈刚和陈勤两位业界专家共同撰写。这本书旨在帮助读者理解和掌握CSS在网页布局中的各种应用和技巧，提升前端开发能力。通过学习本书，开发者可以更好地理解...
高效学习CSS布局之道pdf
06-28
《高效学习CSS布局之道》是一本专为网页开发者设计的指南，旨在帮助读者深入理解和熟练掌握CSS（层叠样式表）在网页布局中的应用。这本书通过244个实际范例，提供了丰富的实践操作经验，使得理论知识与实战技能相...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1324
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
最新发布
m0_62336925的博客
08-02 294
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 872
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 315
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
electron 主进程和渲染进程
qq_21087199的博客
07-29 377
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2250
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
【前端面试3+1】20 css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理、【二叉树的中序遍历】
qq_61798306的博客
07-30 714
本文包含八股文：css三栏布局6种实现方式、多行文本溢出怎么实现、token过期了怎么处理，算法【二叉树的中序遍历】
前端开发技术之HTML/CSS
m0_67484548的博客
07-29 784
5. <figure> 和 <figcaption>：<figure> 用于媒体内容的分组，<figcaption> 用于定义 <figure>1. <menu> 和 <menuitem>：定义菜单列表（<menu>）和菜单项（<menuitem>）（HTML5。1. <h1> to <h6>：定义HTML标题，<h1> 表示最高的标题级别，<h6> 表示最低的标题级别。3. <figure> 和 <figcaption>：定义媒体内容的分组，以及媒体的标题或说明。
前端必修技能：高手进阶核心知识分享 - css盒的before、after和子元素的层叠关系解析及应用
uu0216的博客
07-29 1258
一个盒子 它的 ::before伪类在最底层, ::after 伪元素在最上层, 其所有子元素在中间叠放。 盒子的 子元素堆叠关系，按照书写顺序自下而上排序：先写的叠放在下面，后写的在上面。 父元素在最下面。
CSP：内容安全策略的前端深入解析
wujiayu31415的博客
07-29 474
通过合理配置CSP策略，并利用报告模式进行测试和优化，可以显著提升Web应用的安全性，防范跨站脚本攻击等安全威胁。浏览器在加载和执行资源时，会根据这些指令进行严格的验证，只有符合规则的资源才会被加载和执行。在某些情况下，Web应用可能需要加载来自不同来源的内容，如iframe、嵌入的脚本或样式表等。：在报告模式下，CSP可以记录违反策略的行为，帮助开发者发现并修复潜在的安全问题，而不影响用户的正常访问。用于控制嵌入内容的来源等。：通过实施CSP，网站可以向用户展示其对安全性的重视，增强用户对网站的信任度。
中国象棋 纯网页前端 演示与下载
qq_30049249的博客
08-01 362
https://andi.cn/app/chess/
纠正误解：XHTML+CSS：网页布局的真正之道
"【DIV+CSS网页设计】文档深入讲解了HTML和CSS在网页设计中的结合，纠正了常见的误解，即“DIV+...因此，对于那些认为不用表格就代表非标准的观念，作者明确表示这是错误的认知，并鼓励深入学习和理解Web标准的全貌。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值