gmod容错包css教程

哈喽，大家好，我是旭旭，在面试题中我们经常见到这种题，请问 css 样式引入的方式有哪几种呢？那么今天跟大家分享三种。第一种的话呢，就是在我们的头部标签里面引入一个 style 标签，将我们的样式写在里面就可以了，比如我们来给他添加一个字体颜色， 这是我们的第一种引入方式，写在 l 标签里面的。那么第二种引入方式的话呢，我们可以用一个外部样式引入，就是我们的一个另一个标签做一个外部样式的一个硬柱。首先我们需要在外面去新建一个塞塞子文件，然后将它引入进来即可。 那么第三种方式的话呢，我们就可以给我们的标签内部添加一个内敛样式啊，用一个三号属性直接添加样式即可，你会了吗？

大家好，我是清新，今天给大家分享前端必会的三种 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 加了一个背景颜色，我们也不需要 好，那么整体的这样一个，你看我们这样一个布局的这样一个效果就出来了，就是外面一个大的盒子包裹着在水平居中，然后左右两列式，一行三列式，说一行多列或者多行多列的这 一个效果。啊，好，那么今天这一节课我们就给大家讲到这里啊，这个知识点是非常重要的啊，那么整个网站的框架结果，不管 任何一个网站，他基本上都是有这三种啊，硬结构来构成的啊。好吧，那我讲的可以的同学啊，可以点击关注啊，关注一下我，或者给我点个赞。

本教程旨在帮助大家在最短的时间内学会 css 样式设计，主要内容包括盒子模型、文档流的概念定位与布局，以及响应式 vip 设计。 这就是 css 中的盒子模型。在盒子模型中，每个盒子均由四个区域组成，分别是 martin 外边框区域、 border 边框区域、拍领内边框区域以及 content 内容区域。 默认情况下，当我们设置盒子的高度与宽度时，对应对应的是内容区域的宽度与高度。显然，这对于整个网页的排版而言是不合适的。因为盒子模型中的几个边框区域没有被计算， 所以我们需要修改合资模型的大小设置方式。通过 box sizing 属性就可以修改合资模型的大小设置，默认情况下该值是 content box。 content box 即按内容区域计算合资大小。 实际项目中，我们会将属性修改为 bodybox， 即按边框去计算合资大小。同时还会将所有的 html 元素默认的 margin 外边框设置为零。 这样，当我们设置盒子的宽度与高度时，也就是该盒子实际在页面中占据的空间大小。现在我们做一个简单的演示，提前准备好这样一个深色背景的空白页面，并且提 一共两个安全色设计。增加一个 box 一样式定义，将宽高设置成一百 px， 同时设置一个背景色。 在玻璃中增加两个 div 元素，应用该样式 添加一个焕航符，把这两个盒子粘在一起。 再在样式中增加一个波的定义， 并将波的分别应用到两个 div 元素上。此时我们发现两个 div 盒子在页面中的范围都变大了。 在样式中增加一个 both books 定义， 将 brotherbox 一样式应用到第二个盒子上。此时我们发现第二个盒子的大 大小发生了变化。现在我们分别检查一下两个盒子的实际尺寸。第一个盒子加上边框的大小是幺二零乘幺二零， 第二个盒子加上边框的大小是一百乘以一百。 理解了盒子模型，现在我们来看一下文档流。所谓文档流，其实就是指各种元素盒子是如何在文档中排列的。 从图饰中可以看出，整个文档中的元素及盒子模型按照两种不同方向排列，一种横向排列，一种纵向排列。根据其排列方向的不同，就可以将其划分为 行内块元素与普通块元素。在常规的 html 元素中，以下这些都属于行内块元素，剩下的则都属于普通块元素。 每个 html 元素都有其默认的快类型设置，但是我们可以通过 display 属性重新对其进行设置。现在我们来实际操作一下， 将页面中的图片元素拷贝一份，保存后查看效果。图片横向排列说明一面主元素属于行内块元素， 现在我们增加一个 block 样式，将默认的行内块类型设置成普通块类型。将样式应用到图片元素上 保存后，我们发现图片变成了纵向排列。 在开始定位概念之前，我们首先对比一下定位与布局之间的区别。虽然都与元素的位置相关，但定位关注的是元素本身，而布局关注的是元素所在容器的区域设置。 元素本身的定位方式可以划分为坐标定位与浮动定位两种， 我们先从坐标定位开始实现坐标定位很简单，只需要提供坐标位置与对应坐标系即可。如图所示，坐标定位主要提供四种坐标系， 分别是静态坐标、相对坐标、绝对坐标与固定坐标。 静态坐标对应的是文档流坐标，设置了静态定位的元素位置将会严格按照文档流进行排列，即使设置了元素的偏移位置也是无效的。默认情况下，所有元素均为静态定位。 一个简单的页面，中间是一个容器，容器内有三个方块按照默认文档流纵向排列， 同时还准备了几个坐标定位的样式，分别是 static 静态定位、 related 相对定位、 absolute 绝对定位和 fixed 固定定位。最后还准备了一个 offset 样式的坐标偏影设置。 首先我们来演示 static 静态定位，将 static 个样式应用到二号方块保存，我们发现二号方块没有发生任何变化， 再将 offset 天一亮应用到二号方块，同样没有发生任何变化。 相对坐标指的是元素相对于其所在文档流的位置，坐标设置偏移位置后，元素位置将会发生相应的相应的偏移，但是即使元素位置发生偏移，其原有在文档流中的位置仍然保留。 如图所示，二号方块发生了相对位置的偏移，但它不会影响容器内其他元素所在文档流的位置，即二号方块在文档流中 原始位置被保留。现在演示 relative 相对定位，将 relative 样式应用到二号方块保存界面没有发生任何变化。再将 offset 样式应用到二号方块， 此时发现二号方块发生偏移，其他方块没有发生变化。因为设置了相对韵味的元素并未脱离文档流，其所在文档流中的位置被保留，所以其他元素不会产生联动。 现在我们看一下绝对定位。左图中二号方块和三号方块按照常规的文档流排列，现在我们将二号方块设置成为绝对定位，此时 我们发现二号方块就会相对于负极容器一的位置发生偏移，同时我们还发现三号方块的位置也发生了偏移， 这是因为设置成为绝对定位的二号方块脱离了所属文档流的位置，所以三号方块会占据二号方块所在的文档流位置。 现在我们来演示绝对定位。将 aps 的样式应用到二号方块保存，二号方块没有发生任何变化，但三号方块不见了。 再将 off 赛的样式应用到二号方块，此时发现二号方块发生了偏移，二号方块跳出了容器，出现在窗口左上角，同时发现三号方块占据了二号方块的原有位置。 因为设置了绝对定位的元素将会脱离文档流，原有文档流中的位置将不会被保留，所以三号方块占据了二号方块原有文档流中的位置。现在我们将 relative 相对样式应用到容器上， 此时我们发现二号方块出现在容器的左上角，这是因为设置了绝对定位的元素会依次向上查找其第一个非静态定位的负极元素作为其定位坐标。 固定定位也可称为窗口定位，即按窗口坐标定位。固定定位的元素同样会脱离纹道，没有， 即他不会占用文档流中的位置。现在我们来演示固定定位，将 face 的样式 应用到二号方块保存，二号方块没有发生任何变化，但三号方块不见了。 这是因为设置固定定位的元素同样会脱离文档流，所以原有位置被三号位置占据。但因为二号方块没有设置偏移量，默认情况下二号方块仍停留在其文档流所在位置，并遮住了三号方块。 现在将 offset 样式应用到二号方块，此时二号方块发生了变化，便宜到了窗口左上角。 在此将容器设置成与雷铁相对定位。我们发现二号方块不会发生任何变化。说明固定定位请针对窗口进行定位。 不同于坐标定位，浮动定位主要采用容器与元素联动的方式进行定位。浮动定位主要应用的场景是图文混排，我们不妨对比一下前后效果图。 这是一张没有设置浮动定位的图文，图片与文字严格按照文档流的方式排列，其中图片所在行文字是单行排列的， 再看一下浮动后的效果，此时图片被文字包围，空间利用更加合理。所以在网页设计中遇到类似图文混排时，推荐使用浮动定位。 在浮动容器中，我们可以通过设置颗粒有属性控制其内部浮动元素 的浮动位置。在网页设计中，目前最流行的布局方式是 flex 布局，即弹性布局，与 great 布局，即网格布局， 类似于浮动定位。 flex 布局同样采用的是容器与元素联动的方式布局。 首先学习一下 flex 容器设置，在 flex 容器中，我们可以控制元素的排列方向、 溢出处理方式以及对齐方式。三者分别对应的容器属性是 flex direction、 flex rep 与 ally items 和 justify content。 flex direction 属性可以设置为横向或是纵向。如图展示了四种具体的 flex 元素的排列方式。 flex rep 属性主要控制容器内元素的溢出处理方式，当设置为 no rep 时，元素就可能发生溢出。 flex 容器的对齐方式按照方向可以划分为横向对齐与纵向对齐，横向对齐对应的属性是 justify content 属性，纵向对齐对应的属性是 ally items 属性。具体横向对齐与纵向对齐的设计效果请看图时 flex 容器内元素的设置分别提供了扩展、收缩于基础长度的设置，分别对应的属性是 flex grow、 flex drink 与 flex basis。 flex grow 属性可以设置为零或者一，当 flex grow 属性设置为一时，元素将自动伸展填满剩余空间。 flex shrink 属性同样可以设置为零或者一。当 flex shrink 设置为一时，表示容器空间不足时，元素将进行等比例缩小。默认情况， 所有 flex 容器内元素的 flex shrink 值均是一。 flex basis 属性值则是用来设置元素的基础长度，可以是像素值或是百分比。 除了单独设置元素属性外， css 还提供了几种默认的快捷设置，分别是 auto、 non、 initial 与 inherit。 一个简单的页面，中间是一个容器，容器内有三个方块，现在开始进行 flax 布局演示。 首先在样式中增加一个 flex 样式，用于设置容器的 flex 属性， 同时 分别增加设置容器属性的几个样式，并设置相应的默认值。 flex direction 属性用于控制容器内元素的排列方向。 flexd rack 属性用于控制容器内元素的溢出。设置 ally icons 属性用于控制容器内元素的纵向对齐方式。 justify content 属性用于控制容器内元素的横向对其方。 现在我们将这些属性分别应用到容器上。首先我们给容器增加 flex 属性，保存后，我们发现方块一二三发生了变动，从纵向排列变成了横向排列，这说明默认情况下 flex 排列方向是横向排列的。 现在我们应用 flex direction 样式， 并修改该属性质检查效果变化。 现在将 flex rack 属性应用到容器上。 为了方便 frank's rack 熟悉演示，我们将 box 宽度设置为一百二十 px。 现在容器中最多可以排列四个方块， 将方块速增加到六个。看看变化。我们发现方块并未异除容器，而是被等比压缩了。 这是因为默认情况下，在 flax 容器内的元素的 flextrink 属性会被设置为一，即空间不足时被压。 现在增加一个 flax item shrink 属性，将其设置为零， 将该属性应用到所有方块上。 现在我们发现方块从容器中溢出了。 修改 flex rap 属性值为 rap 后，一出的方块就会折行显示， 将方块速重新恢复到三个。 我们来演示容器的对齐属性。 首先我们将 flex a light items 纵向属性应用到容器上，修改该属性值，查看效果变化。 再将横向对齐属性应用到容器上，修改其属性值，查看效果变化。 最后我们演示一下 flex girl 属性，在 增加一个 flax item girl 样式，将其值设置为一。 该样式应用到二号方块上，检查一下效果，二号方块发生了生长，填充了所有剩余空间。 grade 布局，即网格布局，是将容器设置成为一个二维的坐标系统通过将具体单元格设置成为区域的方式进行布局，即在 grade 布局中控制定位的方式是容器与区域。 定义。 grade 容器其实就是将一个普通的容器进行二维划分，定义其行与列。 同时我们还可以定义由行列划分出的单元格之间的间距，如图所示，这是一个四乘四的个位的容器，并且每个单元格之间存在一定间距。现在我们对其进行定义， 我们可以单独的进行行列属性定义，也可以整体的进行模板定义，整体定义会让代码看起来更加的简洁。 定义 great 区域的方式有三种，分别是坐标区域、命名区域与浮动区域。 所谓坐标区域，即通过区域的开始行、结束行、开始列、结束列的方式进行定义。如图所示，我们将四乘四 四个各位的容器区域划分为一二三块区域，通过坐标区域的定义方式进行定义，代码如下，现在我们演示一下坐标区域的定义， 现在我们对页面中空白容器进行 grade 布局。首先增加一个 grade 的样式，将其定义为一个四乘四的网格，同时将间距定义为十个 px。 我们将 grady 样式应用到容器上， 并增加三个区域，将其 id 设置为 area， 一、二、三 这三个区域在容器中没有显示。对这三个区域进行背景色设置， 完成设置后，我们发现三块区域分别占据容器中的一个单元格， 现在对这三个区域进行坐标。第一， 现在区域的范围就是我们的预期结果。从页面效果可以看出，网格容器中定义的间距针对的是区域 命名。区域则是在 gree 的容器定义阶段进行区域的名称设置。对之前的一、二、三区域进行命名，分别是 navy、 side by 与 content。 完成命名后，在 great 的容器内的具体区域设置上，只需要相应的设置 great、 area 属性即可。现在删除区域的坐标定义， 在 great 的样式中增加区域的名称设置， 将区域名称应用到具体的区域样式中。 现在我们得到和之前坐标区域同样的布局效果。在 容器布局中，如果不对容器内元素进行明确的区域设置，那么这些元素将会默认占据一个单元格，并且按照默认方向横向排列。如果想要修改排列的方向，则可以通过 great autoflow 属性进行设置。 浮动区域就是利用该属性进行定位的浮动区域，仅仅使用开始行、结束行或是开始列结束列的方式定义其宽度与高度。将具体元素的位置交给容器本身的浮动属性进行定位，具体浮动效果如图所示。 增加电视设置后，浮动区域将会更加合理的利用空间。现在我们增加一个浮动样式，插开 不同设置下的浮动效果。 面对不同设备、不同屏幕，外部页面均可以进行相应的响应和调整，即响应式外部设计 实现。响应式外部设计主要通过四种途径，分别是视窗响应、样式响应、像素响应 与图片相应。网页在面对不同视窗时必须进行相应的调整。在 html 页面中通过增加图式代码，以保证网页在不同视窗中均可以按起原始大小占据屏幕，不会发生像素缩放。 除了对视窗进行缩放墙以外，通常不同大小的屏幕还可以提供不同的样式。主要实现的方式是通过 meter 查询设置屏幕切换点，进行样式切换。 像素响应，即通过一个基准像素值对各类元素大小进行统一大小控制，即 css 三点零中引入的 im 单位。 通过使用 im 单位实现样式表中的大小相对变化。图片响应主要通过设置不同试穿宽度下显示不同图片圆的方式实现。图实中给出了一个简单的视力， 首先我们创建一个默认的 html 页面，在默认模板页中针对视窗的响应已经有了， 现在我们演示样式响应。先给波点设置一个颜色， 增加一个 medium 查询。将 medium 查询调节下的玻璃背景色设置成蓝色。 将 v 六查询的屏幕断点的最大宽度设置成七六八个像素，这样所有宽度小于七六八像素的背景都会显示为蓝色。 切换不同屏幕，测试一下效果。 在页面中增加一行文字， 将页面根源数的字体大小设置为十六个像素， 同时修改不同样式下的字体相对大小， 检查效果，对应的字体大小分别是三十二 px 和四十八 px。 谢谢大家观看，非常欢迎订阅本频道，我会持续推出相关技术视频教程。

本节课我们学习 c、 s、 s 委员数选择器。我们来看个案例。杂志内容中的第一个字符 r 样式是特殊定义过的。如果将杂志内容在浏览器中加载，我们该如何实现这个效果呢？ 这就需要用到 css 中的伪元素选择器来实现了。伪元素选择器顾名思义，伪可以理解成假的元素，就是我们的标签。 所以伪元素选择器可以解释成假元素选择器。通过伪元素选择器可以设置元素指定部分的样式，主要用来设置元素内文本的首字母首行的样式，或者是在元素内容之 前或之后插入其他内容。本元素选择器的基本语法为 selector 双冒号 xido 杠 element 划括号。其中 selector 为目标元素 双冒号西斗杠 element 代表的是向目标元素内添加伪元素，并对伪元素的内容进行修饰。在 c、 s、 s 选择器中，伪元素选择器共有五种第一种双冒号 first letter 伪元素， 用来实现像文本的首个字符添加特殊样式。第二种双冒号 first 烂微元素，用来实现像文本的首行，添加特殊样式。第三种双冒号笔否微元素， 用来实现在元素内容之前插入内容。第四种双冒号 after 为元素，用来实现在元素内容之后插入内容。第五种双冒号 selection 为元素，用来更改选中文本的样式。 在零零四目录下新建一个 first letter select， 点 html 构建基本代码。 在包地里面添加一个 div 元素，并且添加文本。我是一个 div 元素，用来实现像元素内的第一个字符添加样式。声明 继续添加样式。在害的元素里面添加 style 元素。使用元素选择器添加样式声明 with 二百 p i x hat 二百 p x background color red。 右侧浏览器中可以查看到 div 元素的样式声明已经添加完成。 返回到代码中。使用伪元素选择器 div 双冒号 first letter 向 div 中的第一个字符添加样式声明 color blue forty size 三十个 px。 在这里 forty size 代表的是字号大小。后面我会详细的为大家介绍字体的相关样式声明 保存，继续查看效果。 div 元素中的第一个字符已经添加上了字体大小和颜色的样式声明。继续新建一个 first line selector， 点 html 文件构建基本代码。在 body 里添加一个 div 元素，并且添加文本。我是一个 div 元素，用来向元素内的第一行文本添加样式声明。 继续添加样式。在 head 元素里面添加 style 元素。使用元素选择器添加样式声明 with 二百 px height 二百 px 百可 ground color red。 同样，浏览器中可以查看到 div 元素的样式声明已经添加完成。返回代码中。使用伪元素选择器 div 双冒号 factline 向 div 中的第一行文本添加样式声明。 color blue 度 fortensize 三十 pf 四继续查看效果。 div 元素中的第一行文本已经添加上了字体大小和颜色的样式声明。 在这里需要注意的是，无论你元素的宽度是变大还是变小，都只能实现对第一行中的文本样式进行修饰。继续在零零四目录下新建一个 before after selector， 点 h t m l 页面文件 构建基本代码。使用同样的方法在 body 里面添加一个 div 元素，并且添加文本我是一个 div 元素，用来实现元素内部向前向后插入内容。使用相同的 方法为 div 元素添加样式声明 waist 二百 p x height 二百 p x background color red。 在浏览器中能看到样式声明已经添加完成。 返回代码中，使用委员速选择器 div 双冒号 before。 接下来需要将添加的内容我是向前添加，作为 content 属性的值来使用。 继续编写 div 双冒号 after， 将需要添加的内容我是向后添加，作为 content 属性的值来使用。 在浏览器中可以看到原文本内容的前后均出现了伪元素选择器插入进来的文本。 返回代码中，在向前向后添加的 c、 s、 s 代码处添加央视声明 forten size 三十 p x 效果也同样实现了。 在这里需要注意的是，在使用伪元素选择器向前向后插入内容时，必须配合 content 才能实现效果。向前向后插入进来的内容都需要符合 css 样式声明的基本语法。 继续在零零四目录下新建一个 selection selector html 文件补权基础代码。 在报队内部添加一个 div 元素，并添加准备好的文本。回到浏览器中，使用鼠标选中文本。默认情况下，再 在浏览器中选中文本的样式为蓝底白字。如何修改鼠标选中文本时的样式呢？回到代码中，在害的元素里面添加 style 元素。使用伪元素选择器 div 双冒号 selection， 并且添加样式声明 color red background color sky blue。 回到浏览器，选中文本的样式已经发生了改变。在这里需要提醒大家的是， selection 委元素选择器只支持以下几个样式声明 color 文本颜色 background 背景 color 鼠标样式 outline 描边效果。最后我们给大家总结一下尾 元素选择器，大家快来试试吧。