CSS3--美若天仙!?

免责声明:本文仅做分享~

 

目录

CSS引入方式

 选择器

盒子尺寸和背景色

文字控制属性

单行文字 垂直居中

字体族

font复合属性

文本对齐方式

文本修饰线

color 文字颜色

-----

复合选择器

伪类选择器

超链接伪类

CSS特性

继承性

层叠性

优先级

Emmet 写法

背景属性

背景图平铺方式

背景图缩放

背景图固定

背景复合属性

显示模式

块级元素

行内元素

行内块元素

-转换显示模式

-----

结构伪类选择器

:nth-child(公式)

伪元素选择器 

盒子模型

组成

边框线 

内边距

尺寸计算

外边距

外边距问题 – 合并现象

外边距问题 – 塌陷问题

行内元素 – 内外边距问题

清除默认样式

元素溢出

圆角

阴影

标准流

浮动

清除浮动

总结

flex布局

组成部分:

主轴对齐方式

侧轴对齐方式

修改主轴方向

弹性伸缩比

弹性盒子换行

行对齐方式


CSS引入方式

内部样式:CSS 代码写在 style 标签里面.

外部样式:CSS 代码写在单独的 CSS 文件中(.css) 在 HTML 使用 link 标签引入 .

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

行内样式:配合 JavaScript 使用,CSS 写在标签的 style 属性值里.


 选择器

  选择器: <br>

  标签选择器: <br>

  类选择器: <br>   .

  ID选择器: <br>    #

  属性选择器: <br>  

  伪类选择器: <br>

  伪元素选择器: <br>

  通配符选择器: <br> <!-- 一般删除一些样式时使用 -->   *{}


盒子尺寸和背景色


文字控制属性

行高的测量方法:从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)。


单行文字 垂直居中

行高属性值等于盒子高度属性值.


字体族

属性名:font-family

属性值:字体名

font-family属性值可以书写多个字体名,各个字体名用逗号隔开,执行顺序是从左向右依次 查找.

font-family 属性最后设置一个字体族名,网页开发建议使用无衬线字体.


font复合属性

设置网页文字公共样式.

属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)

--字号和字体值必须书写.


文本对齐方式

 控制内容水平对齐方式 .   属性名:text-align

#divs3 {

  text-align: center;

}

text-align本质是控制内容的对齐方式,属性要设置给内容的父级


文本修饰线

text-decoration


color 文字颜色


-----

复合选择器

伪类选择器

伪类表示元素状态,选中元素的某个状态设置样式。

鼠标悬停状态:选择器:hover { CSS 属性 }


超链接伪类

如果要给超链接设置以上四个状态,需要按 LVHA 的顺序书写。


CSS特性

继承性 层叠性 优先级

  css三大特性:继承、层叠、优先级 <br>

  继承:子元素继承父元素的样式。 (文字控制属性。)

  层叠:同一元素的样式层叠,后面的样式覆盖前面的样式。 

  优先级(权重):!important > 内联样式 > 外部样式表 > 内部样式表 > 浏览器默认样式。

  id > class > 标签选择器 > 通配符选择器

继承性

继承性:子级默认继承父级的 文字控制属性

 如果标签有默认文字样式会继承失败。 例如:a 标签的颜色、标题的字体大小。

层叠性

特点: 相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性

不同的属性会叠加:不同的 CSS 属性都生效。

优先级

优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。


基础选择器:

规则:选择器优先级高的样式生效。

公式:

通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

(选中标签的范围越大,优先级越低)


复合选择器-叠加 :

叠加计算:如果是复合选择器,则需要权重叠加计算。

公式:(每一级之间不存在进位)

规则:

从左向右依次比较选个数,同一级个数多的优先级高,如果个数相同,则向后比较

!important 权重最高

继承权重最低


Emmet 写法

代码的简写方式,输入缩写 VS Code 会自动生成对应的代码。


背景属性

背景图默认有平铺(复制)效果。 bgi

背景图平铺方式

background-repeat(bgr)


背景图缩放

设置背景图大小          

background-size(bgz)

常用属性值: 关键字

cover:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见

contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白 百分比:根据盒子尺寸计算图片大小 数字 + 单位(例如:px)

(图片比例与盒子比例相同,使用 cover 或 contain 缩放背景图效果相同。)


背景图固定

背景不会随着元素的内容滚动。

background-attachment(bga)
fixed


背景复合属性

background(bg)

属性值:

背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定

(空格隔开各个属性值,不区分顺 序)


显示模式

显示模式:标签(元素)的显示方式。

作用:布局网页的时候,根据标签的显示模式选择合适的标签摆放内容。

块级元素

l 独占一行        div

l 宽度默认是父级的100%

l 添加宽高属性生效

行内元素

l 一行可以显示多个        span

l 设置宽高属性不生效

l 宽高尺寸由内容撑开

行内块元素

l 一行可以显示多个

l 设置宽高属性生效

l 宽高尺寸也可以由内容撑开


-转换显示模式


-----

结构伪类选择器

作用:根据元素的结构关系查找元素。

:nth-child(公式)

n=0 -->


伪元素选择器 

创建虚拟元素(伪元素),用来摆放装饰性的内容。

• 必须设置 content: ””属性,用来 设置伪元素的内容,如果没有内容,则引号留空即可

• 伪元素默认是行内显示模式

• 权重和标签选择器相同


盒子模型

组成

• 内容区域 – width & height

• 内边距 – padding(出现在内容与盒子边缘之间)

• 边框线 – border

• 外边距 – margin(出现在盒子外面)


边框线 

属性名:border(bd) 属性值:边框线粗细 线条样式 颜色(不区分顺序)

设置单方向边框线 :

属性名:border-方位名词(bd+方位名词首字母,例如,bdl)

属性值:边框线粗细 线条样式 颜色(不区分顺序)


内边距

设置 内容 与 盒子边缘 之间的距离。

padding / padding-方位名词


尺寸计算

 盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

l 结论:给盒子加 border / padding 会撑大盒子

l 解决:

l 手动做减法,减掉 border / padding 的尺寸

l 內减模式:box-sizing: border-box


外边距

 拉开两个盒子之间的距离.

margin

与 padding 属性值写法、含义相同.

版心居中 – 左右 margin 值 为 auto(盒子要有宽度


外边距问题 – 合并现象

场景:垂直排列的兄弟元素,上下 margin 会合并.

现象:取两个 margin 中的较大值生效.


外边距问题 – 塌陷问题

场景:父子级的标签,子级的添加  上外边距  会产生塌陷问题.

现象:导致父级一起向下移动.

解决方法:

• 取消子级margin,父级设置padding

• 父级设置 overflow: hidden

• 父级设置 border-top


行内元素 – 内外边距问题

场景:行内元素添加 margin 和 padding,无法改变元素垂直位置

解决方法:给行内元素添加 line-height 可以改变垂直位置


清除默认样式


元素溢出

控制溢出元素的内容的显示方式。

overflow


圆角

border-radius

正圆形状 -- 给正方形盒子设置圆角属性值为 宽高的一半 / 50%

胶囊形状 -- 给长方形盒子设置圆角属性值为 盒子高度的一半.


阴影

box-shadow : X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影


标准流

标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个.

div

span

浮动

让块元素水平排列。


清除浮动

场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱) 解决方法:清除浮动(清除浮动带来的影响)

方法一:额外标签法

• 在父元素内容的最后添加一个块级元素,设置 CSS 属性  clear: both

方法二:单伪元素法

方法三:双伪元素法(推荐)

方法四:overflow     --最简单.

• 父元素          添加 CSS 属性           overflow: hidden


总结

浮动属性 float,left 表示左浮动,right 表示右浮动

l特点

1.浮动后的盒子顶对齐

2.浮动后的盒子具备行内块特点

3.父级宽度不够,浮动的子级会换行

4.浮动后的盒子脱标

l清除浮动:子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果

推荐双伪元素法清除浮动。

l拓展:浮动本质作用是实现图文混排效果。


flex布局

--用的更多。

Flex 布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活。


设置方式:给父元素设置 display: flex,子元素可以自动挤压或拉伸。

组成部分:

•弹性容器

•弹性盒子

•主轴:默认在水平方向

•侧轴 / 交叉轴:默认在垂直方向


--沿主轴方向排列。


主轴对齐方式

justify-content

 

      /* 各个间距都相等 */

      justify-content: space-evenly;


侧轴对齐方式

•align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)

•align-self:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)

侧轴无高度 / stretch 


修改主轴方向

主轴默认在水平方向,侧轴默认在垂直方向。

属性名:flex-direction

主轴 ,侧轴


弹性伸缩比

作用:控制弹性盒子的主轴方向的尺寸。

属性名:flex

属性值:整数数字,表示占用父级剩余尺寸的份数。


弹性盒子换行

弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示。

flex-wrap

wrap:换行

nowrap:不换行(默认)


行对齐方式

align-content

 --该属性对单行弹性盒子模型无效。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/55723.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

H、Happy Number(2024牛客国庆集训派对day7)

题目链接&#xff1a; H-Happy Number_2024牛客国庆集训派对day7 (nowcoder.com) 题目描述&#xff1a; 翻译为中文&#xff1a; 数据范围&#xff1a; 输入样例&#xff1a; 680 输出样例&#xff1a; 326623 分析: 本来以为是dfs&#xff0c;但是看到数据范围1e9, 联想到是…

通信工程学习:什么是三网融合

三网融合 三网融合&#xff0c;又称“三网合一”&#xff0c;是指电信网、广播电视网、互联网在高层业务应用上的深度融合。这一概念在近年来随着信息技术的快速发展而逐渐受到重视&#xff0c;并成为推动信息化社会建设的重要力量。以下是对三网融合的详细解释&#xff1a; 一…

go基础面试题汇总第一弹

init函数是什么时候执行的? init的函数的作用是什么&#xff1f; 通常作为程序执行前包的初始化&#xff0c;例如mysql redis 等中间件的初始化 init函数的执行顺序是怎样的&#xff1f; 分不同情况来回答&#xff1a; 在同一个go文件里面如果有多个init方法&#xff0c;它们…

扩展、包含、泛化-系统架构师(七十七)

1&#xff08;&#xff09;是系统分析阶段结束后得到的工作产品&#xff0c;&#xff08;&#xff09;是系统测试阶段完成后的工作产品。 问题1 A系统设计规格说明 B系统方案建议书 C系统规格说明 D单元测试数据 问题2 A验收测试计划 B测试标准 C系统测试计划 D操作手…

git fetch 和 git pull 的区别

git fetch 和 git pull 的区别 git fetch 功能&#xff1a;git fetch 用于从远程仓库获取最新的代码和提交信息&#xff0c;并将其保存到本地仓库的相应远程跟踪分支中&#xff0c;不会自动合并或修改当前的工作目录或当前分支。 合并&#xff1a;此命令不会自动合并获取的更新…

社团活动助手系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;活动分类管理&#xff0c;用户管理&#xff0c;社团活动管理&#xff0c;报名信息管理&#xff0c;签到登记管理&#xff0c;投票项目管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首…

四款语音转文字神器,一键搞定会议记录!

嘿&#xff0c;朋友们&#xff0c;今天咱们来聊聊那些语音转文字的免费软件吧&#xff01;在这个快节奏的时代&#xff0c;谁不想省点时间&#xff0c;少敲几下键盘呢&#xff1f;尤其是那些开会、采访或者闲聊时&#xff0c;语音消息满天飞的日子&#xff0c;一个好用的语音转…

【业务场景】最全的购物车设计与实现

前言 博主最近在做一个购物商城&#xff0c;正好设计到购物车模块&#xff0c;于是乎全面的来聊一聊购物车模块实现的一些核心要点吧&#xff0c;很值得反复品味的设计&#xff0c;当需要实现购物车的时候&#xff0c;本文应该拿来就能用。 目录 1.需要解决的核心问题清单 2…

Mybatis-plus做了什么

Mybatis-plus做了什么 Mybatis回顾以前的方案Mybatis-plus 合集总览&#xff1a;Mybatis框架梳理 聊一下mybatis-plus。你是否有过疑问&#xff0c;Mybatis-plus中BaseMapper方法对应的SQL在哪里&#xff1f;它为啥会被越来越多人接受。在Mybatis已经足够灵活的情况下&…

【分布式微服务云原生】 RPC协议:超越HTTP的远程通信艺术

目录 RPC协议&#xff1a;超越HTTP的远程通信艺术引言RPC协议的实现方式RPC的核心机制流程图&#xff1a;RPC通信流程表格&#xff1a;不同RPC实现方式的比较结论呼吁行动Excel表格&#xff1a;RPC协议实现方式总结 RPC协议&#xff1a;超越HTTP的远程通信艺术 摘要 RPC&#…

pdsh:一个用于并行执行命令的工具

pdsh&#xff08;Parallel Distributed Shell&#xff09;是一个用于并行执行命令的工具&#xff0c;可以在多个远程主机上同时运行相同的命令。它对于需要在多台服务器上执行批量操作的系统管理员和开发人员非常有用。 pdsh 介绍 主要特性 并行执行&#xff1a; pdsh 可以在…

22.第二阶段x86游戏实战2-背包遍历REP指令详解

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 本人写的内容纯属胡编乱造&#xff0c;全都是合成造假&#xff0c;仅仅只是为了娱乐&#xff0c;请不要…

【Java 并发编程】多线程安全问题(上)

前言 虽然并发编程让我们的 CPU 核心能够得到充分的使用&#xff0c;程序运行效率更高效。但是也会引发一些问题。比如当进程中有多个并发线程进入一个重要数据的代码块时&#xff0c;在修改数据的过程中&#xff0c;很有可能引发线程安全问题&#xff0c;从而造成数据异常。 p…

mysql学习教程,从入门到精通,SQL 表、列别名(Aliases)(30)

1、SQL 表、列别名&#xff08;Aliases&#xff09; 在SQL中&#xff0c;表别名&#xff08;Table Aliases&#xff09;和列别名&#xff08;Column Aliases&#xff09;是两种非常有用的技术&#xff0c;可以使查询语句更加简洁和易读。它们还可以帮助处理复杂的查询&#xf…

免费 Oracle 各版本 离线帮助使用和介绍

文章目录 Oracle 各版本 离线帮助使用和介绍概要在线帮助下载离线文档包&#xff1a;解压离线文档&#xff1a;访问离线文档&#xff1a;导航使用&#xff1a;目录介绍Install and Upgrade&#xff08;安装和升级&#xff09;&#xff1a;Administration&#xff08;管理&#…

做无货源反向代购业务需要的代购系统功能需求讲解(一):商品数据接入

在电子商务领域&#xff0c;无货源反向代购业务逐渐崭露头角&#xff0c;成为许多创业者和中小企业拓展市场的新途径。这种业务模式的核心在于通过代购平台&#xff0c;将国外或特定地区的商品信息展示给国内消费者&#xff0c;并在消费者下单后&#xff0c;由代购方进行采购、…

第18场小白入门赛(蓝桥杯)

第 18 场 小白入门赛 6 武功秘籍 考察进制理解。 对于第 i i i 位&#xff0c;设 b i t i x bit_ix biti​x &#xff0c;每一位的最大值是 b j b_j bj​ &#xff0c;也就是说每一位是 b j 1 b_j1 bj​1 进制 &#xff0c;那么第 i i i 位的大小就是 x ∑ j i 1…

AI学习指南深度学习篇-生成对抗网络在深度学习中的应用

AI学习指南深度学习篇-生成对抗网络在深度学习中的应用 生成对抗网络&#xff08;GANs&#xff09;自2014年提出以来&#xff0c;已经成为深度学习领域的一种重要技术。它为图像生成、图像编辑、风格迁移和生成对抗防御等领域带来了革命性的变化。本文将深入探讨这些应用&…

代码训练营 day28|LeetCode 39,LeetCode 40,LeetCode 131

前言 这里记录一下陈菜菜的刷题记录&#xff0c;主要应对25秋招、春招 个人背景 211CS本CUHK计算机相关硕&#xff0c;一年车企软件开发经验 代码能力&#xff1a;有待提高 常用语言&#xff1a;C 系列文章目录 第28天 &#xff1a;第七章 回溯算法part02 文章目录 前言系列…

成都睿明智科技有限公司真实可靠吗?

在这个日新月异的电商时代&#xff0c;抖音作为短视频与直播电商的佼佼者&#xff0c;正以前所未有的速度重塑着消费者的购物习惯。而在这片充满机遇与挑战的蓝海中&#xff0c;成都睿明智科技有限公司以其独到的眼光和专业的服务&#xff0c;成为了众多商家信赖的合作伙伴。今…