CSS：Cascading Style sheet层叠样式表或级联样式表，是一种样式设置规则，用于控制页面的外观的样式。使用CSS能够实现内容与样式的分离、方便团队开发，有助于样式复用、便于网站后期维护，实现页面的精准控制、让页面更精美。

CSS代码书写方式分为三种：嵌入式、外链式、行内式。

嵌入式：将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的

外链式：外链式是指单独写一个以.css为扩展名的文件，然后在标签中使用标签，将这个css文件链接到html文件中。(注意：css文件不能单独的运行，它必须要依赖于HTML文件)

语法规则：

<link rel="stylesheet" href="css文件的地址">

行内式：将CSS代码书写在HTML标签的style属性中。style是一个通用属性，每一个标签里面都拥有这个属性!

语法格式：

<标签名 style=”属性:值属性:值”>

初学CSS，你需要掌握这些使用技巧：

1、负边距的效果。注意左右负边距表现并不一致，左为负时是左移，右为负时是左拉。

2、BFC应用汇总：阻止外边距合并(margin collapsing)、消除浮动的影响。

3、flex布局：当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部。

4、并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外，其默认宽度取决于size特性的值。

5、对定位和固定定位时，同时设置left和right等同于隐式地设置宽度。

6、position:sticky，粘性定位要起作用需要设置最后滞留位置。chrome有bug，firefox完美。

7、要使模态框背景透明，用rgba是一种简单方式。

8、display:table实现多列等高布局。css实现定宽高比的原理：padding的百分比是相对于其包含块的宽度，而不是高度。

9、background-position百分比的正确理解方式：图片自身的百分比位置与容器同样的百分比位置重合。

10、background-repeat新属性值：round和space。前者表示凑个整，后者表示留点缝。

11、background-attachment指定背景如何附着在容器上，注意其属性值local和fixed的使用。

12、可以使用outline来描边，不占地方，它甚至可以在里面。

13、浏览器默认显示tab为8个空格，tab-size可以指定空格长度。

14、图片在指定尺寸后，可以设置object-fit为contain或cover保持比例。

15、设置宽度为fill-available，可以使inline-block像block那样填充整个空间。

0基础自学html和css可按以下方法：

1、现在直接学HTML5觉得不太现实，除非有公司打包票只要你学完就要你。

①因为现在HTML4.01仍然是主流，市场要过度到HTML5是需要些许年份的，而且主流浏览器对HTML5与CSS3的支持并不完全。

②你没经过HTML4.01及XHTML1.0的开发时的各种Hack和各种兼容问题，你对浏览器就难以有一个全面的认识，你的经验也缺乏信服力。

③最重要的是学了HTML4.01再去学HTML5和CSS3的新标签和属性，概念上会更容易理解。

2、HTML的标签和css的各种属性样式，至少你要知道他们的存在个大体功能，保证在需要时，能通过查文档后马上能运用。通常每本书都有小实例，学习时，理解就行。

3、学习的书一大堆，但对于0基础的初学者，应该先有模糊的概念，再深入理解。可以先把W3School里的或MSDN里的HTMl和CSS知识都过一遍，实在不懂的就跳过，保存热忱，然后再读更丰富的书加深理论。

4、并不建议报成考，因为成考的很多科目的知识是对你的工作没有实际作用的，只是理论上的东西。学历不重要，实力才是王牌。很多人刚开始就学那么拗口枯燥的理论，结果起初的热情没了，到头来更不值，学习的那份热情很重要。

本周我大概用了六天的时间完成了html和css的复习、制作考核网页以及完成了学长布置的五个学习小任务，总的来说，虽然完成了这一周的学习，但是对于一些知识点掌握的不是很牢固，使用不太熟练，之后还需要多加练习，对于本周的学习我有如下总结：

对于写网页需要的基础知识一定要牢牢掌握，比如，每个网页都需要的导航栏，一定要熟练掌握；下拉菜单最常用的是 ul 和 li 标签，也就是列表元素；对于一些标签，一定要知道是块级元素还是行内元素，要掌握他们之间的转换方法，这个也是非常常用的。对于css的盒子模型，一定要认真地学习，并且能熟练的运用。

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、 对齐和分配空白空间。

 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

 弹性容器内包含了一个或多个弹性子元素。

 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

 当为父盒子设为flex布局，子元素的float、clear和vertical—align属性将失效

    flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置好排列方式

  flex布局父项常见的属性：

                1.flex-diretion:设置主轴的方向

                 默认的主轴方向是x轴方向，水平方向；默认的侧轴方向是y轴方向，水平向下

                    属性值：row 默认值从左到右

                           row-reverse 从右到左

                           column 从上到下

                           column 从下到上

                2.jusity-content:设置主轴上的子元素排列方式

                    属性值： flex-start 默认值从头开始 如果主轴是x轴，则从左到右

                             flex-end  从尾部开始排列

                             center 在主轴居中对齐（如果主轴是x轴则水平居中）

                             space-around平分剩余空间

                             space-between 先两边贴边再平分剩余空间（重要）

                3.flex-wrap:设置子元素是否换行

        属性值： nowrap 默认子元素不换行 如果装不下，会缩小子元素的宽度，一块放到父元素中

                        wrap 换行

                4.align-content:设置侧轴的子元素排列方式（多行 需要换行） 单行无效

                    属性值： flex-start 默认值在侧轴的头部开始排列

                             flex-end  在侧轴的尾部开始排列

                             center 在侧轴中间显示

                             space-around 子轴在侧轴平分剩余空间

                             space-between 轴在侧轴先分布在两头，再平分剩余空间

                             stretch   设置子项元素高度平分父元素高度

                5.align-items:设置侧轴的子元素排列方式（单行）

                    属性值： flex-start 从上到下

                             flex-end  从下到上

                             center    挤在一起（垂直居中）

                             stretch   拉伸（默认值） 使用时子盒子不要给高度

                    例如：子元素居中  默认主轴是x轴

                       主轴居中 jusity-content:center

                       侧轴居中 align-items:center

                6.flex-flow:复合属性，相当于同时设置了flex-diretion和flex-wrap

            flex布局子项常见属性

                1.flex定义子项目分配剩余空间，用flex来表示占多少份数

                    flex:<number>默认值 0

                2.align-self控制子项自己在侧轴的排列方式

                3.order属性定义子项的排列顺序（前后顺序）

 给父元素添加 display:grid

      display关于网格的取值分为两个，grid(块网格)和 inline-grid (行内网格 行内块)

      grid 容器从上向下排列

      inline-grid 容器从左向右排列

   grid-template-row规定行属性

    grid-template-column规定列属性

    1.绝对大小（根据列数或者行数确定值得个数）

       grid-template-row：200px 200px 200px

       grid-template-column：200px 200px 200px

    2.百分比（根据列数或者行数确定值得个数）

       grid-template-row：33.33% 33.33% 33.33%

       grid-template-column：33.33% 33.33% 33.33%

    3.repeat函数

       grid-template-rows: repeat(3,33.3%)

       grid-template-columns: repeat(3,33.3%)

    4.repead auto-fill  自动填充

        grid-template-rows: repeat(auto-fill,33.3%)

        grid-template-columns: repeat(auto-fill,33.3%)

    5.fr 片段  

        grid-template-rows: 100px 1fr 300px

        grid-template-columns: 100px 1fr 300px

    6.minmax

       grid-template-rows:minmax(100px,200px) 200px 300px

       grid-template-columns:200px 200px 200px

    7.auto

        grid-template-rows: 100px auto 300px

        grid-template-columns: 100px auto 300px

    列间距

    1.grid-row-gap: 10px

      grid-column-gap: 10px

      复合写法

      grid-gap: 10px 10px

    指定区域

     1.grid-template-areas: 'a b c '

                                         'd e f'

                                        'g h i'

        区域合并时  需要让合并的区域名字相同

        grid-template-areas: 'a a c '

                                         'd e f'

                                         'g h i'

        .box div:nth-child(1){

            grid-area: a

        }

以上两种网页布局方式是我制作网页时比较常用的，也是学习前端必须掌握的。

除了以上这些，还有很多是我们需要掌握的，加油吧继续学习！！！！！！下周分享js学习总结

---