WEB前端开发之CSS基础语法和核心知识点（九）

最新推荐文章于 2022-08-21 16:42:47 发布
最新推荐文章于 2022-08-21 16:42:47 发布
阅读量299 收藏
点赞数 1
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blue_698/article/details/115092722
版权

CSS核心概念和知识点

语法

css的核心功能是能够将css属性设定一个特定的值，一个属性与值的键值对被称为声明

color:red;

而如果是用{}来声明多个的话，就形成了一个声明块

{
    font-size:20px;
    color:red;
}

声明块如果需要用到对应的HTML元素，必须加上选择器，选择器和声明块组成了CSS 规则集，简称为 CSS 规则

在这里插入图片描述

效果：

其实规则中的最后一条声明可以省略分号，但是并不建议这么做，因为这样很容易出粗

css注释

/* 单行注释 */  

/*
  多行注释
*/

使用注释后，所有被注释的东西都将不被浏览器识别

@规则

css规则是样式表主体，通常会包括大量规则，有时候也需要在样式表中包括其他一些信息（如字符集，导入其它的外部样式表，字体等）这些需要特定语句来完成

而@规则就是这样的语句

css中包含了如下@规则

  • @namespace告诉css引擎必须考虑XML命名空间

    • https://developer.mozilla.org/zh-CN/docs/Web/CSS/@namespace

  • @media满足媒体查询的条件则条件规则里面的规则生效

    • https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

  • @page描述了打印文档时布局的变化

    • https://developer.mozilla.org/zh-CN/docs/Web/CSS/@page

  • @font-face描述将下载哪些外部字体

    • https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

  • @keyframes描述css动画的关键帧

    • https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes

  • @document如果文档样式表满足给定条件则条件规则组里的规则生效

    • https://developer.mozilla.org/zh-CN/docs/Web/CSS/@document

  • @charset（https://developer.mozilla.org/zh-CN/docs/Web/CSS/@charset）

    用于定义样式表使用的字符集。它必须是样式表中的第一个元素。如果有多个 @charset 被声明，只有第一个会被使用，而且不能在HTML元素或HTML页面的 <style> 元素内使用

@charset "UTF-8";

现在我们是在html的head头里面来写

<meta charset="UTF-8">
  • @import(https://developer.mozilla.org/zh-CN/docs/Web/CSS/@import)

用于告诉css引擎引入外部样式表

link 和 @import 都能导入一个样式文件

  • link 是 HTML 标签，除了能导入 CSS 外，还能导入别的资源，比如图片、脚本和字体等；而 @import 是 CSS 的语法，只能用来导入 CSS
  • link 导入的样式会在页面加载时同时加载，@import 导入的样式需等页面加载完成后再加载
  • link 没有兼容性问题，@import 不兼容 ie5 以下
  • link 可以通过 JS 操作 DOM 动态引入样式表改变样式，而@import不可以

层叠性

层叠样式表是 CSS 中的核心特性之一，用于合并来自多个源的属性值的算法

针对不同源的样式，将按照如下的顺序进行层叠，越往下优先级越高

  • 用户代理样式表中的声明(如浏览器的默认样式，在没有设置其他样式时使用)

  • 用户样式表中的常规声明(由用户设置的自定义样式)

  • 作者样式表中的常规声明(这些是我们 Web 开发人员设置的样式)

  • 作者样式表中的 !important 声明

  • 用户样式表中的 !important 声明

理解层叠性的时候需要结合 CSS 选择器的优先级以及继承性来理解

针对同一个选择器，定义在后面的声明会覆盖前面的

作者定义的样式会比默认继承的样式优先级更高

选择器

基础选择器

  • 标签选择器：h1
  • 类选择器：.checked
  • ID 选择器：#picker
  • 通配选择器：*

属性选择器

  • [attr]：指定属性的元素；
  • [attr=val]：属性等于指定值的元素；
  • [attr*=val]：属性包含指定值的元素；
  • [attr^=val] ：属性以指定值开头的元素；
  • [attr$=val]：属性以指定值结尾的元素；
  • [attr~=val]：属性包含指定值(完整单词)的元素(不推荐使用)；
  • [attr|=val]：属性以指定值(完整单词)开头的元素(不推荐使用)；

组合选择器

  • 相邻兄弟选择器：A + B
  • 普通兄弟选择器：A ~ B
  • 子选择器：A > B
  • 后代选择器：A B

伪类

条件伪类

  • :lang()：基于元素语言来匹配页面元素；
  • :dir()：匹配特定文字书写方向的元素；
  • :has()：匹配包含指定元素的元素；
  • :is()：匹配指定选择器列表里的元素；
  • :not()：用来匹配不符合一组选择器的元素；

行为伪类

  • :active：鼠标激活的元素；
  • :hover： 鼠标悬浮的元素；
  • ::selection：鼠标选中的元素；

状态伪类

  • :target：当前锚点的元素；
  • :link：未访问的链接元素；
  • :visited：已访问的链接元素；
  • :focus：输入聚焦的表单元素；
  • :required：输入必填的表单元素；
  • :valid：输入合法的表单元素；
  • :invalid：输入非法的表单元素；
  • :in-range：输入范围以内的表单元素；
  • :out-of-range：输入范围以外的表单元素；
  • :checked：选项选中的表单元素；
  • :optional：选项可选的表单元素；
  • :enabled：事件启用的表单元素；
  • :disabled：事件禁用的表单元素；
  • :read-only：只读的表单元素；
  • :read-write：可读可写的表单元素；
  • :blank：输入为空的表单元素；
  • :current()：浏览中的元素；
  • :past()：已浏览的元素；
  • :future()：未浏览的元素；

结构伪类

  • :root：文档的根元素；
  • :empty：无子元素的元素；
  • :first-letter：元素的首字母；
  • :first-line：元素的首行；
  • :nth-child(n)：元素中指定顺序索引的元素；
  • :nth-last-child(n)：元素中指定逆序索引的元素；；
  • :first-child：元素中为首的元素；
  • :last-child ：元素中为尾的元素；
  • :only-child：父元素仅有该元素的元素；
  • :nth-of-type(n)：标签中指定顺序索引的标签；
  • :nth-last-of-type(n)：标签中指定逆序索引的标签；
  • :first-of-type ：标签中为首的标签；
  • :last-of-type：标签中为尾标签；
  • :only-of-type：父元素仅有该标签的标签；

伪元素

  • ::before：在元素前插入内容；
  • ::after：在元素后插入内容；

优先级

优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的各自数值决定为了记忆，数值越大的权重越高

  • 10000：!important
  • 01000：内联样式
  • 00100：ID 选择器；
  • 00010：类选择器、伪类选择器、属性选择器
  • 00001：元素选择器、伪元素选择器
  • 00000：通配选择器、后代选择器、兄弟选择器

!important 可以把优先级提至最高，所以需要谨慎使用它

  • 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
  • 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
  • 永远不要在你的插件中使用 !important
  • 永远不要在全站范围的 CSS 代码中使用 !important

继承性

CSS 中有一个很重要的特性就是子元素会继承父元素对应属性计算后的值

如果css中不存在继承的话，那我们的工作量就变大了，我们需要为每个文本都设置相对应的颜色，不光工作量变大，效率也变小了

  • 字体相关：font-family、font-style、font-size、font-weight 等；
  • 文本相关：text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等；
  • 列表相关：list-style、list-style-image、list-style-type、list-style-position 等；
  • 其他属性：visibility、cursor 等

对于其他默认不继承的属性也可以通过以下几个属性值来控制继承行为：

  • inherit：继承父元素对应属性的计算值
  • initial：应用该属性的默认值，比如 color 的默认值是 #000
  • unset：如果属性是默认可以继承的，则取 inherit 的效果，否则同 initial
  • revert：效果等同于 unset，兼容性差

文档流

特性如下

  • 块级元素默认会占满整行，所以多个块级盒子之间是从上到下排列的
  • 内联元素默认会在一行里一列一列的排布，当一行放不下的时候，会自动切换到下一行继续按照列排布

如何去脱离文档流

使用浮动或者定位来脱离

  • 使用浮动（float）会将元素脱离文档流，移动到容器左/右侧边界或者是另一个浮动元素旁边，该浮动元素之前占用的空间将被别的元素填补，另外浮动之后所占用的区域不会和别的元素之间发生重叠
  • 使用绝对定位（position: absolute;）或者固定定位（position: fixed;）也会使得元素脱离文档流，且空出来的位置将自动被后续节点填补

盒模型

在 CSS 中任何元素都可以看成是一个盒子，而一个盒子是由 4 部分组成的：内容（content）、内边距（padding）、边框（border）和外边距（margin）

盒模型有 2 种：标准盒模型和 IE 盒模型，分别是由 W3C 和 IExplore 制定的标准

高版本的浏览器基本上默认都是使用标准盒模型

  • 标准盒模型认为：盒子的实际尺寸 = 内容（设置的宽/高） + 内边距 + 边框
  • IE 盒模型认为：盒子的实际尺寸 = 设置的宽/高 = 内容 + 内边距 + 边框

所以在 CSS3 中新增了一个属性 box-sizing，允许开发者来指定盒子使用什么标准

  • content-box：标准盒模型
  • border-box：IE 盒模型

盒子类型由 display 决定，同时给一个元素设置 display 后，将会决定这个盒子的 2 个显示类型（display type）

outer display type

  • outer display type（对外显示）：决定了该元素本身是如何布局的，即参与何种格式化上下文；

对外显示方面，盒子类型可以分成 2 类：block-level box（块级盒子） 和 inline-level box（行内级盒子）。

依据上图可以列出都有哪些块级和行内级盒子：

  • 块级盒子：display 为 block、list-item、table、flex、grid、flow-root 等；
  • 行内级盒子：display 为 inline、inline-block、inline-table 等；

所有块级盒子都会参与 BFC，呈现垂直排列；而所有行内级盒子都参会 IFC，呈现水平排列

  • block

    • 占满一行，默认继承父元素的宽度；多个块元素将从上到下进行排列
    • 设置 width/height 将会生效
    • 设置 padding 和 margin 将会生效

  • inline

    • 不会占满一行，宽度随着内容而变化；多个 inline 元素将按照从左到右的顺序在一行里排列显示，如果一行显示不下，则自动换行
    • 设置 width/height 将不会生效
    • 设置竖直方向上的 padding 和 margin 将不会生效

  • inline-block

    • 是行内块元素，不单独占满一行，可以看成是能够在一行里进行左右排列的块元素
    • 设置 width/height 将会生效
    • 设置 padding 和 margin 将会生效

inner display type

  • inner display type（对内显示）：其实就相当于把该元素当成了容器，规定了其内部子元素是如何布局的，参与何种格式化上下文

对内方面，其实就是把元素当成了容器，里面包裹着文本或者其他子元素

container box 的类型依据 display 的值不同，分为 4 种

  • block container：建立 BFC 或者 IFC；
  • flex container：建立 FFC；
  • grid container：建立 GFC;
  • ruby container

格式化上下文

不同类型的盒子有不同格式化上下文

  • BFC (Block Formatting Context) 块级格式化上下文；
  • IFC (Inline Formatting Context) 行内格式化上下文；
  • FFC (Flex Formatting Context) 弹性格式化上下文；
  • GFC (Grid Formatting Context) 格栅格式化上下文；

BFC和IFC是非常重要的，他们可以直接影响网页的布局

BFC

  • 渲染规则

    • 内部的盒子会在垂直方向，一个接一个地放置
    • 盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠
    • 每个元素的 margin 的左边，与包含块 border 的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此
    • BFC 的区域不会与 float 盒子重叠
    • BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
    • 计算 BFC 的高度时，浮动元素也参与计算

  • 创建 BFC

    • 根元素：html
    • 非溢出的可见元素：overflow 不为 visible
    • 设置浮动：float 属性不为 none
    • 设置定位：position 为 absolute 或 fixed
    • 定义成块级的非块级元素

  • 应用场景

    • 自适应两栏布局

在这里插入图片描述

  • 清除内部浮动

在这里插入图片描述

在这里插入图片描述

IFC

  • 渲染规则
    • 子元素在水平方向上一个接一个排列，在垂直方向上将以容器顶部开始向下排列
    • 节点无法声明宽高，其中 margin 和 padding 在水平方向有效在垂直方向无效
    • 节点在垂直方向上以不同形式对齐
    • 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的线盒（line box）。线盒的宽度是由包含块（containing box）和与其中的浮动来决定
    • IFC 中的 line box 一般左右边贴紧其包含块，但 float 元素会优先排列
    • IFC 中的 line box 高度由 line-height 计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同
    • 当内联级盒子的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性值来决定
    • 当一个内联盒子超过父元素的宽度时，它会被分割成多盒子，这些盒子分布在多个 line box 中。如果子元素未设置强制换行的情况下，inline box 将不可被分割，将会溢出父元素
  • 应用场景
    • 水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中
    • 垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align: middle，其他行内元素则可以在此父元素下垂直居中
David凉宸
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
头歌教学实践平台 Web前端开发基础 CSS-基础知识
01-20
通过这个“头歌教学实践平台”的CSS基础知识课程，学习者可以系统地了解和掌握CSS，为成为优秀的Web前端开发者打下坚实的基础。通过实践项目和不断练习，将理论知识转化为实际技能，从而在网页设计领域游刃有余。
Web前端开发工程师笔试题-CSS+Javascript.doc
最新发布
12-14
本资源提供了Web前端开发工程师笔试题，涵盖了CSS和Javascript相关知识点，总共22道题，涵盖了CSS样式表、HTML标签、Javascript语法、Document对象、CSS选择符、CSS样式属性等多个方面。 一、CSS基础知识 1. CSS...
CSS 链接
weixin_30718391的博客
06-05 296
不同的链接可以有不同的样式。 链接样式 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 特别的链接，可以有不同的样式，这取决于他们是什么状态。 这四个链接状态是： a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 实例 a:link...
web前端（9）—— CSS属性
dingyu6453的博客
11-14 128
属性 终于到css属性，前面就零零散散的用了什么color，font-size之类，本篇博文就专项的介绍它了 字体属性 font-family 此属性是设置字体样式的，比如微软雅黑，方正书体，华文宋体之类的 例，给body标签设置字体： body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-s...
前端学习之JS（JavaScript）基本语法
wunanya的博客
04-30 299
JavaScript基本介绍 一个完整的JavaScript基本由3部分组成： 第一部分：ECMAScript是核心 第二部分：文档对象模型（DOM）主要用来整合js,css,html 第二部分：浏览对象模型（BOM）主要用来整合js和浏览器 ...
JavaScript - 核心语法学习
william_n的博客
05-06 3086
了解学习JavaScript语言的最核心的东西，帮助我们重新理解前端本质, 快速高效开发前端项目。
css中的.9效果
jam476的专栏
01-29 1334
border-image
HTML5及CSS3web前端开发技术习题答案解析.pdf
01-07
### HTML5及CSS3 Web前端...以上就是关于HTML5及CSS3 Web前端开发技术的一些关键知识点和习题解析。这些内容不仅涵盖了HTML5的新特性，还包括了如何利用这些特性来改善Web应用的功能性和用户体验。希望对你有所帮助！
web前端开发技术储久良第三版答案
12-09
《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点，主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术，通过解决...
初入WEB前端（6）CSS 基本语法
wanna__ac的博客
06-29 164
1.基本语法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- style标签里面和外面是两个世界，学习CSS，相当于学了一门新的语言 --> <style> /*CSS里的注释 CSS基本语法：选择
css手写九宫格布局
hong
10-09 380
css手写九宫格布局 能实现九宫格布局的方式有很多种 比如 flex grid table float 等等 下面整理的是flex布局写的 一起看看吧 html部分 实现布局 <body> <div> <ul> <li> 我是1 </li> <li> 我是2 </li> <li> 我是3 </li> <li> 我是4 </li>
css让图片的某些区域拉伸，其他部分保持比例，起到类似于安卓中点九.9图的效果
英勇的博客
08-21 5390
css图片拉伸后，让某些区域不变形的解决方案--类似于安卓中的点9图
border-image属性+点九图设计使用方法
fyydashen的博客
09-10 907
前提 UI做的一个页面的设计图，主体内容背景是一个八边形，加四个不规则顶角边框。 实现思路 宽、高固定，那就简单了，直接让UI给出一个固定宽高的背景.png就好了。 宽、高不固定，可以参考聊天气泡框实现原理，4个顶角是固定的，将中间的纯背景进行拉伸。 UI给我的设计图（关键词：点九图） 4个顶角的尺寸是58px*58px，目前中间的那部分尺寸也是58px，其实中间尺寸>1px就可以了，最好留点安全距离，以便拉伸的时候不会影响到4个角。 我使用css border-image属性.
33个高能CSS选择器让我受益匪浅
wang_yu_shun的博客
09-18 370
作者：陈大鱼头github：KRISACHA大家好，我是“前端点线面”，一位新生代农民工，欢迎关注我获取最新前端知识和《前端百题斩》pdf版(包括JS基础篇、浏览器篇、网络篇共计50个章节...
前端剑解第二天
cxuyuanLch的博客
04-09 245
软技能：前端数据回显 数据回显就是当用户数据提交失败时，自动填充好已经输入的数据。 对于简单数据类型，如：Integer、String、Float等 使用Model将传入的参数再放到request域实现显示。 @RequestMapping(value="/editItems",method={RequestMethod.GET}) public String editItems(Model model,Integer id)throws Exception{ //传入的id
jquery 属性操作 attr( ) prop（）css( ）区别
12-22 142
一 attr () 和 prop( ) 操作属性 谈谈我的总结： 1 2 1 属性的定义，根据W3C手册所述：属性包括，标准属性：id class style title 语言属性 lang dir以及某些特定的元素的固有的属性，比如 a 的 href target 属性，input元素的 radio checked type alt src disabled val...
8个CSS函数的小技巧
梦空间
09-02 1092
转载自：8个CSS函数的小技巧 CSS现在已经能实现比网站开发者预料到的更多的功能，并且随着时间的推移，样式表语言越来越强大，能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。 1.纯CSS Tooltip 许多网站还是在使用JavaScript来创建Tooltip效果，但实际上通过CSS能更简单的实现。最简单的方
css 类似.9图
CamilleZJ的博客
05-23 2540
.9图原理：三部分：左右各一部分，中间内容区随内容自动伸缩 1、h5 .package-num{height: .4rem;line-height: .4rem;min-width: .4rem;text-align: center;padding: 0 .1rem;font-size: .28rem;color: #fff;border-radius: .2rem;background...
"2023年web前端开发知识点总结：HTML、CSS、JavaScript
首先，2023年web前端开发知识点总结.doc记录了当前web前端开发领域的最新知识点和技术趋势。在这份文档中，涵盖了HTML、CSS、JavaScript以及其他相关的技术，对于正在学习或从事web前端开发的人员来说，是一份很好的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

David凉宸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值