百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术资源 > 正文

Python Web全栈之旅11--Web前端●CSS知识点汇总,建议收藏

off999 2024-10-19 07:12 25 浏览 0 评论


1、三种样式表

● 内部样式表:一般写在head元素中

● 内联样式表:元素的全局属性style中

● 外部样式表:一般在head元素中(推荐)

<link rel="stylesheet" href="../../css/index.css">


2、css代码语法

css语法=选择器+申明块

● 选择器

① 基础选择器

对将来学习Python爬虫很有帮助

I、元素选择器 elementname

本色出演,不需要加其他字符。

II、类选择器 .classname

点不能省略

III、ID选择器 #idname

井号不能省略

② 属性选择器 elementname[attr]

③ 伪类选择器

选中某些元素的某种状态

I、link:超链接未访问时的状态

II、visted:超链接访问后的状态

III、hover:鼠标悬停的状态

IV、激活状态,鼠标按下状态

爱恨法则:love hate

④ 关系选择器

I、邻近兄弟元素选择器 A + B

作用 only one 元素。A跟B有同一个“父亲”,B紧跟A元素,好比亲兄弟。


II、兄弟元素选择器 A ~ B

注意:是A的相邻元素。A和B有同一个“父亲”,B不必须紧跟A。



III、直接子元素选择器 A > B

直接子元素,只选择一代,不是所有的子元素都能集成A的“财产”




IV、后代元素选择器A B

A B 选择所有后代,范围更广,使用频率最高。




3、css层叠

当同一样式多次应用到同一元素时,css会通过层叠解决声明冲突

哪一种样式会最终被选中呢?

遵循的3个准则:

比较重要性 > 比较特殊性 > 比较源次序

● 比较重要性

先去掉一种特殊情况:重要声明,在属性值后加!important



● 比较特殊性

css层叠会选择特殊性最高的样式

特殊性从高到低:

内联样式 > id选择器 > 类选择器 > 元素选择器



类比场景:打扫卫生

“内联样式”的特殊性:好比老师走到Python大星面前,对他说:你负责擦窗户。

“id选择器”的特殊性:老师说学号为040105的学生打扫走道

“类选择器”的特殊性:老师说第一组打扫教室

“元素选择器”的特殊性:三年级二班打扫操场东南角


我们知道css中会出现组合的情况,这个时候怎么比较特殊性呢?

我们可以通过“积分制”来判断

“内联样式”----------------积分1000

“id选择器”----------------积分100

“类选择器”----------------积分10

“元素选择器”--------------积分1

属性选择器、伪类选择器也各自积10分;

伪元素选择器积1分

最终,谁的总积分高,就听谁的!



4、继承

● 子元素会继承父元素的所有属性吗?


儿子会继承父亲的部分基因,而不是全部基因。

● 什么情况下子元素会继承父元素的属性?


当子元素的继承属性没有指定值时,就会继承父元素同一属性

● 什么样的属性能被继承?

一般来说,跟文字内容相关的属性都能被继承,比如说font、color等属性

● 什么样的属性不能被继承?



常见的border、background等属性不能被继承

我们可以通过MDN官方文档查看css属性是否可以被继承



5、属性值的计算过程

● 什么叫确定声明值?

指样式表中没有起冲突的属性值

● 如果属性值发生冲突怎么办?

层叠冲突

● 如果某些继承属性在样式表中没有说明,会如何?

继承父元素的继承属性

● 如果是非继承属性,会如何?

使用默认值

举个栗子描绘下“属性值得计算过程”:

通缉犯画像:根据目击证人的描述,明确该罪犯带着眼镜,黄头发,此乃“确认声明值”;

该罪犯长得有点像电影明星黄X和王XX,更偏向王XX,此乃“层叠冲突”;

听口音该罪犯是东北人,可能正往北方跑,此乃“使用继承”;

肤色yellow,此乃“使用默认值”

6、盒模型

● 什么是盒模型?


我们在页面“审查”时经常看到的这个红色区域就是盒模型

● 盒模型分类

① 行盒:display属性等于inline的元素

注意:display属性是非继承属性

② 快盒:display属性等于block的元素

行盒和块盒最大的区别:



● 常见的块盒元素

容器元素、h1~h6、p

● 常见的行盒元素

span、a、img、video、audio

● 盒模型的4个组成部分

每一个颜色区域代表一个组成部分

从内到外依次是:


① 内容区,我们也叫“内容盒”

我们最最最常见的width、height设置的是盒子内容的宽高

② 填充(外边距)padding

有四个属性:

padding-left,padding-right,padding-top、padding-bottom;

这四个属性可以简写为padding。

I、padding:上 右 下 左

传四个参数,你可以想象成一个顺时针的钟

II、padding 上下 左右

传两个参数,第一个是上下边距的参数,第二个是左右边距的参数


③ 边框 border


边框样式:border-style

边框宽度:border-width

边框颜色:border-color

简写为border



④ 外边距 margin

有四个属性:

margin-left,margin-right,margin-top、margin-bottom

这四个属性可以简写为margin

使用方式和padding一样



7、盒模型应用

● 改变宽高作用范围

默认情况下,width 和 height 设置的是内容盒宽高

实际工作中,UI设计师给到是ps源文件,标注的是我们前面说到的“边框盒”的宽高。

默认情况下,我们width和height是设置的“内容盒”的宽高。


有一个“神器“” -- box-sizing 属性

box-sizing: border-box;

这样设置后,width和height的作用范围就是“边框盒”。


● 改变背景作用范围

默认情况下,背景作用范围是“边框盒”。


有一个“神器“” -- background-clip 属性

background-clip: content-box;

这样设置后,width和height的作用范围就是“内容盒”


● 溢出处理


overflow属性应运而生

常用的3个属性值:hidden、scroll、auto;

hidden:溢出部分隐藏

scroll:出现滚动条

auto:自动


● 空白处理


可以看到单行文字过多时,显示3个点






8、行盒模型


● 常见的行盒

包含具体内容的元素,如span、strong、em、i、img、video、audio

● 行盒一般的特征

① 行盒沿内容沿伸

② 行盒的宽高设置无效


行盒的宽高跟字体大小、行高、字体类型有关

③ 填充区、边框、外边距

水平方向:生效,和块盒一样

垂直方向:不会实际占用空间

● 行块盒

不独占一行(行盒特征),盒模型所有尺寸都生效(块盒特征)

分页应用


效果:



9、视觉格式化模型



I、 常规流


默认情况下,所有元素都属于常规流布局。

● 总体规则

块盒独占一行,行盒水平依次排列

● 包含块


每个盒子都有它的包含块,包含块决定了盒子的排列区域

绝大数情况下,盒子的包含块是其父元素的“内容盒”


● 水平方向

重点!重点!重点!

当块盒没有设置width时,width的默认值为auto

当块盒没有设置margin时,margin默认值是0

auto的作用:将剩余空间吸收完

当margin和width都设置为auto时,width优先将剩余空间吸收完。

当宽度、内边距、边框,外边距计算完,仍然有剩余空间,该剩余空间被margin-right(土黄色区域)全部吸收。




在常规流中,块盒在其包含块中居中,前提是宽度已设置,然后左右margin设置为auto。

● 垂直方向

如果height设置为auto,适应内容的高度

如果margin设置auto,表示0

● 百分比取值

padding、宽、margin相对的是包含块的宽度!宽度!宽度!!!


包含块的高度是否取决于子元素的高度,设置百分比无效。

包含块的高度不取决于子元素的高度,百分比相对于父元素的高度

● 上下外边距的合并


两个常规流块盒,上下外边距相邻,会进行合并。

两个外边距取最大值

兄弟元素的上下外边距



父子元素的上下外边距



方法 ① :

父元素增加border,使其内外边距不相临

方法 ② :

父元素增加padding,子元素margin去掉

● 常规流总结

常规流分为行盒和块盒,块盒横向撑满包含块,纵向外边距的合并。

下一个行盒的头部接上上一个行盒的尾部。

II、 浮动


● 应用场景

① 文字环绕

② 横向排列

忘记了吗?前面我们还能使用“行块盒”(display:inline-block)实现横向排列。

● 浮动的基本特点

① float:left /*左浮动,元素靠上靠左*/

② float:right /*右浮动,元素靠上靠右*/

浮动元素的包含块,和常规流一样,是父元素的内容盒

● 浮动后的盒子虽然是block,但是没有独占一行


页面效果:


我们可以通过“元素审查”看到class为left和right的元素设置为float后,

分别显示在父元素内容盒的左右两边,并不是独占一行

● 浮动盒子的宽度特点

当浮动盒子的宽度为auto时,适应内容的宽度



● 浮动盒子的高度特点

高度为auto时,无论是常规流还是浮动以及定位中,都是一致的,适应内容的高度

● 浮动在包含块中排列时,会避开常规流块盒


页面效果:

● 常规流块盒在排列时,无视浮动盒子

● 常规流块盒在排列时,会避开浮动盒子

从上图中我们可以看到,文字在块盒中,但是文字却环绕在img四周,

这是因为浏览器会自动生成一个行盒包裹文字,该行盒叫“匿名行盒”,

块盒p的总宽度还是不变的。

① 如果我们修改p元素的margin-left,会发生什么?

结合我们之前学过的知识,修改p元素的margin-left,是相对于包含块的,并不是img元素

② 修改img元素的margin-right

● 高度坍塌

如下图,父常规流盒子未设置高度,尽管子浮动盒子有高度,

但是没有将父盒子撑起,这就是所谓的父元素“高度坍塌”


使用clear属性清除浮动

方案 ① 增加一个div


方案 ② 使用伪元素

III、 定位

● 定位概念

手动控制元素在包含块中的精准位置

● 四种类型的定位

static:静态定位(不定位)

relative:相对定位

absolute:绝对定位

fixed:固定定位


● 定义元素

一个元素,只要position的取值不是static,认为该元素是一个定位元素


● 相对定位

position: relative;

相对定位不会导致元素脱离文档流,只是让元素在原来位置上进行偏移。

盒子的偏移不会对其他元素造成任何影响。




● 绝对定位

position: absolute;

绝对定位是相对于包含块的位置,脱离文档流。

包含块的位置:祖先第一个定位元素,该元素的填充盒为其包含块。若找不到,则它的包含块整个网页(初始化包含块)。



● 固定定位

position: fixed;

固定定位除了包含块的位置其他和绝对定位一样,脱离文档流。

固定定位的包含块:

固定为视口浏览器的可视窗口



● 定位下的居中

针对绝对定位和固定定位

① 定宽(高)

② 将左右(上下)距离设置为0

③ 将左右(上下)margin设置为auto

绝对定位和固定定位margin为auto时,吸收剩余空间


汇总

>>>Python Web全栈之旅04--Web前端●走入CSS的世界

>>>Python Web全栈之旅05--Web前端●CSS层叠样式的理解

>>>Python Web全栈之旅06--Web前端●盒模型

>>>Python Web全栈之旅07--Web前端●行盒模型

>>>Python Web全栈之旅08--Web前端●视觉格式化模型

>>>Python Web全栈之旅09--Web前端●CSS浮动

>>>Python Web全栈之旅10--Web前端●CSS定位


相关推荐

推荐一款Python的GUI可视化工具(python 可视化工具)

在Python基础语法学习完成后,进一步开发应用界面时,就需要涉及到GUI了,GUI全称是图形用户界面(GraphicalUserInterface,又称图形用户接口),采用图形方式显示的计算机操...

教你用Python绘制谷歌浏览器的3种图标

前两天在浏览matplotlib官方网站时,笔者无意中看到一个挺有意思的图片,就是用matplotlib制作的火狐浏览器的logo,也就是下面这个东东(网页地址是https://matplotlib....

小白学Python笔记:第二章 Python安装

Windows操作系统的python安装:Python提供Windows、Linux/UNIX、macOS及其他操作系统的安装包版本,结合自己的使用情况,此处仅记录windows操作系统的python...

Python程序开发之简单小程序实例(9)利用Canvas绘制图形和文字

Python程序开发之简单小程序实例(9)利用Canvas绘制图形和文字一、项目功能利用Tkinter组件中的Canvas绘制图形和文字。二、项目分析要在窗体中绘制图形和文字,需先导入Tkinter组...

一文吃透Python虚拟环境(python虚拟环境安装和配置)

摘要在Python开发中,虚拟环境是一种重要的工具,用于隔离不同项目的依赖关系和环境配置。本文将基于windows平台介绍四种常用的Python虚拟环境创建工具:venv、virtualenv、pip...

小白也可以玩的Python爬虫库,收藏一下

最近,微软开源了一个项目叫「playwright-python」,作为一个兴起项目,出现后受到了大家热烈的欢迎,那它到底是什么样的存在呢?今天为你介绍一下这个传说中的小白神器。Playwright是...

python环境安装+配置教程(python安装后怎么配置环境变量)

安装python双击以下软件:弹出一下窗口需选择一些特定的选项默认选项不需要更改,点击next勾选以上选项,点击install进度条安装完毕即可。到以下界面,证明安装成功。接下来安装库文件返回电脑桌面...

colorama,一个超好用的 Python 库!

大家好,今天为大家分享一个超好用的Python库-colorama。Github地址:https://github.com/tartley/coloramaPythoncolorama库是一...

python制作仪表盘图(python绘制仪表盘)

今天教大家用pyecharts画仪表盘仪表盘(Gauge)是一种拟物化的图表,刻度表示度量,指针表示维度,指针角度表示数值。仪表盘图表就像汽车的速度表一样,有一个圆形的表盘及相应的刻度,有一个指针...

总结90条写Python程序的建议(python写作)

  1.首先  建议1、理解Pythonic概念—-详见Python中的《Python之禅》  建议2、编写Pythonic代码  (1)避免不规范代码,比如只用大小写区分变量、使用容易...

[oeasy]python0137_相加运算_python之禅_import_this_显式转化

变量类型相加运算回忆上次内容上次讲了是从键盘输入变量input函数可以有提示字符串需要有具体的变量接收输入的字符串输入单个变量没有问题但是输入两个变量之后一相加就非常离谱添加图片注释,不超过1...

Python入门学习记录之一:变量(python中变量的规则)

写这个,主要是对自己学习python知识的一个总结,也是加深自己的印象。变量(英文:variable),也叫标识符。在python中,变量的命名规则有以下三点:>变量名只能包含字母、数字和下划线...

掌握Python的&quot;魔法&quot;:特殊方法与属性完全指南

在Python的世界里,以双下划线开头和结尾的"魔法成员"(如__init__、__str__)是面向对象编程的核心。它们赋予开发者定制类行为的超能力,让自定义对象像内置类型一样优雅工...

11个Python技巧 不Pythonic 实用大于纯粹

虽然Python有一套强大的设计哲学(体现在“Python之禅”中),但总有一些情况需要我们“打破规则”来解决特定问题。这触及了Python哲学中一个非常核心的理念:“实用主义胜于纯粹主义”...

Python 从入门到精通 第三课 诗意的Python之禅

导言:Python之禅,英文名是TheZenOfPython。最早由TimPeters在Python邮件列表中发表,它包含了影响Python编程语言设计的20条软件编写原则。它作为复活节彩蛋...

取消回复欢迎 发表评论: