css自适应屏幕写法

这个视频给大家介绍一个很多同学还没怎么用过的 css 单位，比方我要做这么一个 demo， 这里呢，我写了一个的，里面呢有一段文字现在就这样了，如果说现在呢，我要调整它的大小，把这个容器的宽高都给它变大一点，宽和高都调大一点。 现在呢，容器是变大了，但是由于文字的大小他是固定的，所以容器变大，但是里面的字体大小呢，还是不变的，对吧？如果说我希望里面的字体可以自适应容器的大小， 容器变大呢？字体变大，容器变小，字体跟着变小，可不可以呢？我们先把大小调整回来，比方这里我把它设置成可以手动控制大小的哈，设置一下滤塞，再配合一下 over， 现在我们就可以手动控制这个 def 的大小了。但是有什么办法可以让里面的文字啊跟着这个容器同步变大和变小， 这里可以用一个相对单位， c q w， 这个单位是相对，谁来计算呢？我们简单提一下容器查询，首先呢我们要定一个 被查询的容器，关于容器查询呢，后面会详细给大家来说，这里先简单提一下啊， 其实呢和媒体查询差不多，只不过呢，媒体查询是查询不同设备不同的屏幕大小来做这个响应式的处理。 容器查询啊，是根据容器的不同大小来做这个响应式处理的，后面详细给大家来介绍。对需要被查询的容器呢，设置 contina 太这个属性哈，值的话，这里我们用 in lifeside， 也就是呢，在 in light 内连轴的方向，或者说呢是文本流的方向来进行查询哈，这里呢可以理解成是水平啊，宽度的这个维度来进行查询，现在我用了 cq w 这个单位啊，所以呢，他就会查询到这个容器他的宽度来进行计算， 比方这里呢，我给他十个 cqw， 也就是呢百分之十的容器宽度，算出来呢，也就是五十像素，百分之十呢，可能稍微有点大了，可以给他设置成百分之五，由于这个是相对单位，所以呢值是不固定的，由被查询的容器宽度决定。 再来调整一下容器的大小啊，对吧，现在呢字体的大小就可以随着容器他的宽度变大而变大，容器的宽度变小呢，字体他就变小。 除了 c q w 还有 c q h 哈，这个呢就是相对查询的容器它的高度来计算的，但是呢，这里是无效的哈，因为我们设置查询的维度呢，就是内连轴的这个维度，简单来理解就是呢宽度的这个维度啊， 所以这里参考高度呢是无效的，可以来看一下调整这个容器的大小啊，对吧，字体他的大小呢，并没有跟着发生变化， 通常来说呢，我们用的比较多，都是按照 unicy 这个维度来查询的，如果是希望两个维度都查询的话，我们可以直接用 side 现在 cqh 这个单位，他就可以查询到容器，根据这个容器他的高度来进行计算的，这里大概的了解一下就可以了。关于容器查询还有具体的应用呢，后面再 详细给大家来介绍。再来调整一下容器的大小，现在呢 c q h 这个单位就取消了，主要留意一下高度的变化哈，高度变大呢？字体变大，容器的高度变小，字体就变小。好，这个视频就到这里，感谢大家的收看。

创建本期文件 不爱了， 比如 css 发表 不爱了，你 这里代表的是跳伞链接， 这里写太快了，应该在这里的 b 标签里再写个 a 标签， 这个是移动端的显示菜单的按钮， 这个 c s s 变量用于切换背景图片地址，高地铺满整个市口， 依旧那么难 去掉 a 标签的默认样式， 设置一个下边框， 设置背景图片， 设置过度动画样式， 添加媒体查询视频移动关， 选中同时含有 nine， menu 和 active 的元素 active u j s。 控制， 选中当有 hamburger 类和 active 的元素的子元素 bar， 用来设置选中时的按钮样式。 j s， 选中所有含有 hamburger 的元素。 修改 c s s 变量为当前元素的 it， 修改一下代码， 这样就完成啦！ 好了，本期视频到这里就告一段落啦，拜拜啦！

you make me feel so crazy still in love with you you i can love all right coming around the sight darling alone lord i'm sorry to let you。

前端开发小技巧当复元素使用 flex 布局时，子元素的高度会自动拉伸至百分之一百。在复元素上使用 align items baseline， 或者在子元素上使用 align self baseline 或者 hat fake content 就可以啦。竖向布局时同理，可以让宽度自适应内容。

大家好，我是清新，今天给大家分享前端必会的三种 css 布局技术，第一种是这种左右两列式的布局，第二种是这种一行三列或四列的布局，第三种是这种一行多列或者多行多列的布局。那么接下来我们可以看一下京东商城的网页框架结果它是如何搭建的， 我们来看一下啊，一般网站的头部都是通蓝的啊，那么京东也是通蓝的，那么他整个网页的主体部分啊，他其实是放在这么大的一个盒子当中，然后这个盒子设置在水平发现居中，那么接下来的内容就是在这个盒子里面来进行布局，所以我们来看一下这个里面是怎么布局的。 那么首先我们来看第一个板块，他是一行四列的布局，第二个是属于一行多列的，第三个板块是属于左右两列式布局，那么第四个板块也是一行多列，那么第五个板块也是一行四列的布局， 那么后面的话都是这种多行多列的布局。我们来看一下啊，所以说整个这个网页的框架结构啊，用到的就是我们今天要给大家分享的这三种布局方式， 所以只要你掌握了这三种布局方式，那么搭建一个完整的网页框架肯定是一点问题都没有的。那么接下来我们就开始写代码。好，首先我们来回到我们的 vs 扣的开发工具，首先下来我们来新建一个网页文件，我们来给他取个名字啊，叫做前端必会的三种 css 布局技术。点， stm 回车。好，那么接下来我们按住 sift 键感单号回车调出我们这个网页的框架，那么同样的我们也需要把这个标题给他设置好，好，我们来给他设置下标题， ctrl 加是保存。 那么接下来我们来看一下我们要做什么啊？我们刚才说了，我们一个网站的他的主体部分是放在这么大的一个盒子当中， 然后在这个盒子里面进行布局，那么我们一般的网页的这个宽的吗？这个宽度是一千二百八十，那么我们这里为了给大家方便的话，我们把它缩小到一千啊这样一个区块里面，所以首先我们要构建这么一个大的盒子，用来做我们的容器。好，我们来构建一下， 点上，哎呀，好，容器的意思啊。好，然后我们来给他添加我们的样式，太太太杠，四二三四。 好，那么接下来我们来给他添加我们的样式宽度啊，我们来给他加上一个宽度，一千，然后我们来 给他加上一个高度啊，当然这个高度他正常是随着内容自动而往下撑的。这里为了给他看效果，我们给他加一下啊，到时候后面我们把它删除掉就可以了。然后我们来给他加上一个边框，我们来看一下效果。 coms 加是保存，然后我们的右击啊在浏览器当中来打开看一下。 好，那么这样一个长方形的区块构建好了，那么这个时候大家看他与上面和左边有这样一个间距，那么这个间距我们可以审查来看一下啊， 我们来选中我们的玻璃就可以看到，其实大家看这玻璃有默认的八相处的外边距，那么这个间距就是浏览器在最开始变异的时候， 我们这个波点默认自带的外边局造成的，所以我们不需要，不需要我们就把它给干掉，好抗拆架是保存，那么这个时候间距就没有了，那么接下来我们这边需要把这个盒子设置在水平方向居中的位置显， 我们可以看一下，妈，给给大家上一个上三十像素的外编剧，左右外编剧自动相等，那么下外编剧为零， ct 加是保存，我们来看一下大上外编剧，三十像素左右自动相等，水平居中啊，下外编剧不需要零， 好，我们接着往下看，那么首先我们要构建第一个部分，这样一个左右两列式的布局，那么这样一个结构，我们来看一下啊， 他其实是在外面啊，构建了这么大的一个盒子，然后在这个盒子里面再构建的左边这个红色的盒，右边这个黄色的盒子啊，所以是构建一个大的盒子，里面放两个小盒子。好，所以我们来看一下啊， 好，我们来给他取个名字叫 column c o r u m m， 这个什么意思啊？啊，这是我们的列的意思啊，好，我们这里是两列， 是的，所以我们给他取个名扣二，好，然后他里面要有两个，是不是一个左边和一个右边的盒子，所以点敲了门 啊。 c o r u m m 二杠一，好，我们来把它复制一份。二杠二， come， 加是保存好，接下来我们来给他添加样式啊，我们先给他最外面的那个盒子加加上一个边框，看看效果， 我们给他加个黑色的吧，看着加是保存啊，大家看一下啊，当然他里面还没有高度，所以啥也看不到，只能看着几个黑框框在那里。 好，那么接下来我们来给他里面杠点上，敲了门，二杠一，我们给他加上一个宽度七百，加上一个高 三百，再给他加上一个背景颜色红色， ctrl 加是保存好，再一个红色的区块就出来了，那么接下来我们来构建他的第二个部分，第二个里面的小盒子啊， 好啊，然后这里我们来看，总共宽度是一千，减掉七百，还剩三百，还要留下空隙，所以这里是二百八， 然后这个颜色我们把它改了，改成什么？改成黄色椰蓉，看，这家是保存，保存之后我们来看一下它整个就是外面这个大的盒子，是吧？这个黑色的边框包裹着两个盒子，红色的和黄色的， 那么接下来我们要让这个盒子怎么样？在水平局中啊，在水平，一个在左，一个在右显示，所以在左边的这个盒子我们给他加上一个左浮动，看此啊好，到了加完之后，这个黄色的不见了啊，这个黄色的盒子是因为什么被这个红色的盒子盖住， 有时候加了浮动之后，这个盒子就相当于飘起来了，他不占空间，所以下面这个盒子就把那个什么下面的盒子就缩到里面去，看不到了啊，所以同样的，我们这个盒子我们要让他往右边显示，我们可以给他加上一个什么右浮动。 read， 好看，这家是保存，保存照，大家看到没有？就在这里了，但是我们加完之后啊，这个效果是实现，但是他外面这个盒子，这个黑色的盒子是不是被塌陷了呀？ 啊，这就是因为加了浮动之后啊，这两个盒子相当于飘起来，没有占任何的空间，所以外面这个大的盒子就相当于没有高度了，他就被塌陷了，那么如果我们往后面再写内容的话，他就也会缩到里面去，那这样肯定是不行的，所以我们需要清除浮动，那么接下来看一下我们怎么清除浮动， 大家看啊，这里非常的重要，我们来看这是左浮动的盒子，这是右浮动的盒子，是因为这两个盒子的 浮动问题造成的塌陷，所以我们需要在他们的后面加上一个清除浮动的样式啊，我们来看一下怎么加，我们给他一个颗粒啊，构建这样一个颗粒，这样一个 diy 啊，这个怎么 diy？ 主要是用来清除我们的浮动的。好，所以我们来看一下点上颗粒 大括号颗粒是什么意思？清除浮动的意思。好，我们来看一下，比如说我们来清除一下左浮动， 这个什么意思？就是这个盒子啊，他在清除浮动的时候，这个清除左，大家看他只能清除他前面的盒子因为左右浮动造成的塌陷问题，他是不能清除他后面的盒子 造成的塌陷问题啊，等一下我们给大家演示。好，我们先给他加上一个清除左幅的，我们来看一下。好，清除的来看一下是不是也 ok 了呀？是不是 ok， 但是我 说了，好像我们只要清除左浮动就好了，他右边这个盒子右浮动造成的塌陷问题好像不需要清楚啊，我们来看一下啊，如果我把这个盒子的高度改成一百， 我们来看一下他会有什么问题，大家看到没有？是不是还有这个塌陷问题啊？那是因为我们给他盒子加的高度是一样的，所以正常情况之下的话，我们是应该左右浮动都要清楚的，如果我这里只清楚右浮动， 好像看上去也没有问题，是不是如果我把右边这个盒子也改矮一点呢？那么他也会出现那个问题，所以正常情况下我们是要清除什么啊？这个盒子前面的这把盒子因为左右浮动 给外面这个盒子造成的差塌陷问题，所以我们应该是 boss， 也就是说他前面只要有左浮动和右浮动都清楚掉， 所以是清除左右浮动，这样子大家看一下啊，就没有问题了。好， ok 了，这当然我们把这里先还原一下啊。好，我们刚才说了清除浮动这个颗粒为什么要写在最后面，是因为他只能清除他前面的盒子因为左右浮动而造成外面这个盒子塌陷的问题，他并不能清除他后面的盒子因为怎么样浮动而造成的塌陷问题。 所以我们比如说我们把这个盒子再复制一份，复制好了之后我们来看一下，你看到没有？这个是不是这个盒子的高度是不是还是这样的，并没有随着后面的内容来撑开 啊？所以我们一般清楚浮动的时候啊，我们一般是写在最后面啊，是必须写在最后面啊，不是一般， ok， 好，那么这样就没有问题了，那么 ok 了之后，我们接 接下来我们就要看我们的这种一行三列或者四列的这种布局了，我们来看一下啊，那么同样的这种一行三列的这种布局，他也是在外面构建了一个大盒子，然后在这个盒子里面构建了三个小盒子，然后再把它排在一排，这样显示，所以同样的我们来构建吧。 扣了吗？ c o r u m m， 好，这里是三是吧？好，然后点上 c o r u m m 三杠一，我们来复制三份吧，按住 alt 键和 c 不正向下的箭头就可以复制了。好，我们来啊， 这里来三炕在家是保存，保存之后，当然这里什么效果也看不到。我们同样的来先给他加点样式吧， 给他一个三啊，我们也给他加上一个边框来看一下，我们给他加上一个两项 蓝色的边框吧，看着加是保存，同样的看到的，这里有个啊，边框线。好，我们接着往下看三，下面的杠可入三杠一，第一个盒子， 好，同样的我们给他加上一点宽度吧。 iwy 四，我们来给他一个二百， 然后同样的我们给他加上一个高度三百，好，给他加上一个背景颜色，看着加是保存好出来了，我们来构建我们的第二个盒子 里面的第二个啊，好，同样的我们给他改成什么？我们改，改成四百，把这个颜色也给他改 改一下，我给他改个这个颜色吧。好，然后我们来看一下第三个， 好，我们来看一下啊，那么我们来看两百加四百就是六百，六百加四百就正好是一千，然后我们来看一下，总共这里是一千，然后这里要有间距二十像素，这里也有二十像素，是吧？所以我们要干嘛？我们总共只有九百六，九百六的话，那这里只有三百六了， 好，这样子啊，然后我们把这个改掉，把这颜色改了， 改个紫色的吧，看这驾驶保存，那么这三个盒子从上往下排列，当然我们要把它变成水平的，我们有两种方法，第一种就是给他们分别加左幅， 好，我们来看一下，比如说给他加上一个 flow 成，大夫吃给他也加上一个 flow 成，嗯， 来不成？然后给他也加上一个 float， 来不成？看成家是保存，大家看一下是不是 ok 了。那么接下来我们要产生空隙的话，我们可以给中间这个盒子加上左右二十像素的，外边去就可以了，马给上下为零，左右二十。 好啊，当然他挤不下去是因为外面这个盒子造成的啊，你看到没有？就外面我们给他加的掩饰是吧？比如说我把这个蓝色的这个边框干掉，因为外面这个盒占了空间吗？占了两箱数，他只要多一点点他都放不下，是吧？ 好，那么接下来我们来看一下，我们如果把这个把这不注视掉，我们来看第二种方式，他有什么好处啊？第二 种方式我们是第一个加左浮动往左，第二个也加左浮动往左，然后然后第三个盒子我们加什么不加左浮动，我们加右浮动，也就是说前面两个盒子往左，后面一个盒子往右，然后我们给中间这个盒子加上左边二十像素的外边去就可以了。 再看你们同样达到了这个效果，但是他并不会因为这里有两项数的这个边框而造成他掉下来，是因为他这里还有二十像素的这个空间可以容你怎么样？对啊，作为弹性是吧？伸缩自己去那个啊，好，这就是这种布局的方式，他有一个好处啊，就在这里。好， 那么 ok 的时候，同样的我们要清楚他们三个因为浮动造成的塌陷问题。好，当然我们要清楚浮动很简单，我们也可以把这个直接复制放到 这个位置就可以了啊。当然接下来我们来给大家讲第二种清除浮动的方式，我们就不这样加了啊。好，我们来看一下怎么加。先认真看代码，最后我再给大家讲原理，我们给大家定一个清除浮动的样式颗粒， 这个是冒号，阿富特大挂号。好，这是一个样式啊，然后这个冒号阿富特就是在他的后面。啊，什么意思？现在也不需要懂，等下再说吧。好，我们来 continent。 好，我们先里面加个一一一啊， 好，这些带吗？先，都不需要动啊。好，我们先写完了再说。可丽儿，这个，这个动是不是好不好使？好，那么这是一个典型的清除浮动的这样一个样式，它是利用我们的尾元素来写的，然后我们把这个样式放在哪里？哈？ 把这样式放在他上面，因为我们要清楚他里面的内容，是吧？因为浮动给他造成的这个塌陷问题。好，所以我们来看一下，我们保存之后我们来看一下效果就可以了。啊，好，当我给他加了这个样式之后，大家有没有看到这个地方有个一一就出来了。好，我们来这里审查元素，我们来看一下。 好，我们来看一看，看这里啊，好，到底有没有发现这个冒号阿富特看到没有？是不是在这个位置看到没有？我们点击他的手是不是在这里看到？好，现在一定要注意啊，这个冒号阿富特 就相当于是在这个 div 的最后面创建的一个委员数。什么叫委员数？我们正常的元素是不是他有标签名呀？对吧？啊？这个委员数呢？他具备了这些标签的所有特 行，但是他没有名字啊，就这个意思。好，然后我们来下这个 content， 这里面是什么？这个一一就是相当于这个元素标签里面的内容，比如说我们现在写了个 p 标签，我打了个 ss 或者打了个一一啊，他就相当于这个中间这个内容。好， 然后我们来看一下，我们一定要把它设置为会计元素，他才可以清除浮动啊，我们来看一下就是不是真的是会计元素，我们给他加个背景颜色，红色，你看到他是不是？ 他其实就相当于是在这个最后面加了一个委员数，然后这个委员数的话，第一他的内容我们不需要，我们只是用他来清除浮动而已，不要跟这个一样，只是我们这样加在结构里面看起来不好看， 是吧？第二个就我们一定要把它转回快局才可以啊，大家看看看一下，然后在他身上加上一个颗粒 boss， 清除左右浮动这样样式就可以了。好， 这个地方大家一定要理解啊，其实他跟这个是一样的原理，无非他就是用委元素来在这个后面加好，但是这里有怎么样？有一个非常重要的就是他一定要把它转换为一个会计元素啊，因为他默认的是属于行内元素。 好，如果我大家看一下，如果我把这个注视掉，你看他就达不到清楚的效果了，你看这个是不是？好，所以这里他一定要注意了啊。 好，那么接下来我们要给他添加上外编剧二十像素与上面产生空隙，然后最外面这个盒子加上一个 money 杠 top 二十像素， 那么这样就没有问题了。那么三列是一行三列的布局，我们也做完了，接下来我们来看这个一行多列或者多行多列的布局，那么 像这种一行多列或者多行多列的布局，我们来看一下京东啊，它主要是用来做我们这种产品列表的样式来进行，是吧？来进行使用的，所以一般情况之下，我们都是用我们的幼儿无需列表来进行构建 好，所以同样的，我们在这里面也要构建一个大盒子，然后在这个大盒子里面利用我们的幼儿五系列表来构建我们这样一个多行多列的效果。好，所以我们接着往下看， 那么接下来我们来构建一个多行多列的 c cloud， cloud， 是吧？ curumm， 好，我们杠 m 吧。好， 这个啊就代表多的意思，多行多列的意思。好，然后里面我们可以用我们的 u r 标签， u r 五系列表标签，我们来乘以十。啊，好，大家看一下啊，这是一个快捷的方式，我再我再说一下， ur 这个监控号 代表它里面的紫元是，紫元是谁？是 r i， r i 出现几十，十四就乘以十，然后回车就可以了。好，看，车加 s 保存，保存之后你看到的就是这样一个简单的效果，那么接下来我们同样的给他接怎么加上一些边框来看一下效果啊？好，靠，热门 杠昂，大括号啊，我们同样的加上一个边框吧，我们也给他加上一个两项数，加上一个蓝色的边框。 好，这里看到了这样一个大的边框了啊，外面的盒子，好，然后我们来给我们的点上，我们的后门下面的 ur 也加上一个啊，我们加个背景颜色吧。 加个什么背景颜色？加个这个颜色的吧，好，看到了吧？好，然后我们来给我们的点，上课了们 下面的幼儿下面啊，哎，我们也给他加上一个边框来看一下效果啊。好， 那么这样子大家看到没有？这就是我们最开始构建的这样一个最原始的这样一个框架结构，那么接下来我们一步一步来调，首先大家看一下他与这个上面和这个下面有空隙，还有这个地方与这个 li 之间也有空隙，是吧？ 所以我们来看一下这个空隙是怎么造成的啊？首先我们来审查元素来看一下，选中这个幼儿，然后我们往下拖，看一下他这个幼儿的和模型，我们来看一下他是不是有默认的十六像素的外边距和四十像素的内边距，所以我们不需要，不需要我们也要把它给干掉。 好，所以我们可以在这里直接逗号幼儿把他的外边就干掉，然后我们同样的把那边就也加进去啊，零啊，当然他这里是零的时候，这个单位 可以写也可以不写啊，这个无所谓的。然后我们幼儿的前面还有这个小点点，我们这个小点点也不需要，我们也要把它给干掉， 嗯，把小小心写错了啊，有儿大括号，我们给他怎么样？把那个点点干掉是不是？ 好，那么这样就把这个前面的点点干掉了，干掉完了之后再看他就缩成一坨了，是吧？那么接下来我们要构建这样一个效果的话，那这里的每一个小区块其实就是一个二哎，所以我们要给每一个二加怎么添加宽度？高度，好，然后我们来看一下怎么添加宽度啊？高度 来呗，我们来给他添加一个宽度一百九，添加一个高度两百。然后我们看车驾驶室看一下，大家看一下，从上往下进行排着，那接下来我们要 他在水平方向排着，很简单，我们只要给他加上一个不落成，带不走，左不动，大家看一下啊，分分钟就上来了啊，当然因为他现在问题，他这个蓝色的盒子又不见了，是吧？好，然后我们每个盒子之间他是有一定的空隙的，我们来看一下啊，我们来给他加上一个 m， 咱把上下左右为五像素看是加是保存就可以了啊。那么上下左右为五像素相当于他的宽度是多少？宽度就是两百了，总共是一千，对吧？一个是两百，总共就给放五个盒子是吧？正好就可以放下。他这里放不下的原因是因为我们给外面这些盒子加了一个两相处的边框啊， 好，所以放不下。还有一个就这个盒子本身他有边框，又多了两箱，所以也放不下，所以我们要做的，我们可以把它加上一个背景颜色，看他这样式，然后呢我们把这个边框线注释， 那这样就正好可以放下了啊，大家可以看一下。 ok 了之后我们同样的也要解决这个浮动造成的塌陷问题。好，我们来看一下，我们说的是因为二挨家的浮动所以造成塌陷问题，所以我们要解决他的浮动问题，我们就在这里加上那个清除浮动的样式。 好，大家看一下这样子是不是整个浮动就清除掉了？那么清除掉了之后，这个整个的区块与上面也有二十相似的间距，我们可以给谁加？我们可以给最外面的这个盒子加就可以了，所以我们可以给他加上一个马，给你干 top 二十像素， 大家看一下，这样子就没有问题了。好，那么接下来我们把我们不需要用的辅助线全部给干掉啊，我们前期将辅助线都是为了让大家能够更清楚的看到它本身的一个结构，或者说 做到当前我们需要展示的效果。好，我们从上往下开始一个一个，第一个我们说这个高度要不要，不要高度，我们最开始是为了给大家演示效果看的，所以干掉，不要，干掉完高度之后，哎，这样子就没问题了。第二个这个外面的这个边框线也不需要，也要干掉。好，这个效果没问题。 好，接下来我们来接着往下看这个外面这里也有一个边框，也不需要干掉，然后这里三裂，是吧？一行三裂的这个地方也有一个边框，我们也不需要，我们也把它给干掉。 那最后就是这里了。好，这里我们来看一下，这个 u r 加了一个背景颜色，我们也不需要 好，那么整体的这样一个，你看我们这样一个布局的这样一个效果就出来了，就是外面一个大的盒子包裹着在水平居中，然后左右两列式，一行三列式，说一行多列或者多行多列的这 一个效果。啊，好，那么今天这一节课我们就给大家讲到这里啊，这个知识点是非常重要的啊，那么整个网站的框架结果，不管 任何一个网站，他基本上都是有这三种啊，硬结构来构成的啊。好吧，那我讲的可以的同学啊，可以点击关注啊，关注一下我，或者给我点个赞。

哈喽，大家好，今天我们讲一下 tenoner cs 中的网格自适应了，我们来看一下这种场景，这里有很多图标啊，我们想要他左右对齐，呃，不超过一行的时候呢，就是左对齐， 呃，还需要他换行啊？首先这里我们会想到使用弹性布局哦，换行 okay， 呃，排列的很整齐，但是有一个问题啊，他这个右侧 他没有顶边呢，左对齐没问题，右边没对齐，那这个时候呢？我们，嗯可以使用 用这个 justify between， ok， 这样就是说左对齐，右对齐也换行了， 就只有一个问题，当他不足一行的时候就出现问题了，他第二行的时候呢，他不足一行，他图标很少， 他也就是两边对齐，这个时候就看起来很不整洁啊，我需要的时候呢，呃，当他就是说最后一行不足一行的时候呢，我们需要他走在一起， 这个时候呢，这种情况下我们用那个，嗯， flag 布局是很难实现的，这个时候我们就要用到这个网格布局啊， 我们把它换成网格布局， grade， grade cos， 呃，写个十二 okay， 呃，这个时候网格布局的话，他一行排十二个， 我们收的时候呢，嗯，他最后一行也是左对齐，这种情况下看起来没问题啊，但他这个这种模式就有个缺点，就是当我们在移动端的话，就手机上看的话，他的图标会变得很小啊， 他这个这种情况下一行还是排十二个，这种情况下我们最好的做法是使用，就是他有个嗯， repeat 啊， repeat 里面写一个 autofill， 再写一个 min max， 这个图标是五十二个像素的宽度， e f r 保存 ok， 这个时候呢，他一行排了很多，就是在他有限的宽度内尽量排很多，而且手机上看的话，就他一行排的数量会会小很多。当我们搜索的时候呢，他也没有问题啊。 对，这个就是他的网格就自适应了， 非常完美啊，这就是我想要的效果。好了，关注我，教你更多 tylin 四 s 的技巧。

非常厉害，原生的 css 已经开始支持嵌套的语法了，大家一定要学哈。这里我没有用 sas 之类的预处理器，就是写的原生 css， 在最新的空浏览器里面测试。 我们来看一下，这里写了一个 diff， 里面呢嵌套了一个 h 二，在外面还有一个 h 二，并且给这个 diff 设置了一个大小和边框。 现在我要做的是给 diff 里面的 h 二设置一个字体颜色，外面这个 h 二呢就不要管它，不要设置。通常来说我们会这样子做，找到 diff 里面的 h 二又或者是 class， 这样我们就可以把 if 里面的这个 h 二呢设置成蓝色，外面这一个呢还是黑色？这个是传统的写法，大家都会，现在呢我们给它改成 原生 c s s 嵌套的写法。如果大家有用过 sas 呢？那学这个就更加简单了，我们需要设置的是 deep 里面这个 h 二，那就把它的样式写在 deep 样式里面就可以了， 这里设置成红色没有问题。 if 里面的 h 二呢变成红色了，外面这一个还是黑色， 也就是这一个 class， 它只是对 deep 里面这个 class 呢取消，对外面这一个呢，它是不取消的， 非常简单，对吧？就是把欠套的写在副容器样式里面就可以了。这里呢还有一点需要注意的，这里写的是 clus 选择器，正常呢，我们会想着直接把标签选择器 h 二写在这里，可不可以呢？双 花型来看一下，哎，你会发现这个规则他就不起效了。大家要注意，如果是 cla 选择器或者 id 选择器呢，是可以直接写的，如果是标签选择器，我们需要在标签的前面加上一个 and 符号，在写欠套写法呢，大家一定要记住 and 符号， 它指代的就是它的复元素，这里呢就是 diff， 没问题，现在它的颜色呢又变成红色了。 and 符号在写嵌套的写法呢，它是非常重要的，我们再来举个例子来体验一下。现在要做的是，当鼠标经过 diff 的时候，才去改变它里面 h 二的字体颜色， 当鼠标经过复原数点，刚才说了，在里面呢可以用 ant 符号来代替复原数。背，鼠标经过也就是 however， however 的时候，来 控制 h 二，把字体改成红色，把鼠标呢移到 deep 里面，对吧， h 二的字体颜色呢发生改变了， 又或者我们可以结合前面学的 has 选择。器，当鼠标经过 h 二的时候呢，来控制它复元素 diff 的样式，也就是当复元素 diff， 当它存在一个 h 二被鼠标经过 how， 我们来设置它的样式，把它的背景颜色改成红色。 ok， 我们把鼠标呢移到 hellowa 里面对吧，他的复原数低分呢，背景颜色就发生变化了。这个视频我们就简单的说了一下原声 css 里面的一个嵌套写法，大家呢一定要学会哈。好，这个视频就到这里，感谢大家的收看。

网页三件套之一的 css 是干什么的？他是给网页的身体穿衣服的，会让你的网页变好看，能做出任何你想要的样子。 css 是层叠样式表的缩写， 听起来很厉害，但不用记，只需要知道他负责管 htm 标签的所有外观就行了。我们直接来看 css 怎么工作，还是回到网页右键检查，打开开发者工具看这里。 上期我们讲了上面的元素来，这期我们讲下面这个样式来，英文是 stells， 这里呢就会显示标签的衣服 css。 再点击一下元素，可以看到下面出现了这些东西。 其实啊，我们前面写的标签已经有样式了， htm 标签会自带一些来看，这就是 css 的格式。先是一个名称，代表这个样式是某个元素的，然后一个大括号， 里面包含一些规则。这些规则呢，暂时看不懂，各种各样的也很多，我们慢慢讲。先来是一个最简单的，点击一下我们名字的标签，再点一下样式的自定义空白处，就可以自己添加新的属性写卡了。 开了就是英语颜色的意思，按太不见，切换到内容，然后就会出现很多颜色选项，我们按下键随便选一个，看到左边没都可以换， 但这个不常用，默认的颜色都很丑。先随便选一个，然后点击这个颜色，快选择颜色调整位置和透明度。井号键加六个字符是这个颜色的 十六禁制写法，就是给系统用的，我们人类不用懂，大概知道有这个东西就行。后面我们再学其他的写法，包括 r、 g、 b， 红、绿、蓝之类的常见的 css 规则，再写几个，比如宽度或者是高度，再写个 fancy， 是字体的大小， 放的是字体啥意思？是大小？懂一点英语的同学应该一看就明白了，不懂的都简单记一记， 我们写代码的时候常用的单词不会很多，多念叨几句就能背下来了，稍微辛苦一点哈。啊，我相信既然你能点开我的视频，那么这一点点单词还是可以记住的，实在背不下的就搜索，这样搜 css 宽度就有了。 ok， 相信这几个例子下来，大家就不怕 css 了， 很多东西都是这样，不了解所以害怕，了解了也就那么回事。那么这么多属性规则我也不知道啊，怎么办？还是查询来这里。比如说我们想要改变这个标签的背景颜色怎么办？搜索 css 背景颜色， 然后就可以找到答案是这个属性。 background 卡了，其中 background 再用翻译工具翻译一下，是背景的意思，那么这两个单词加起来就是背景颜色， 按照视力测试一下，给这个标签加上背景颜色，效果出来了。然后来说一下 css 最重要的功能，排版。排版就是排列版面，主要用来管理界面的不同区域，比如说我们现在看的视频界面 就是分为视频区，点赞区、评论区等等，他其实都是排版出来的。那么浏览器是怎么排版的呢？我们记住一个词就行了，盒子模型自己打字记一下。 mdn， 这里详细解释了两种盒子模型，一种是会计，一种是内联。会就是一个方块一个方块，这样子他默认会占满上级标签的整个宽度。内联就是在一个快内独立的一小部分，回到页面，点一下最上层的标签 body， 发现没有， body 上有两个默认的 css 属性。先看上面这个 display block， 我们来翻译一下， display 是显示的意思，显示什么呢？ block 快就是一块盒子，这就是盒子模型。我们把鼠标一上去，就能 看到一个全宽的方块，这就是 body 现在占据的地盘。然后把鼠标移动到不同的标签上，就可以看到不同的标签所占据的位置。 你们要看任何网页，不同标签的效果都可以，这样直接鼠标放上去就知道了。一个盒子的布局由三个属性组成， merging， 意思是编剧， bode 就是边框 攀顶，翻译过来就是填充的意思，也可以理解为内边句。我们来看一个盒子的图片，他离我的距离就是外边句 margin， 他的边框就是 bode， 他的边框和内部存放的东西的距离就是内边句攀顶， 这个很形象吧，再回来看否得默认有八 p x 的编剧， p x 就是像素的意思， 屏幕就是一像素与像素组成的一个像素，对应着屏幕背面的一个小 led 灯。我们来改一下，给 body 的 majin 改为一百 px， 看到没？外边距是不是变大了，成一百 px， 而且它的 htm 标签上也自动添加上了， 就相当于在 style 属性中写 css 一样。然后我们想改边框怎么办？来搜一下 css 边框， 这里看到波的属性，他有这几个样式简写的方法，在这里可以一行完成，宽度、样式和颜色 这里复制，拿过来用，给他加上边框一 px， 搜里的 red 可以看到边框了，然后我们再试一下内边句 panding， 二是 px 搞定， 把鼠标放在相关属性上就可以看到效果，另外浏览器会自动计算这个盒子，下面就是同样可以看属性，也可以暂时关掉，试一下点这个小框框，效果就是这样，大家可以自行实验。 其实说白了，很多布局类 htm 标签就是一些自带默认样式的东西而已， 我们自己写一个表情，这里右键 htm 编辑写一个 r e 零一标签，放点内容，现在啥属性都没有，那我们就模仿一个 h 一表情。先来看一下 h 一的样式啊，好多不懂得自己查，我们直接复制，然后来 r 一零一标签这边粘贴 ok 出来了， 就是这样，和 he 没有任何区别吗？而内联盒子说白了就是默认不换行，试一下来用一个 b 标签加粗看不换行吧，但是我们给他加一个 display block 属性，他又换行了，就是这样都可以改， 这样演示大家懂了吗？一个网页排版的本质就是用 html 标签分割内容，弄成一块一块的，再用 css 控制距离、大小等属性，把他们组合起来就能实现任何画面。 另外再说一下 css 的三种使用方式，我们一开始写 css 怎么写呢？就是直接在标签上加死掉属性，写在里面就行，这叫内敛样式。 但是呢，这有个问题，就是一些常见的属性会重复些，比如说 fantasize 十二，让字体小一点，但是用的地方很多，那怎么办？就用一个新的 stm 标 钱死掉内部样式表，在这里你可以写整个页面的 css， 但是啊，你的衣服很多，要怎么样才能穿给准确该穿的人呢？ 万一给一个 boy 套上女装咋办？这时候就需要 css 选择器了，一般有三种，第一种是直接写标签名，就像这些标签自带的这样， p 打括号，然后改颜色，会发现 p 标签的字都改了。 第二种是 id 选择，用井号加名字打括号，这时候给 stm 标签加个 id 属性对应起来就可以了，但这个一般用于单个标签，多个标签最好不要用同一个 id。 第三种用的最多就是克拉斯选择器，多个 htm 标签的克拉斯可以相同符号是点加名字，再加大款 好 html 标签加上克拉斯属性，这就相当于在一堆人里面，男孩子的克拉斯是男，那么我们分配男性衣服的时候，用点男大括号这种选择方式就可以精准的分配给所有男孩子该有的衣服了。实际试一下， 在 style 中写一个 css， 命名为红星儿克，然后下面这两个元素上直接写 class， 等于红星儿克，你看效果一样的同例，其他元素都可以共用， 当你的网页比较大的时候，这个就比较常见。另外还有一种形式，就是把 css 写在单独的文件中，叫外部样式表，这里我们在桌面上创建一个 index dsss 文件，然后把刚才的样式复制进来 保存，然后再到网页这边用，另可标签把它引入进来。可以看到，其实引用和写死掉标签没什么区别，主要是因为大型网站的页面很多，他们共用一个 css， 所以就把他们单独出来而已。 那么假如我们的网站三种方式都有，并且都给同一个元素写了样式，那么谁先谁后？ 肯定是近水楼台先得月吗？内帘最优先，内部四肢，外部最后，比如这样直接鞋死掉。内帘的颜色优先，然后内部其次。但是有个属性也可以改变，就是 important， 英文是重要的意思，看效果。 这个尽量不要用啊，很强制的，一般只在一些不好改，整个欠套逻辑的时候用。在初学者阶段，大家尽量写在 标签上，用内联就行，更准确，好记，不用上去下来，不用打开两个文件，反正你的样式也不会很多，正好也是一个练习，多打打 css， 前期没坏处的。 那么 css 就讲完了，更多的要怎么学呢？就是去别的网站打开开发者工具看啊，碰到不会的就查一查。 很多时候呢，我们自己的网站有时候不知道怎么写布局，那么就想一下有没有别的网站实现过，如果有的话，直接过去看一下别人怎么写的就知道了。 或者就是这里搜一下简洁好看的网站，然后直接看他们啊，别人扭扭捏捏啊，我自己也经常找别人的，平常一些酷炫的效果不会写就去学习一下。大佬们的还有一个很重要的布局属性，迪斯普利 flex 弹性盒子模型。现 现在的网页开发中，布局基本上都是弗莱克斯模型了，和 html 一样，大部分的 css 属性其实工作中都用不到，很多开发者都是弗莱克斯一把苏，下一期再讲，这一期就把 css 的基本功能搞懂弄透就可以了。 今天的作业是自行搜索实验各种四 ss 属性，把你的网页变漂亮一点，作业提交到评论区即可。 ok， 明天见。