一.布局思路
二.对CSS代码的初步解析
三.对CSS的解析的更进一步解
2) CSS属性书写顺序 以及里面包含的知识点3) Overflow 和 text-overflow 的区别?
四. JS代码的解析
五. 在做本案例期间的思考 与 知识点之间的迁移
布局思路:
一个大盒子里面 5个小盒子 使用检查 将图片扣下来(当然可以选自己喜欢的图片的哦 小卓我是为了达到复原的效果)使用 background-image 而不是使用 img 是因为本demo 展示的效果是 随着盒子的打开图片逐渐展示在我们的眼前
二.对CSS代码的初步解析
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
/*
网页布局的核心本质?
就是利用CSS摆放盒子
box-sizing: border-box;
其中 border-box属性的作用: 是告诉浏览器: 你想要设置的边框和内边距都包含在width内
其次 其次大多数情况下 这个使得我们更容易地设定一个元素的宽高
说白了 box-sizinng最主要的用法 还是规定容器元素的最终尺寸的计算方式 */
body {
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
/*
1. font-family 作用: 定义文本的字体系列
其中属性值的作用: Muli 是一款用于广告设计方面的中文简体字体
sans-serif 是代表无衬线字体 说白了就是没有多余装饰
具体可以移步 ===> http://t.csdn.cn/GHqWH
2. display 属性常见的四种用法及其详解:
1)dispaly:none;
2)display:block;
3)display:inline;
4)display: inline-block;
1)display:none;
小卓同学目前使用过的情况是 做小的且点击可以关闭的广告(起到隐藏的效果)
当然也可以移步 或者继续往下看 ===> http://t.csdn.cn/m8otD
display:none; 使被添加此属性的东东 在界面上将不显示,且不保留原来的位置
这玩意一般总是被拎出来和 visibility: hidden; 进行对比
小小的扩展一下: visibility: hidden; 设置后使被添加此属性的东东从界面上不显示 但是原本所占的空间仍然保留
2)display: block;
除了转换为块级元素之外, 同时还有显示元素的意思
display:block; 独占一行 且 可以设置宽度和高度
3)display:inline;
就是不能设置那个上下的margin和padding
还有不能设置宽度
在一行内可以多个
4)display:inline-block;
一行内可以放多个行内块元素
可以设置宽度和高度
3. align-items:center;
这个就牵涉到flex布局 可以移步这个笔记 或者继续往下看 ===> http://t.csdn.cn/ciHU7
align-items:center; 设置侧轴上的子元素排列方式
flex布局: 1) flex布局的原理: 说白了就是通过给父盒子添加flex属性, 来控制子盒子的位置二号排列方式
2) 我们在布局弹性布局
一般先设置主轴的方向(flex-direction: row(默认从左到右) | row-reverse(从右往左) | column(从上到下) | column-reverse(从下到上))
3) flex布局中, 默认的子元素是不换行的 如果装不下, 则会缩小子元素的宽度, 放到父元素里面
4. justify-content:center;
这个也是flex布局的内容了哦
justify-content 属性定义了项目在主轴上的对齐方式
注意点: 就是这个属性在使用之前 一定要确定好主轴
5. height 略(doge)哈哈哈哈哈哈哈
6.overflow: hidden; (具体的请看 三. 对CSS的解析的更进一步解析)
1) 防止塌陷
2) 溢出部分隐藏
3) 清除浮动
7.margin
1) margin 0 auto; 代表的意思是水平居中
在CSS中的margin属性种设置对象外边距, 如果值只有两各第一个表示上下边距
第二个表示左右边距
0 auto 表示上下边界为0 左右根据宽度自适应相同值(即水平居中)
2) margin 塌陷
就是 父子嵌套的时候 元素垂直方向的 margin取最大值
解决方法:
float属性为left/right
overflow为hidden/scroll/auto
position为absolute/fixed
display为inline-block/table-cell/table-caption
*/
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: #fff;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
-webkit-transition: all 700ms ease-in;
}
/*
1. background-size: cover;
作用是: 将背景图像完全覆盖背景区域
但是 背景图片的某些部分也许无法显示在背景定位区域种
2. background-position: center;
background-position 属性设置背景图像的起始位置。
第一个属性值确定x轴的位置 第二个属性值确定y轴的位置
3. background-repeat ;
作用是 是否平铺 说白了就是使 background-image 不会出现重复
4. vh
vh是CSS3的新单位, 是view height的简写, 是指可视窗口的高度.
假如高度是 1200px的话 10vh 就是 120px
vw 同样也是CSS3的新单位, 是view weight的简写
假设高度是8888px 10vw 则为888
5. border-radius; 可以继续往下看 或者 移步===> http://t.csdn.cn/JZs49
border-radius 属性用来设置元素的外边框圆角
想要设置一个圆:
当我们 在使用中 如果是个正方形, 把数值修改为 宽和高的一半
如果是个矩形, 设置为高度的一半就可以了
6. cursor ; 说白了就是 鼠标在被设置 cursor:属性值; 的对象上光标的形状以什么样子显示
7. flex: 某数字; (关于弹性布局 详细的请看 三)
flex属性是用来定义 子项目 分配剩余空间 用flex表示占多少份
8. position 看三
如果仅仅是指项目中的语句 语义就是相对定位的意思
9. -webkit-transition;
1) 首先 CSS3属性前添加私有前缀 是因为CSS中因为要兼容不同浏览器的属性支持, 浏览器厂商会在属性
前加一个私有前缀来支持新属性; 所以 前缀为 "-webkit-"的属性, 能够以webkit为内核的浏览器中正常使用
2) transition 就是过度哦
总之就是这个是表达语义是 在webkit浏览器中可以适配的 过度
*/
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
/*
opacity 代表的是元素的不透明级别 (容器中的背景色和文字都会受到影响)
*/
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
transition: opacity 0.3s ease-in 0.4s;
}
/*
transition
可以看看这位大佬的 ===>https://juejin.cn/post/6844903615920898056
transition(过度) 含义: 用于设置元素的样式过度
什么叫过渡？字面意思上来讲，就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，
需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。
*/
@media (max-width: 480px) {
.container {
width: 100vw;
}
/*
@media 规则在媒体查询中用于为不同的媒体类型/设备 应用不同的样式
对于案例中的语句 语义是 调整浏览器窗口的大小. 如果此文档的宽度为 480px像素或者更小, 那么
那么就执行其中的CSS代码
*/
.panel:nth-of-type(4),
.panel:nth-of-type(5) {
display: none;
}
/*
定义和用法:
:nth-of-type(n) 选择器匹配属于父元素的特点类型的第N个子元素的每个元
n 可以是数字, 关键词或者公式
*/
}
三. 对CSS的解析的更进一步解析
1) @import @import CSS@规则，用于从其他样式表导入样式规则。
url
是一个表示要引入资源位置的` <string> 或者 <uri> `(en-US) 。 这个 URL 可以是绝对路径或者相对路径。要注意的是这个 URL 不需要指明一个文件； 可以只指明包名，然后合适的文件会被自动选择 (e.g. chrome://communicator/skin/). See here 了解更多。
@import 是css提供的语法规则, 只有导入样式表的作用
@import 引入的CSS将在页面加载完毕后被加载
@import 是CSS2.1才有的语法,即在IE5+以上才能识别
2) CSS属性书写顺序 以及里面包含的知识点
1.布局定位属性: display/ position/ float / clear / visibility/overflow2.自身属性: width/ height / margin / padding / border / background
3.文本属性: color / font / text-decoration / text-align / vertical-align / white-space / word-break
4.其他属性(CSS3): content/ cursor/ border-radius / box-shadow / text-shadow / background: linear-gradient
注:
Content content 属性与: :before 及 ::after 伪元素配合使用，来插入内容
background: linear-gradient 常见用法: background: linear-gradient(渐变角度, 颜色a, 颜色b)
渐变角度: 180deg (注:deg是 degree "角度" 的缩写) 代表从上往下渐变(即从a颜色逐渐 渐变为 b颜色)
90deg 为从左往右渐变, -90deg从右往左
0deg从下往上渐变
white-space: nowrap 不换行
white-space规定段落中的文本对换行的处理
word-break: beak-all(允许在单词内换行) / keep-all(只能在半角空格或连字符处换行)
注释: 【全角与半角的区别】
半角和全角是中文在电脑上的特有的。 一个汉字字符在电脑上要占两个英文字符的位置，当输入符号的时候全角的字符也是要占两个英文字符的位置，半角的只占一个字符也就是半个汉字的位置。半角的显示内码都是一个字节。 )
3) Overflow 和 text-overflow 的区别?
text-overflow 常用于使溢出部分以省略号显示 即 text-overflow: ellipsis;overflow 常用于 隐藏溢出部分 即 overflow: hidden;
关于 overflow: hidden; 的更多用法
拓展:
Overflow: hidden的作用:
摘自大佬的:
1) 给一个元素中设置overflow: hidden; , 那么该元素的内容若超出了给定的宽度和高度属性, 那么超出的部分将会被隐藏, 不占位
2) Overflow: hidden; 还可以用来清除浮动 如果再加上一个 zoom: 1; 更是兼容了低版本浏览器(当然小卓所见基本都可以 直接 overflow: hidden; 但是加上 zoom: 1; 更好不是嘛
即: overflow: hidden; /*清除浮动*/
zoom:1; )
3) 还可以解决外边距塌陷哦
就是说 父级元素内部有子元素, 如果给子元素添加 margin-top样式, 父级元素也跟着下来就使造成了 塌陷
处理方法: 就是 给父元素 添加 overflow: hidden;
>
4) 伪类和伪元素区别(做案例时的一些思考)
在 CSS1 和 CSS2 中，伪元素的使用与伪类相同，都是使一个冒号:与选择器相连。但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。伪元素在CSS3之前就已经存在，只是没有伪元素的说法，都是归纳为伪类，所有很多人分不清楚伪类和伪元素。比如常用的:before和:after，它们是伪类还是伪元素？其实在CSS3之前被称为伪类，直到CSS3才正式区分出来叫伪元素
那如何区分伪元素和伪类，记住两点：
1. 伪类表示被选择元素的某种状态，例如:hover
2. 伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如:before和:after
3.
声明以下两张图片引用自 掘金某大佬 可以由链接跳转
伪元素和伪类核心区别在于，是否创造了“新的元素”
链接：引用自大佬的文章
5 ) overflow: hidden;
1.溢出隐藏
2.清除浮动
3.解决外边距塌陷
1.溢出隐藏: 给一个元素中设置 overflow:hidden, 那么该元素的内容若超出了给定的宽度和高度属性, 超出的部分隐藏, 不占位置
2. zoom是IE专用属性, firefox等是不支持的, 让本来的作用是设置或者 检测对象的缩放比例, 设置zoom:1可以在IE6及其以上版本浏览器中 清除浮动、解决margin导致的重叠等问题。在给低版本的IE做兼容的时候会用到zoom:1。例如，清除浮动的时候
3.解决外边距塌陷
父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷，
解决: 因此，给父级元素添加overflow:hidden，就可以解决这个问题了。
6 ) flex布局
7 )
| 属性 | 作用 | 是否脱离文档流 |
|---|---|---|
| static | 默认 | 是 |
| absolute | 相对于非static父元素进行定位 | 是 |
| relative | 相对于元素其原来进行定位 | 是 |
| fixed | 相对于浏览器窗口进行定位 | 是 |
| sticky | 粘性定位可以被认为是相对定位和固定定位的混合 | 据情况而定 |
四. JS代码的解析
const panels = document.querySelectorAll('.panel')
// querySelectorAll()方法返回文档中 指定CSS选择器的所有元素
//当展开其中一个时，在点其他的并不会关闭第一个已展开的效果，
//若要达到每次点击都是一个聚焦效果（关闭其他已展开的）
panels.forEach(panel => {
panel.addEventListener('click', () => {
removeActiveClasses()
panel.classList.add('active')
})
})
//forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
//addEventListener() 方法用于向指定元素添加事件句柄。
//事件句柄是指事件发生时要进行的操作。
//add() 方法把元素添加到已存在的元素组合中。
// classList 属性返回元素的类名，作为 DOMTokenList 对象。
// 该属性用于在元素中添加，移除及切换 CSS 类。
// classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它
function removeActiveClasses() {
panels.forEach(panel => {
panel.classList.remove('active')
})
}
//removeClass() 方法从被选元素移除一个或多个类。
五. 在做本案例期间的思考 与 知识点之间的迁移
1.文档流相关知识(多为摘录大佬们的佳作 学有所小成后 一定会对文章进行重新修订并且加入个人的理解)
1 ) 什么是文档流?
(这篇让小卓收益最大)
文档流的定义:
页面在解析的时, 遵循从上向下, 从左向右的顺序
1.从上至下,从左至右的布局
2. 符合HTML标签本身含义的布局, 比如某些标签独占一行.
文档流, 也叫做普通流
2) CSS中都有那些定位机制呢?一共有几种呢?
CSS中有三种定位机制 且分别是:
1.正常的文档流
2. 浮动(float)
3. 定位(position)
3) 什么是脱离文档流?
脱离文档流是指, 这个标签脱离了文档流的管理, 不受文档流的布局约束, 并且更重要的是, 这个标签在原来文档流中所占的空间也将会被清除
脱离文档流的元素处于浮动状态 (可以理解为漂浮在文档流的上方) , 当一个元素脱离文档流后, 依然在文档流中的其他元素将忽略该元素并填充其原先的空间
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
