《CSS权威指南》基础复习+查漏补缺

2024-04-01 20:48
文章标签 基础 css 复习 指南 frontend 权威 查漏 补缺

本文主要是介绍《CSS权威指南》基础复习+查漏补缺，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前几天被朋友问到几个CSS问题，讲道理么，接触CSS是从大一开始的，也算有3年半了，总是觉得自己对css算是熟悉的了。然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司，事情不算多，于是拿起《CSS权威指南》进行"基础复习"+"查漏补缺"，本篇文章主要是总结了些自己认为CSS中值的注意的几个知识点(本文知识点仅限本书范围内，若要讲CSS全部样式，那本兽还是选择慢慢懵逼去~)。

选择器

这里要说明的是类选择器的嵌套选择与多类选择器的差别，顺便捎上了一级子元素的选择

类选择器基本写法：

.your-class{/*...*/}

类选择器的嵌套选择写法：

.first-class .second-class{/*...*/}

多类选择器基本写法：

.first-class.second-class{/*...*/}

一级子元素的选择写法：

.first-class > .second-class{/*...*/}

从代码看它们之间的区别：

复制代码 
<style>.first-style.second-style{ color: blueviolet}.first-style .third-style{ font-style: italic}.first-style > .fourth-style{ font-weight: bold}
</style>    
<div class="first-style second-style">HELLO</div>
<div class="first-style third-style">hello</div>
<div class="first-style"><div class="second-style">HELLO</div></div>
<div class="first-style"><div class="third-style">hello</div></div>
<div class="first-style"><div><div class="third-style">Hello World</div></div></div>
<div class="first-style"><div class="fourth-style">Hello World</div></div>
<div class="first-style"><div><div class="fourth-style">Hello World</div></div></div>
复制代码

得出结论：

· 类选择器的嵌套选择，选择的是first-style类下的所有包含second-style类的子元素(不论几级子元素)

· 一级子元素的选择，选择的是first-style下的一级子元素中包含second-style类的元素，再往里层嵌套的元素不算

· 多类选择器的选择，选择同时包含first-style和second-style类的元素

样式优先级

样式的优先级由选择器本身的组件确定，我们将优先值表述为4个部分，如：0.0.0.0

注意：前一部分的优先级大于后一部分的优先级，请无视他们的值之间的大小。如：0.0.1.0 大于 0.0.0.12，规则以此类推。

选择器的具体优先级如下：

· 对于选择器中给定的各个ID属性值，加 0.1.0.0;

· 对于选择器中给定的各个类属性值、属性选择或伪类，加 0.0.1.0;

· 对于选择器中给定的各个元素和伪元素，加 0.0.0.1;

· 结合符和通配符选择对优先级没有任何贡献。

用代码说明优先级：

复制代码 
div{ color: black} /* 0.0.0.1 */
div p{ color:black} /* 0.0.0.2 */
.my-div{ color:black} /* 0.0.1.0 */
div.my-div{ color: black} /* 0.0.1.1 */
.my-div .my-p{ color: black} /* 0.0.2.0 */
.my-div p.my-p{ color: black} /* 0.0.2.1 */
div.my-div p.my-p{ color: black} /* 0.0.2.2 */
/*
... 以此类推
*/
#div-id{ color: black} /*0.1.0.0 */
/*
... 继续类推
*/
复制代码

那么有人会注意到，在0.0.0.0的4个部分中，第一个始终没使用到。它是怎么用的呢？

一般来说，第一个0是为内联样式声明保留的，它比其他声明的特殊性都高。
如：

<div style="/*...*/"></div> <!-- 1.0.0.0 -->

本节还存在"!important"问题

"!important"放在样式声明之后，即分号之前。并且它没有特殊的优先级值。那么它的优先如何处理呢？看以下代码：

<style>.impt{color: black !important}
</style>
<div class="impt" style="color:red">hello world</div>

得出结论：
"!important"声明的重要性超出了所有其他声明。

CSS正常流及元素

正常流

这里指西方语言文本从左向右、从上向下显示，也是我们熟悉的传统HTML文档的文本布局。要让一个元素不在正常流中，唯一的方法就是使之成为浮动/定位元素。

非替换元素

如果元素内容包含在文档中，则称之为非替换元素。如：<p></p>

替换元素

指用作为其他内容占位符的一个元素。如：<img />、<input />

块级元素

在正常流中，会在其框之前或之后生成"换行"，通过声明"display:block"可以让元素生成块级框。

行内元素

这些元素不会在之前或之后生成"行分隔符"，它们是块级元素的后代，通过"display:inline"可以让元素生成一个行内框。

margin 外边距

1.外边距垂直合并

垂直相邻的外边距会进行合并。两个外边距中较小的一个会被较大的一个合并(你也可以理解为"重叠")。

具体效果看例子：

复制代码 
<style>.first-div{ margin-bottom:50px;}.second-div{ margin-top:20px;}
</style>
<div class="first-div">this is div-1</div>
<div class="second-div">this is div-2</div>
复制代码

2.margin样式顺序

.your-class{ margin:<top> <right> <bottom> <left> }

顺序可以这样记：从12点钟开始，顺时针一圈。

缩写规则：

· 如果缺少左外边距的值，则使用右外边距的值

· 如果缺少下外边距的值，则使用上外边距的值

· 如果缺少右外边距的值，则使用上外边距的值

缩写代码：

.first-margin{ margin: 50px;} /* 50px 50px 50px 50px */
.second-margin{ margin: 50px 20px ;} /* 50px 20px 50px 20px */
.third-margin{ margin: 50px 30px 10px;} /* 50px 30px 10px 30px */

3.margin应用于行内元素的效果

当margin应用于行内元素，则对水平面有影响，对垂直面无任何影响。

效果代码：

<style>.mar-strong{ margin:20px 0}
</style>
<div>
<strong class="mar-strong">hello world</strong>

既然这里提到margin与行内元素之间的关系，我们也顺便看下padding与行内元素的关系吧。

当padding应用于行内元素，则对水平面有影响，对垂直面无影响(在没有设置background的情况下)。

看例子：

复制代码 
<style>.mar-strong{ padding:20px 0px; background: red}
</style>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<strong class="mar-strong">hello world</strong>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
复制代码

以上例子可以去掉padding或者background看看布局上有什么影响来验证。请慎重处理这三者之间的关系哦。

background-attachment

这里稍微提下这个属性。

background: scroll || fixed || inherit

初始值：scroll

看效果代码：

<style>.div-bg{ width: 100%; height: 3000px;}.bg-attachment{ background-image: url(img/1.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center}
</style>
<div class="div-bg bg-attachment"></div>

从上面例子可以看到，当滚动页面的时候，背景图始终居中跟随滚动。

浮动与清除

元素浮动

· CSS允许所有元素浮动

· 浮动元素周围外边距不会合并

<style>.div-float{float: left;margin: 50px}
</style>
<div class="div-float">HELLO WORLD</div>
<div class="div-float">hello world</div>

· 浮动元素会生成一个块级框，不论这个元素本身是什么。

复制代码 
<style>.span{ margin: 50px}.span-float{ float: left;}    
</style>
<span class="span span-float">HELLO WORLD</span>
<span class="span span-float">hello world</span>
复制代码

清除浮动

清除浮动可由clear属性完成。

clear: left || right || both || none || inherit

初始值: none

这里我们主要说明下left、right和both。分别是清除左边浮动元素(左边不让你浮动)、清除右边浮动元素(右边不让你浮动)和清除左右两边的浮动(两边都不让存在浮动元素)。

复制代码 
<style>.div-mar{ width: 100px;padding: 50px}.div-red{ background: red}.div-yellow{ background: yellow}.div-float-left{ float: left}.div-float-right{ float: right}.div-clear-both{ clear: both}.div-clear-left{ clear: left}.div-clear-right{ clear: right}
</style>
<div class="div-mar div-red div-float-left">HELLO WORLD</div>
<div class="div-mar div-yellow div-float-left div-clear-right">Hello World</div>
复制代码

可以对以上[class*="div-red"]元素进行左右浮动，再用[class*="div-yellow"]元素进行清除浮动。

元素定位

元素的定位可以通过使用position属性。

positon: static || relative || absolute || fixed || inherit

初始值： static

static(静态/正常定位)

正常生成元素框。

relative(相对定位)

元素偏移某个距离，元素仍保持其未定位之前的形状。

absolute(绝对定位)

元素从文档流完全删除，并相对其包含块定位。

fixed(固定定位)

元素框的表现类似于absolute，不过其包含块是视窗本身。

元素relative/absolute/fixed定位的同时，会为其后代元素建立一个包含块。

什么是包含块？

在HTML中，根元素就是html元素。

· "根元素"的包含块由用户代理建立

· 对于一个非根元素，如果其position值为relative或static，则包含块由最近的块级框、表单元格或行内块祖先框的内容边界构成

· 对于一个非根元素，如果其position值为absolute，包含块设置为最近的position值不是static的祖先元素

"visibility:hidden"与"display:none"的区别

当我们设置一个元素visibility为hidden的时候，元素处于不可见状态，但元素仍然会影响到文档的布局(元素仍存在，只是看不见)。

当我们设置一个元素display为none的时候，元素不显示，并从文档流中删除(元素不存在，可用于渲染优化)。 

"content" 生成内容

使用content属性插入内容或属性值。

<style>.div-content:before{ content: "[ "attr(value)" ] "}.div-content:after{content:" hello world"}
</style>
<div class="div-content" value="H">ello World</div>

附上在写的时候突然想到的一个问题

在不同元素内的子元素使用z-index的时候受不受父(祖先)元素之间关系的影响？

复制代码 
<style>.div-out{width: 400px; height: 200px; background: black;border-bottom: 1px solid white; position: relative;}.div-index-1{ width: 200px; height: 100px; background: red; position: absolute; bottom: -50px; z-index: 1}.div-index-2{ width: 200px; height: 100px; background: yellow; position: absolute; top: -50px; left: 20px; z-index: 1}
</style>    
<div class="div-out"><div class="div-index-1"></div>    
</div>
<div class="div-out"><div class="div-index-2"></div>
</div>
复制代码

得出结论：不受影响。

新手文章，有问题可交流讨论，不喜勿喷~~~ 觉得本文还行的就小手点个赞给个鼓励吧~

复制代码
src="http://player.youku.com/embed/XNzkxMTc3OTM2" allowfullscreen="" frameborder="0" height="498" width="510">
src="http://player.youku.com/embed/XNzkxMTc3OTM2" allowfullscreen="" frameborder="0" height="498" width="510">

这篇关于《CSS权威指南》基础复习+查漏补缺的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/868107。

相关文章

JDK21对虚拟线程的几种用法实践指南

JDK21对虚拟线程的几种用法实践指南

《JDK21对虚拟线程的几种用法实践指南》虚拟线程是Java中的一种轻量级线程,由JVM管理,特别适合于I/O密集型任务,：本文主要介绍JDK21对虚拟线程的几种用法,文中通过代码介绍的非常详细,... 目录一、参考官方文档二、什么是虚拟线程三、几种用法1、Thread.ofVirtual().start(
阅读更多...
从基础到高级详解Go语言中错误处理的实践指南

从基础到高级详解Go语言中错误处理的实践指南

《从基础到高级详解Go语言中错误处理的实践指南》Go语言采用了一种独特而明确的错误处理哲学,与其他主流编程语言形成鲜明对比,本文将为大家详细介绍Go语言中错误处理详细方法,希望对大家有所帮助... 目录1 Go 错误处理哲学与核心机制1.1 错误接口设计1.2 错误与异常的区别2 错误创建与检查2.1 基础
阅读更多...
vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...
Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多
阅读更多...
前端缓存策略的自解方案全解析

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,：本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”：浏览器到底缓存了谁？三、设计思路：把“发版”做成“自愈”四、代码
阅读更多...
通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter
阅读更多...
Vue3视频播放组件 vue3-video-play使用方式

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v
阅读更多...
使用Java填充Word模板的操作指南

使用Java填充Word模板的操作指南

《使用Java填充Word模板的操作指南》本文介绍了Java填充Word模板的实现方法,包括文本、列表和复选框的填充,首先通过Word域功能设置模板变量,然后使用poi-tl、aspose-words... 目录前言一、设置word模板普通字段列表字段复选框二、代码1. 引入POM2. 模板放入项目3.代码
阅读更多...
Spring的基础事务注解@Transactional作用解读

Spring的基础事务注解@Transactional作用解读

《Spring的基础事务注解@Transactional作用解读》文章介绍了Spring框架中的事务管理,核心注解@Transactional用于声明事务,支持传播机制、隔离级别等配置,结合@Tran... 目录一、事务管理基础1.1 Spring事务的核心注解1.2 注解属性详解1.3 实现原理二、事务事
阅读更多...
JS纯前端实现浏览器语音播报、朗读功能的完整代码

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面：本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本：① 语音自选参数，按钮控制语音：② 效果图：二、朗读多条文本：① 语音有默认值：②
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2