0
0

关于CSS的基础知识

CSS的基本介绍

  • css（Cascading style sheets）：层叠样式表

  • 作用：给页面中的html标签设置样式

  • css标签写在style标签中，style标签一般写在head标签里面，title标签下面

css常见引入方式

  • <title>引入方式一（内嵌式）</title>

<style>
  p{
    /* 文字颜色 */
    color: red;
    /* 文字大小 */
    font-size: 30px;
    /* 背景颜色 */
    background-color: aqua;
    /* 宽度 */
    width: 500px;
    /* 高度 */
    height: 500px;
  }
</style>
</head>
<body>
  <p>css标签认识</p>
</body>

内嵌式：css写在style里，作用在当前页面（小案例）

外联式：css写在单独的css文件中，通过link引入，作用多个页面（项目中）

行内式：css写在标签的style属性中，作用在当前页面（配合js使用）

基本选择器

  1. 结构：标签名{css属性名：css属性值；}

  2. 作用：通过标签名，找到页面中所有这类标签，设置样式

  3. 注意点：

  • 标签选择器选择的是一类标签，而不是单独的一个

  • 标签选择器无论嵌套关系有多深，都能找到相应的标签

类选择器

  1. 结构：.类名{css属性名：css属性值；}

  2. 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

  3. 注意点：

  • 所有标签上都有class属性，class属性的属性值成为类名

  • 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

  • 一个标签可以同时有多个类名，类名之间以空格隔开

  • 类名可以重复，一个类选择器可以同时选中多个标签

id选择器

  1. 结构：#id属性值{css属性名：css属性值；}

  2. 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

  3. 注意点：

  • 所有标签上都有id属性

  • id属性值类似于身份证号码，在一个页面中是惟一的，不可重复

  • 一个标签只能与一个id属性值

  • 一个id选择器只能选中一个标签

类与id的区别

  1. class类名与id属性值的区别

  • class类名相当于姓名，可以重复，一个标签可以同时有多个class类名

  • id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

  1. 类选择器与id选择器的区别

  • 类选择器以.开头

  • id选择器以#开头

  1. 实际开发情况

  • 类选择器用的最多

  • id一般配合js使用，除非特殊情况，否则不要使用id设置样式

  • 实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）

通配符选择器

  1. 结构：*{css属性名：css属性值；}

  2. 作用：找到页面中所有的标签，设置样式

  3. 注意点：

  • 开发中使用极少，只会在特殊情况下才会用到

  • 在基础小页面中可能会用于去除默认的margin和padding

字体大小

  1. 属性名：font-size

  2. 取值：数字+px

  3. 注意点：

  • 谷歌浏览器中默认文字大小是16px

  • 单位需要设置，否则无效

font-size: 50px;

字体粗细

  1. 属性名：font-weight

  2. 取值：

  • 关键字：

正常：normal

加粗：bold

  • 纯数字：100~900的整百数

正常：400

加粗：700

  1. 注意点：

  • 不是所有字体都提供了九种粗细，因此部分取值页面中无变化

  • 实际开发中：正常/加粗两种取值使用最多

font-weight:bold;
font-weight:700;

字体样式（是否倾斜）

  1. 属性名：font-style

  2. 取值：

  • 正常（默认值）：normal

  • 倾斜：italic

font-style:italic;

常见字体

  • 无衬线字体（sans-serif）

  1. 特点：文字笔画粗细均匀，并且首尾无装饰

  2. 场景：网页中大多采用无衬线字体

  3. 常见字体：黑体、Arial

  • 衬线字体（serif）

  1. 特点：文字笔画粗细不均，并且首尾有笔锋装饰

  2. 场景：报刊书籍中应用广泛

  3. 常见字体：宋体、Times New Roman

  • 等宽字体（monospace）

  1. 特点：每个字母或文字的宽度相等

  2. 场景：一般用于程序代码编写，有利于代码的阅读和编写

  3. 常见字体：Consolas、fira code

字体系列font-family

  1. 属性名：font-family

  2. 常见取值：具体字体1，具体字体2，具体字体3。。。字体系列

  • 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等·······

  • 字体系列：sans-serif、serif、monospace等·······

  1. 渲染规则：

  • 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体

  • 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

  1. 注意点：

  • 如果字体名称存在多个单词，推荐使用引号包裹

  • 最后一项字体系列不需要引号包裹

  • 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

  1. 系统默认字体：

  • window：微软雅黑

  • macOS：苹方

font-family: 宋体;

font-family: 甲骨文,隶书,微软雅黑,楷体,宋体,sans-serif;

样式层叠问题

  1. 问题：给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？

  2. 结果：如果给一个标签设置了相同的样式，此时样式会层叠（覆盖），写在最下面的会生效

  3. tip：

  • css（Cascading style sheets）层叠样式表

  • 所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

字体font相关属性的连写

  1. 属性名：font

  2. 取值：font：style weight size family；

  3. 顺序要求：swsf（稍微舒服）

  4. 省略要求：只能省略前两个，如果省略了相当于默认值

  5. 注意点：如果需要同时设置单独和连写

  • 要么把单独的样式写在连写下面

  • 要么把单独的样式写在连写里面

文本缩进

  1. 属性名：text-indent

  2. 取值：

  • 数字+px

  • 数字+em（推荐：1em=当前标签的font-size大小）

文本水平对齐

  1. 属性名：text-align

  2. 取值：

  • left：左对齐

  • center：居中对齐

  • right：右对齐

  1. 注意点：如果让文本水平居中，text-align属性给文本所在标签（父本的父元素）设置

文本修饰

  1. 属性名：text-decoration

  2. 取值：

  • underline：下划线（常用）

  • line-through：删除线（不常用）

  • overline：上划线（几乎不用）

  • none：无装饰线（常用）

  1. 注意点：开发中会使用text-decoration：none；清除a标签默认的下划线

水平居中的方法总结

  1. text-align：center；能让那些元素水平居中？

  • 文本

  • span标签、a标签

  • input标签、img标签

  1. 注意点：如果需要让以上元素水平居中，text-align：center；需要给以上元素的父元素设置

  2. 如果需要让div、p、h（大盒子）水平居中？

  • 可以通过margin：0 auto；实现
  1. 注意点：

  • 如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可

  • margin：0 auto；一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认沾满父元素的宽度

  • <title>Document</title>

  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: skyblue;

      /* text-align: center; */
      /* margin: 0 auto; */
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: orange;
      margin: 0auto;
    }

  </style>
</head>
<body>
  <divclass="father">
    <divclass="son"></div>
  </div>
</body>

行高

行高=上间距+文本高度+下间距

  1. 作用：控制行间距（给上一行和下一行增加间距）

  2. 属性名：line-height

  3. 取值：

  • 数字+px

  • 倍数（当前标签font-size的倍数）

  1. 应用：

  • 让单行文本垂直居中可以设置line-height：文字父元素高度

  • 网页精准布局时，会设置line-height：1 可以取消上下间距

  1. 行高与font连写注意点：

  • 如果同时设置了行高和font连写，注意覆盖问题

  • font：style weight size/line-height family；


  <style>
    .box {
      width: 400px;
      height: 400px;
      background-color: skyblue;
      font-size: 20px;
      line-height: 40px;

      /* 1、通过行高设置单行文本的垂直居中效果 */
      line-height: 400px;

      /* 2、在网页精准布局的时候，会设置行高为1取消上下的间距 */
      /* line-height: 1; */

      /* 2、可以让单行文本在盒子中垂直居中 */
      /* line-height: 400px; */

      /* 
        font相关属性：
          font:style weight size/line-height family
       */
      font: italic70020px/400px 楷体;
      /* line-height: 400px; */
    
    }
  </style>
</head>
<body>
  <divclass="box">
    我是真的帅<br>
    我是真的是太帅了
  </div>
</body>

颜色常见取值

  1. 属性名：

  • 文字颜色：color

  • 背景颜色：background-color

  1. 属性值：

  • 关键词（预定义的颜色名）：red、green···

  • rgb表示法（红绿蓝三原色。每项取值范围：0-255）：rgb（255,255,255）···

  • rgba表示法（红绿蓝三原色+a表示透明度，取值范围：0-1）：rbgd（255,255,255,0.5）···、简写可为rbgd（255,255,255,.5）

  • 十六进制表示法（#开头，将数字转成十六进制表示）：#000000···、简写#000···

注意点：实际开发中会直接使用测量工具直接得到颜色，不需要前端自己设计颜色，直接复制粘贴即可

后代选择器：空格

  1. 作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

  2. 选择器语法：选择器1 选择器2 {css}

  3. 结果：在选择器1所找到标签的后代（儿子、孙子、重孙子···）中，找到满足选择器2的标签，设置样式

  4. 注意点：

  • 后代包括：儿子、孙子、重孙子·······

  • 后代选择器中，选择器与选择器之间用空格隔开

子代选择器：>

  1. 作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

  2. 选择器语法：选择器1>选择器2 {css}

  3. 结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

  4. 注意点：

  • 子代只包括：儿子

  • 子代选择器中，选择器与选择器之间用>隔开

并集选择器：，

  1. 作用：同时选择多组标签，设置相同的样式

  2. 选择器语法：选择器1 ， 选择器2 {css}

  3. 结果：找到选择器1和选择器2选中的标签，设置样式

  4. 注意点：

  • 并集选择器中的每组选择器之间通过，分隔

  • 并集选择器中的每组选择器可以是基础选择器或者是复合选择器

  • 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

交集选择器：紧挨着

  1. 作用：选中页面中同时满足多个选择器的标签

  2. 选择器语法：选择器1选择器2 {css}

  3. 结果：（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

  4. 注意点：

  • 交集选择器中的选择器之间是紧挨着的，没有分隔

  • 交集选择器中如果有标签选择器，标签选择器必须写在最前面

emmet语法

  1. 作用：通过简写语法，快速生成代码

  2. 语法：类似于刚刚学习的选择器写法

  • 标签名：div

  • 类选择器：.red

  • id选择器：#one

  • 交集选择器：p.red#one

  • 子代选择器：ul>li

  • 内部文本：ul>li{我是文本}

  • 创建多个：ul>li*3

hover伪类选择器

  1. 作用：选中鼠标悬停在元素上的状态，设置样式

  2. 选择器语法：选择器：hover {css}

  3. 注意点：伪类选择器选中的元素的某种状态

<style>
    a {
      text-decoration: none;
    }
​
    a:hover {
      color: aqua;
      text-decoration: underline;
    }
    
    .box {
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }
​
    .box:hover {
      width: 500px;
      height: 500px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <ahref="#">此a标签设置hover效果</a>
  <divclass="box"></div>
</body>

背景颜色

  1. 属性名：background-color（bgc）

  2. 属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制·······

  3. 注意点：

  • 背景颜色默认是透明：rgba（0,0,0,0），transparent

  • 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

背景图片

  1. 属性名：background-image（bgi）

  2. 属性值：background-image：url（‘图片的路径’）；

  3. 注意点：

  • 背景图片中url可以省略引号

  • 背景图片默认是在水平和垂直方向平铺的

  • 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

背景平铺

  1. 属性名：background-repeat（bgr）

  2. 属性值：

  • repeat：（默认值）水平和垂直方向都平铺

  • no-repeat：不平铺

  • repeat-x：沿着水平方向（x轴）平铺

  • repeat-y：沿着垂直方向（y轴）平铺

背景位置

  1. 属性名：background-position（bgp）

  2. 属性值：background-position：水平方向位置 垂直方向位置；

  • 方位名词（最多只能表示9个位置）：

  • 水平方向：left、center、right

  • 垂直方向：top、center、bottom

  • 数字+px（坐标）：

  • 坐标系：原点（0,0）{盒子的左上角}、x轴{水平向右}、y轴{垂直向下}

  • 操作：将图片左上角与坐标点重合即可

  1. 注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

背景相关属性连写

  1. 属性名：background（bg）

  2. 属性值：单个属性值的合写，取值之间以空格隔开

  3. 书写顺序：background：color image repeat position；

  4. 省略问题：

  • 可以按照需求省略

  • 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url（）；

  1. 注意点：

  • 如果需要设置单独的样式和连写

  • ①要么把单独的样式写在连写下面

  • ②要么把单独的样式写在连写里面

img标签和背景图片的区别

  • 需求：需要在网页中展示一张图片的效果？
  1. 直接写上img标签即可
  • img标签是一个标签，不设置宽高会默认以原来的尺寸显示
  1. div标签+背景图片
  • 需要设置div的宽高，因为背景图片只是装饰的css样式，不能撑开div标签

块级元素

  1. 属性：display：block

  2. 显示特点：

  • 独占一行（一行只能显示一个）

  • 宽度默认是父元素的宽度，高度默认由内容撑开

  • 可以设置宽高

  1. 代表标签：
  • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer·····

行内元素

  1. 属性：display：inline

  2. 显示特点：

  • 一行可以显示多个

  • 宽度和高度默认由内容撑开

  • 不可以设置宽高

  1. 代表标签：

a、span、b、u、i、s、strong、ins、em、del········

行内块元素

  1. 属性：display：inline-block

  2. 显示特点：

  • 一行可以显示多个

  • 可以设置宽高

  1. 代表标签：

  • input、textarea、button、select····

  • 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示是inline

元素显示模式转换

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

  2. 语法：

  • display：block；转换成块级元素（常用）

  • display：inline-block；转换成行内块元素（常用）

  • display：inline；转换成行内元素（少用）

HTML嵌套规范注意点

  1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等
  • p标签中不要嵌套div、p、h等块级元素
<p>
    <div>
    </div>
</p>
//不规范的写法。
//浏览器会改成规范的，且显示出来

  1. a标签内部可以嵌套任意元素

  • a标签不能嵌套a标签

css的继承性

  1. 特性：子元素有默认继承父元素样式的特点（子承父业）

  2. 可以继承的常见属性：

  • color

  • font-style、font-weight、font-size、font-family

  • text-indent、text-align

  • line-height

  • ·········

  1. 注意点：可以通过调式工具判断样式是否可以继承

  1. 好处：可以在一定程度上减少代码

  2. 常见应用场景：

  • 可以直接给ul设置list-style：none；属性，从而去除列表默认的小圆点样式

  • 直接给body标签设置统一的font-size，从而统一不同浏览器默认的字体大小

  1. 继承失效的特殊情况：如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

  • a标签的color会继承失效

  • h系列标签的font-size会继承失效

  • div的高度不能继承，但是宽度有类似于继承的效果

css的层叠性

  1. 特性：

  • 给一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上

  • 给一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效

  1. 注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

css的优先级

  1. 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

  2. 优先级公式：

  • 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < ！important
  1. 注意点：

  • ！important写在属性值的后面，分号的前面

  • ！important不能提升继承的优先级，只要是继承优先级就是最低

  • 实际开发中不建议使用！important

权重叠加计算

  1. 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终那个选择器优先级最高会生效

  2. 权重叠加计算公式：（每一位之间不存在进位）

  • （0,0,0,0）分别是：第一级、第二级、第三级、第四级

  • 复合选择器中：行内样式个数、id选择器个数、类选择器个数、标签选择器个数

  1. 比较规则：

  • 先比较第一级数字，如果比较出来了，之后的不用看

  • 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的不用看

  • ·········

  • 如果最终所有的数字都相同，表示优先级相同，则比较层叠性（最下面的那个会生效）

  1. 注意点：！important如果不是写在继承里的，则权重最高

  1. 权重计算题解题步骤：

  • 先判断选择器是否能直接选中标签，如果不能直接选中——> 是继承，优先级最低——> 直接pass

  • 通过权重计算公式，判断谁权重最高

  • 如果全是继承，则根据子承父业，找到他的父类，看那个能直接选中他的标签

  1. 注意点：
  • 实际开发中选择选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己为难自己

查错流程

  1. 遇到样式不出来时，学会通过调试工具找错

  2. 查错步骤：

  3. 右击检查（f12）

  4. 哪里不会点哪里

  • 在elements中找到对应的元素
  1. 看style中有没有自己设置的选择器

  • 如果没有，一般是选择器写错了

  • 常见原因：

  1. 选择器单词拼错

  2. 选择器结构写错

  3. 如果选择器有，但样式没有出来

  • 看是否有删除线（没生效）

  • 常见原因：

  1. 样式被注释

  2. 样式被覆盖

  • 看是否有小三角形（报错）

  • 常见原因：

  1. 属性值后没有分号

  2. 出现中文标点

  3. 属性名或者属性值单词拼错

pxcook的基本使用

  1. 通过软件打开设计图

  2. 打开软件

  3. 拖拽入设计图

  4. 新建项目

  5. 常用快捷键

  • 放大设计图：Ctrl+ +

  • 缩小设计图：Ctrl+ -

  • 移动设计图：空格按住不放，鼠标拖动

  1. 常用工具

  • 量尺寸

  • 吸颜色

  1. 从psd文件中直接获取数据
  • 切换到开发界面，直接点击获取数据

盒子模型

  1. 概念：

  • 页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局

  • 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

  1. 盒子模型：css中规定每个盒子分别由内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

  2. 记忆：可以联想现实中的包装盒

内容的宽度和高度

  1. 作用：利用width和height属性默认设置是盒子内容区域大小

  2. 属性：width、height

  3. 常见取值：数字+px

边框（border）

单个属性

  1. 作用：给设置边框粗细、边框样式、边框颜色效果

  2. 单个属性：

  • 边框粗细：border-width，属性值：数字+px

  • 边框样式：border-style，属性值：实线solid、虚线dashed、点线dotted

  • 边框颜色：border-color，属性值：颜色取值

连写

  1. 属性名：border

  2. 属性值：单个取值的连写，取值之间以空格隔开

  • border：10px solid red；
  1. 快捷键：bd

单方向设置

  1. 场景：只给盒子的某个方向单独设置边框

  2. 属性名：border-方位名词

  3. 属性值：连写的取值

盒子实际大小初级计算公式

  1. 需求：盒子尺寸400*400，背景绿色，边框10px 实线 黑色，如何完成？

注意点：

  • 设置width和height是内容的宽高

  • 设置border会把盒子撑大

盒子的实际大小（宽度）=左边框+内容的宽度+有边框=10+400+10=420

所以现在是420，要求是400，多出了20px

手动减去计算出多余部分，在内容中减去即可

  1. 盒子实际大小初级计算公式：

  • 盒子宽度=左边框+内容宽度+右边框

  • 盒子高度=上边框+内容高度+下边款

  1. 解决：当盒子被border撑大后，如何满足需求？
  • 解决：计算多余大小，手动在内容中减去（手动内减）

内边距（padding）

取值

  1. 作用设置边框与内容区域之间的距离

  2. 属性名：padding

  3. 常见取值：

  • 一个值

  • padding：10px；

  • 上右下左都设置为10px

  • 两个值

  • padding：10px 20px；

  • 上下设置为10px，左右设置为20px

  • 三个值

  • padding：10px 20px 30px；

  • 上设置为10px，左右设置为20px，下设置为30px

  • 四个值

  • padding：10px 20px 30px 40px；

  • 上设置为10px，左设置为20px，下设置为30px，左设置为40px

  1. 记忆规则：从上开始赋值，然后按顺时针赋值，如果设置赋值的，看对面。（上右下左）

单方向设置

  1. 场景：只给盒子的某个方向单独设置内边距

  1. 属性名：padding-方位名词

  2. 属性值：数字+px

外边距（margin）

取值

  1. 作用：设置边框以外，盒子与盒子之间的距离

  2. 属性名：margin

  3. 常见取值：

  • 一个值

  • margin：10px；

  • 上右下左都设置为10px

  • 两个值

  • margin：10px 20px；

  • 上下设置为10px，左右设置为20px

  • 三个值

  • margin：10px 20px 30px；

  • 上设置为10px，左右设置为20px，下设置为30px

  • 四个值

  • margin：10px 20px 30px 40px；

  • 上设置为10px，右设置为20px，下设置为30px，左设置为40px

  1. 记忆规则：从上开始赋值，然后顺时针赋值，如果没有设置赋值，看对面的（上右下左）

单方向设置

  1. 场景：只给盒子的某个方向单独设置外边框

  2. 属性名：margin-方位名词

  3. 属性值：数字+px

该属性也可以让盒子移动

       margin-top: 20px;
      /* 让当前盒子往下移动 */
      margin-left: 20px;
      /* 让当前盒子往右移动 */
      margin-bottom: 20px;
      /* 让下面的盒子往下移动 */
      margin-right: 20px;
      /* 让右边的盒子往右移动 */

清除默认内外边距

  1. 场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置

  • 比如：body标签默认由margin：8px

  • 比如：p标签默认有上下的margin

  • 比如：ul标签默认有上下的margin和padding-left

  • ·············

  1. 解决方法：

  • 找到有边距的标签一起设置margin：0；padding：0；（淘宝）

  • 直接使用通配符设置margin：0；padding：0；（京东）

外边距正常情况

  1. 场景：水平布局的盒子，左右盒子的margin正常，互不影响

  2. 结果：最终两者距离为左右margin的和

外边距折叠现象-合并现象

  1. 场景：垂直布局的块级元素，上下的margin会合并

  2. 结果：最终两者距离为margin的最大值

  3. 解决方法：避免就好

  • 只给其中一个盒子设置margin即可

外边距折叠现象-塌陷现象

  1. 场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

  2. 结果：导致父元素一起往下移动

  3. 解决方法：

  • 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）

  • 父元素里设置文本内容

  • 给父元素设置overflow：hidden

  • 转换成行内元素display：inline-block；

  • 设置浮动float：left；

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

  1. 场景：给行内元素设置margin和padding时

  2. 结果：

  • 水平方向的margin和padding布局中有效

  • 垂直方向的margin和padding布局中无效

不会撑大盒子的特殊情况

不会撑大盒子的特殊情况（块级元素）：

  • 如果子盒子没有设置宽高，此时宽高默认是父盒子的宽高

  • （块级元素不设置宽高，默认占满父元素一行）

  • 此时给子盒子设置左右的padding或者左右的border，不会撑大子盒子

结构伪类选择器

目标：能够使用结构伪类选择器在HTML中定位元素

  1. 作用与优势：

  • 作用：根据元素在HTML中的结构关系查找元素

  • 优势：减少对HTML中类的依赖，有利于保持代码整洁

  • 场景：常用于查找某父级选择器中的子元素

  1. 选择器

  • E：first-child{} 匹配父元素中的第一个子元素，并且是E元素

  • E：last-child{} 匹配父元素中的最后一个子元素，并且是E元素

  • E：nth-child（n）{} 匹配父元素中的第n个子元素，并且是E元素

  • E：nth-last-child（n）{} 匹配父元素中的倒数第n个子元素，并且是E元素

  1. n的注意点

  • n为：0、1、2、3、4、5、6·············

  • 通过n可以组成常见公式

  • 偶数：2n、even

  • 奇数：2n+1、2n-1、odd

  • 找到前5个：-n+5

  • 找到从第5个往后：n+5

  • n要写在前面，写后面浏览器不能解析（如：-n+5不能写成5-n）

查找单个

<style>
    /* 1、找到第一个子元素，并且为li标签 */
    li:first-child {
      background-color: blue;
    }

    /* 2、找到最后一个子元素，并且为li标签 */
    li:last-child {
      /* background-color: orange; */
    }

    /* 3、找到第3个子元素，并且为li标签 */
    li:nth-child(3) {
      /* background-color: pink; */
    }

    /* 4、找到倒数第3个子元素，并且为li标签 */
    li:nth-child(8) {
      /* background-color: green; */
    }

    li:nth-last-child(3) {
      /* background-color: red; */
    }

 </style>
</head>
<body>
  <!-- ul>li{我是第$个li}*10 -->

  <ul>
    <!-- <div>私生子</div> -->
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
  </ul>
</body>

查找多个

<style>

    /* 1、找到偶数个li------------------------ */
    li:nth-child(2n) {
      /* background-color: orange; */
    }

    li:nth-child(even) {
      /* background-color: blue; */
    }

    /* 2、找到奇数个li------------------------ */
    li:nth-child(2n+1) {
      /* background-color: orange; */
    }

    li:nth-child(2n-1) {
      /* background-color: blue; */
    }

    li:nth-child(odd) {
      /* background-color: pink; */
    }

    /* 3、找到前5个------------------------ */
    li:nth-child(-n+6) {
      /* background-color: orange; */
    }

    /* 4、找到从第5个往后------------------------ */
    li:nth-child(n+5) {
      background-color: red;
    }

  </style>
</head>
<body>
  <!-- ul>li{我是第$个li}*10 -->
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
  </ul>
</body>
<style>
    /* 错误写法 ：都是li标签中的第一个子元素，因此都满足此写法、所有都会变红*/
    li a:first-child {
      /* color: red; */
    }

    /* 正确写法：不是第一个a标签，而是要找到第一个li里面的第一个a标签 */
    li:first-child a {
      color: red;
    }

  </style>
</head>
<body>
  <ul>
    <li><a href="#">这是第1个a标签(要变红）</a></li>
    <li><a href="#">这是第2个a标签</a></li>
    <li><a href="#">这是第3个a标签</a></li>
    <li><a href="#">这是第4个a标签</a></li>
    <li><a href="#">这是第5个a标签</a></li>
    <li><a href="#">这是第6个a标签</a></li>
    <li><a href="#">这是第7个a标签</a></li>
    <li><a href="#">这是第8个a标签</a></li>
  </ul>
</body>

nth-of-type

选择器：E：nth-of-type（n）{} 只在父元素的同类型（E）子元素范围中，匹配第n个

区别：

  • ：nth-child 直接在所有孩子中数个数

  • ：nth-of-type 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数

伪元素

  1. 目标：能够使用伪元素在网页中创建元素

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

  3. 区别：

  • 元素：HTML设置的标签

  • 伪元素：由css模拟出的标签效果

  1. 种类：

  • ：：before 在父元素内容的最前添加一个伪元素

  • ：：after 在父元素内容的最后添加一个伪元素

  1. 注意点：

  • 必须设置content属性才能生效

  • 伪元素默认是行内元素

<style>
    .father {
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .father::before {
      /* 必加的属性 */
      content: '我是一个伪元素';
      /* 转换显示方式 */
      display: block;
      width: 100px;
      height: 100px;
      background-color: orange;
    }

    .father::after {
      /* 必加的属性 */
      content: '我是一个伪元素';
      /* 转换显示方式 */
      display: block;
      width: 100px;
      height: 100px;
      background-color: orange;
    }

  </style>
</head>
<body>
  <div class="father">
    我是father内部的内容
  </div>
</body>

标准流

目标：能够认识标准流的默认布局及其特点

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

  2. 常见标准流排版规则：

  • 块级元素：从上往下，垂直布局，独占一行

  • 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: orange;
    }

    span {
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div>我是块级元素div</div>
  <div>我是块级元素div</div>
  <div>我是块级元素div</div>

  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
  <span>我是行内元素span</span>
</body>

浮动

浮动的作用

  1. 早期作用：图文环绕

  2. 现在作用：网页布局

  • 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

浮动的代码

  1. 属性名：float

  2. 属性值：

  • left：左浮动

  • right：右浮动

  <style>
    img {
      /* 左浮动 */
      float: left;
      /* 图片与文字之间的距离 */
      margin-right: 20px;
    }

    .left {
      /* 左浮动 */
      float: left;
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .right {
      /* 右浮动 */
      float: right;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <!-- 1、图文环绕 -->
  <img src="./images/1.jpg" alt="">
  前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]  。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]  。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

  <!-- 2、网页布局 → 水平布局 -->
  <div class="left">左护法</div>
  <div class="right">右护法</div>
</body>

浮动的特点

  1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
  • 相当于从地面飘到了空中
<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    width: 200px;
    height: 200px;
  }

  .red {
    background-color: red;
  }

  .green {
    /* 右浮动 */
    float: right;
    background-color: green;
  }

  .blue {
    background-color: blue;
  }

</style>
</head>
<body>
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</body>
  1. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素

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

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

  1. 浮动元素有特殊的显示效果
  • 一行可以显示多个

  • 可以设置宽高
  1. 注意点：浮动元素不能通过text-align：center；或者margin：0 auto；让浮动元素本身水平居中

书写网页导航的步骤

  • 网页布局流程：从上往下，从外往里

  1. 清除默认的margin和padding

  2. 找到ul，去除小圆点

  3. 找到li标签，设置浮动让li在一行中显示

  4. 找到a标签：设置宽高，a标签默认是行内元素，默认不能设置宽高？

  • 方法一：给a标签设置display：inline-block；

  • 方法二：给a标签设置display：block；

  • 方法三：给a标签设置float：left；

清除浮动

  1. 含义：清除浮动带来的影响
  • 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素

  1. 原因：子元素浮动后脱标，不占位置

  2. 目的：需要父元素有高度，从而不影响其他网页元素的布局

清除浮动的方法

直接设置父元素的高度

  • 特点

  • 优点：简单粗暴，方便

  • 缺点：有些布局中不能固定父元素的高度。如：新闻列表、京东推荐模块

额外标签法

  • 操作：

  1. 在父元素内容的最后添加一个块级元素

  2. 给添加的块级元素设置clear：both；

  • 特点：

  • 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

单伪元素清除法

  • 操作：用伪元素替代了额外标签

  • ①：基本写法

.clearfix::after {
    content:'';
    display:block;
    clear:both;
}
  • ②：补充写法
.clearfix::after {
    content:'';
    display:block;
    clear:both;
    /* 补充代码：在网页中看不到伪元素 */
    height:0;
    visibility:hidden;
}

  • 特点

  • 优点：项目中使用，直接给标签加类即可清除浮动

双伪元素清除法

  • 操作
.clearfix::before,
.clearfix::after {
    content:'';
    display:table;
}
.clearfix::after {
    clear:both;
}

  • 特点：

  • 优点：项目中使用，直接给标签加类即可清除浮动

给父元素设置overflow：hidden

  • 操作：直接给父元素设置overflow：hidden；

  • 特点

  • 优点：方便

网页常见布局方式

  1. 标准流

  • 块级元素独占一行，垂直布局

  • 行内元素、行内块元素一行显示多个，水平布局

  1. 浮动
  • 可以让原本垂直布局的块级元素变成水平布局
  1. 定位

  • 可以让元素自由的摆放在网页的任意位置

  • 一般用于盒子之间的层叠情况

定位

  1. 可以解决盒子与盒子之间的层叠问题
  • 定位之后的元素层级最高，可以层叠在其他盒子上面
  1. 可以让盒子始终固定在屏幕中的某个位置

使用定位的步骤

  1. 设置定位方式

  • 属性名：position

  • 常见属性：

  • 静态定位：static

  • 相对定位：relative

  • 绝对定位：absolute

  • 固定定位：fixed

  1. 设置偏移值（要设置偏移值盒子的定位才能显示）

  • 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

  • 选取的原则一般是就近原则（离哪个近用哪个）

  • 水平方向

  1. left：数字+px；距离左边的距离

  2. right：数字+px；距离右边的距离

  • 垂直方向

  1. top：数字+px；距离上边的距离

  2. bottom：数字+px；距离下边的距离

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
    }

    .red {
      background-color: red;
    }

    .blue {
      /* 1、设置定位方式 */
      /* 绝对定位 */
      position: absolute;

      /* 2、设置偏移值 */
      top: 150px;
      left: 150px;

      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="red"></div>
  <div class="blue"></div>
</body>

静态定位

  1. 介绍：静态定位是默认值，就是之前认识的标准流

  2. 代码

position:static;
  1. 注意点：

  • 静态定位就是之前的标准流，不能通过方位属性进行移动

  • 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

相对定位

  1. 自恋型定位，相对于自己之前的位置进行移动

  2. 代码

position:relative;

  1. 特点：

  • 需要配合方位属性实现移动

  • 相对于自己原来的位置进行移动

  • 在页面中占位置，没有脱标

  1. 应用场景：

  • 配合绝对定位组CP（子绝父相）

  • 用于小范围的移动

绝对定位

  1. 介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

  2. 代码

position:absolute;

  1. 特点：

  • 需要配合方位属性实现移动

  • 默认相对于浏览器可视区进行移动

  • 在页面中不占位置，已经脱标

  1. 应用场景：
  • 配合绝对定位组CP（子绝父相）

  1. 绝对定位相对于谁进行偏移？

  • 祖先元素中没有定位，默认相对于浏览器进行移动

  • 祖先元素中有定位，相对于最近的有定位的祖先元素进行移动

子绝父相

  1. 场景：让子元素相对于父元素进行自由移动

  2. 含义：

  • 子元素：绝对定位

  • 父元素：相对定位

  1. 子绝父相的好处：
  • 父元素是相对定位，则对网页布局影响最小

子绝父绝特殊场景

  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%）；

固定定位

  1. 介绍：死心眼定位（广告定位），相对于浏览器进行定位移动

  2. 代码

position:fixed;

  1. 特点：

  • 需要配合方位属性实现移动

  • 相对于浏览器可视区进行移动

  • 在页面中不占位置，已经脱标

  1. 应用场景：
  • 让盒子固定在屏幕中的某个位置

元素层级关系

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

  • 标准流 < 浮动 < 定位

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

  • 相对、绝对、固定定位默认层级相同

  • 此时html中写在下面的元素层级更高，会覆盖上面的元素

更改定位元素的层级

  1. 场景：改变定位元素的层级

  2. 属性名：z-index （只对定位元素的层级起效）

  3. 属性值：数字

  • 数字越大，层级越高

垂直对齐方式（vertical-align）

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

（英文四线第三条）

文字对齐问题

  1. 场景：解决行内、行内块元素垂直对齐问题（对于块元素无效）

  2. 问题：当图片和文字在一行中显示时，其实底部不是对齐的

垂直对齐方式

  1. 属性名：vertical-align

  2. 属性值：

  • baseline，默认基线对齐

  • top，顶部对齐

  • middle，中部对齐

  • bottom，底部对齐

补充vertical-align可以解决的问题

  • 文本框和表单按钮无法对齐问题

  • input和img无法对齐问题

  • div中的文本框，文本框无法贴顶问题

  • div不设置高度由img标签撑开，此时img标签下面会存在额外间隙问题

  • 使用line-height让img标签垂直居中问题

注意点：

  • 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题

  • 推荐优先使用浮动完成效果

光标类型

  1. 场景：设置鼠标光标在元素上时显示的样式

  2. 属性名：cursor （只能改变光标的样式，并不有相应的功能）

  3. 常见属性值：

  • default，默认值，通常是箭头

  • pointer，小手效果，提示用户可以点击

  • text，工字型，提示用户可以选择文字

  • move，十字光标，提示用户可以移动

  1. cursor: default; cursor: pointer; cursor: text; cursor: move;

边框圆角

  1. 场景：让盒子四个角变得软润，增加页面细节，提升用户体验

  2. 属性名：border-radius

  3. 常见取值：数字+px、百分比

  4. 原理

  1. 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角

边框圆角的常见应用

  • 画一个正圆

  1. 盒子必须是正方形

  2. 设置边框圆角为盒子宽高的一半，border-radius：50%；

  • 胶囊按钮

  1. 盒子要求是长方形

  2. 设置border-radius：盒子高度的一半

<style>

   /* 画一个正圆 */
   .one {
     /* 1、盒子必须是正方形 */
     width: 300px;
     height: 300px;

     /* 2、设置边框圆角为盒子宽高的一半 */
     /* border-radius: 150px; */
     border-radius: 50%;

     background-color: orange;
     margin-bottom: 20px;
   }

   /* 画一个胶囊按钮 */
   .two {
     /* 1、盒子要求是长方形 */
     width: 300px;
     height: 100px;

     /* 2、设置边框圆角为盒子高度的一半 */
     border-radius: 50px;

     background-color: purple;
     margin-bottom: 20px;
     text-align: center;
     line-height: 100px;
     color: #fff;
     font-size: 20px;
   }

   .three {
     /* 1、盒子要求是长方形 */
     width: 300px;
     height: 100px;

     /* 2、设置边框圆角为盒子高度的一半 */
     border-radius: 50px;

     border: 1px solid orange;
     text-align: center;
     line-height: 100px;
     font-size: 20px ;
     color: orange;
   }

 </style>
</head>
<body>

  <div class="one"></div>

  <div class="two">我真帅</div>

  <div class="three">我真帅</div>
</body>

溢出部分显示效果

  1. 溢出部分：指的是盒子内容部分所超出盒子范围的区域

  2. 场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条········

  3. 属性名：overflow

  4. 常见属性值：

  • visible，默认值，溢出部分可见

  • hidden，溢出部分隐藏

  • scroll，无论是否溢出，都显示滚动条

  • auto，根据是否溢出，自动显示或隐藏滚动条

/* 溢出部分显示效果 */

      overflow: visible;
      overflow: hidden;
      overflow: scroll;
      overflow: auto;

元素本身隐藏

  1. 场景：让某元素本身在屏幕中不可见，如：鼠标：hover之后元素隐藏

  2. 常见属性：

  • visibility：hidden

  • display：none

  1. 区别：

  • visibility：hidden 隐藏元素本身，并且在网页中占位置

  • display：none 隐藏元素本身，并且在网页中不占位置

  1. 注意点：

  • 开发中经常会通过display属性完成元素的显示切换

  • display：none；隐藏、display：block；显示

元素整体透明度

  1. 场景：让某元素整体（包括内容）一起变透明

  2. 属性名：opacity

  3. 属性值：0~1之间的数字

  • 1：表示完全不透明

  • 0：表示完全透明

  1. 注意点：
  • opacity会让元素整体透明，包括里面的内容，如：文字、子元素等等

边框合并

  1. 场景：让相邻表格边框进行合并，得到细线边框效果

  2. 代码：（是给table设置的）

border-collapse:collapse;

<style>
    table {
      width: 400px;
      height: 300px;
      border: 1px solid #000;

      /* 边框合并：border-collapse */
      border-collapse: collapse;
    }

    td,
    th {
      border: 1px solid #000;
    }

  </style>
</head>
<body>
  <!--  border="1" width="400" height="300"cellspacing="0" -->
  <table>
    <caption><h3>前端与移动开发学员学习情况</h3></caption>
    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>成绩</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>小姐姐</td>
        <td>女</td>
        <td>100</td>
      </tr>
      <tr>
        <td>2</td>
        <td>小哥哥</td>
        <td>男</td>
        <td>100</td>
      </tr>
      <tr>
        <td>3</td>
        <td>大姐姐</td>
        <td>女</td>
        <td>100</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">总成绩</td>
        <td colspan="2">300</td>
      </tr>
    </tfoot>
  </table>
</body>

链接伪类选择器

  1. 场景：常用于选中超链接的不同状态

  2. 选择器语法：

  • a：link{ }，选中a链接 未访问过 的状态

  • a：visited{ }，选中a链接 访问之后 的状态

  • a：hover{ }，选中 鼠标悬停 的状态

  • a：active{ }，选中 鼠标按下 的状态

    /* 选中a标签未访问过的状态 */
    a:link {
      color: red;
    }

    /* 选中a标签访问过之后的状态 */
    a:visited {
      color: yellow;
    }

    /* 选中鼠标悬停的状态 */
    a:hover {
      color: orange;
    }

    /* 选中鼠标按下的状态 */
    a:active {
      color: skyblue;
    }
  1. 注意点：

  • 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写

  • 其中：hover 伪类选择器使用更为频繁，常用于选择各类元素的悬停状态

用css画三角形技巧（面试题）

  • 场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成

  • 实现原理：

  • 利用盒子边框完成

  • 实现步骤：

  1. 设置一个盒子

  2. 设置四周不同颜色的边框

  3. 将盒子的宽高设置为0，仅保留边框

  4. 得到四个三角形，选择其中一个，其他三个三角形（边框）设置颜色为透明

  • 通过调整不同边框的宽度，可以调整三角形的形态

焦点伪类选择器

  1. 场景：用于选中元素获取焦点时的状态，常用于表单控件

  2. 选择器语法：

input:focus {

background-color:red;

}

  1. 效果：
  • 表单控件获取焦点时会默认显示外部轮廓线

属性选择器

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

  2. 选择器语法：

  • E[attr]，选择具有attr属性的E元素

  • E[attr="val"]，选择具有attr属性并且属性值等于val的E元素

精灵图

  1. 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

  2. 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

  3. 例如：需要在网页中展示8张小图片

  • 8张小图片分别发送，需要发送8次

  • 合成一张精灵图发送，需要发送1次

精灵图的使用步骤

  1. 创建一个盒子

  2. 通过PxCook量取小图片的大小，将小图片的宽高设置给盒子

  3. 将精灵图设置为盒子的背景图片

  4. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

为什么要取负值？

背景图片的大小

  1. 作用：设置背景图片的大小

  2. 语法：background-size：宽度 高度；

  3. 取值：

  • 数字+px，简单方便，常用

  • 百分比，相对于当前盒子自身的宽高百分比

  • contain，包含，将背景图片等比例缩放，直到不会超出盒子的最大

  • cover，覆盖，将背景图片等比例缩放，直到刚好它填满整个盒子没有空白

background连写

  1. 完整连写：background：color image repeat position/size；

  2. 注意点：

  • background-size和background连写同时设置时，需要注意覆盖问题
  1. 解决：

  • 要么单独的样式写在连写下面

  • 要么单独的样式写在连写里面

文字阴影

  1. 作用：给文字添加阴影效果，吸引用户注意

  2. 属性名：text-shadow

  3. 取值：

  • h-shadow，必须，水平偏移量，允许负值

  • v-shadow，必须，垂直偏移量，允许负值

  • blur，可选，模糊度

  • color，可选，阴影颜色

  1. 拓展：阴影可以叠加设置，每组阴影取值之间用逗号隔开

text-shadow: 0 0 5px #fff, 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

盒子阴影

  1. 作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

  2. 属性名：box-shadow

  3. 取值：

  • h-shadow，必须，水平偏移量，允许负值

  • v-shadow，必须，垂直偏移量，允许负值

  • blur，可选，模糊度

  • spread，可选，阴影扩大

  • color，可选，阴影颜色

  • inset，可选，将阴影改为内部阴影

过渡

  1. 作用：让元素的样式慢慢变化，常配合hover使用，增强网页交互体验

  2. 属性名：transition

  3. 常见取值：

  • 过渡的属性

  • all，所有能过渡的属性都过渡

  • 具体属性名如：width：只有width有过渡

  • 过渡的时长

  • 数字+s（秒）

  1. 注意点：

  • 过渡需要：默认状态和hover状态样式不同，才能有过渡效果

  • transition属性给需要过渡的元素本身加

  • transition属性设置在不同状态中，效果不同

  1. 给默认状态设置，鼠标移入移出都有过渡效果

  2. 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

 <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
      /* 过渡 */
      transition: all 1s;
    }

    div:hover {
      width: 800px;
      /* width: 200px; */
      /* background-color: yellow; */
    }

  </style>
</head>
<body>
  <div></div>
</body>

网页与网站的关系

  1. 在互联网中，网站类似于是一本书，网页就是这本书的每一页

  • 比如：淘宝、京东就是一个网站，类似于一本书

  • 这些网站中的每一个网页，如：主页、登录页面、商品页面就是每一个单独的页面，类似于每一页纸

  • 网页：网站中的每一页。例如：淘宝的主页、淘宝的登录页、淘宝的商品页等

  • 网站：提供特定服务的一组网页集合。例如：百度、淘宝、京东等

骨架结构标签的认识

  • DOCTYPE文档说明

注意点：DOCTYPE需要写在页面的第一行，不属于html标签

<!DOCTYPE html>

文档类型声明，告诉浏览器该网页的html版本

<!DOCTYPE html>

HTML5版本

  • 网页语言
  1. <html lang="en"> 标识网页使用的语言

  2. 作用：搜索引擎归类+浏览器翻译

  3. 常见语言：zh-CN 简体中文 / en 英文

  • 字符编码
  1. <meta charset="UTF-8">

标识网页使用的字符编码

  1. 作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码

  2. 常见字符编码：

  • UTF-8：万国码，国际化的字符编码，收录了全球的语言文字

  • GB2312:6000+ 汉字

  • GBK：20000+ 汉字

  1. 注意点：开发中统一使用UTF-8字符编码即可

SEO三大标签

  1. SEO（Search English Optimization）：搜索引擎优化

  2. 作用：让网站在搜索引擎上的排名靠前

  3. 提升SEO的常见方法：

  • 竞价排名

  • 将网页制作成html后缀

  • 标签语义化（在合适的地方使用合适的标签）

  • ············

  1. 三大标签

  • title：网页标题标签

  • description：网页描述标签

  • keyword：网页关键词标签

有语义的布局标签

  1. 场景：在HTML5中，推出了一些有语义的布局标签，可以增强网页的语义化

  2. 标签：

  • header，网页头部

  • nav，网页导航

  • footer，网页底部

  • aside，网页侧边栏

  • section，网页区块

  • article，网页文章

  1. 注意点：以上标签显示特点和div一致，但是比div多了不同的语义

ico图标的设置

  1. 场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标

  2. 常见代码：

<title>标题</title>
<link rel="ico" href="ico图标的路径"> <!-- 经典写法 -->
<link rel="shortcut icon" href="ico图标的路径" type="image/x-icon"/> <!-- 完整写法 -->

版心

  1. 场景：把页面的主体内容约束在网页中间

  2. 作用：让不同大小的屏幕都能看到页面的主体内容

  3. 代码：

/* 版心 */
.container {
    width: 1240px;
    margin: 0 auto;
}
  1. 注意点：
  • 版心类名常用：container、wrapper、w 等

css的书写顺序

  • 衡量程序员的能力，除了要看实现业务需求的能力，还要看平时书写代码的规范（专业性）

  • 不同的css书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯

  • 顺序：

  1. 布局属性：display、position、float、clear、visibility、overflow

  2. 盒子模型+背景：width、height、margin、padding、border、background

  3. 文本内容属性：color、font、text-decoration、text-align、line-height

  4. 点缀属性：cursor、border-radius、text-shadow、box-shadow

  • 注意点：

  • 开发中推荐多用类+后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐不要超过3个

标签： css html 前端
本文转载自: https://blog.csdn.net/m0_68015749/article/details/129089183
版权归原作者 一只小平平 所有， 如有侵权，请联系我们删除。
登录后发布评论

“关于CSS的基础知识”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

机器人技术在安全领域的重要作用

安全学习记录——网络篇（一）

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

单元测试数据库回滚问题

这才是单元测试，之前我们都错了

【C语言基础】：字符函数和字符串函数

ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

文章导航