老铁们，大家好，相信还有很多朋友对于css display grid和display的属性值的相关问题不太懂，没关系，今天就由我来为大家分享分享css display grid以及display的属性值的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！
一、html和css学习总结
本周我大概用了六天的时间完成了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%
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%);
grid-template-rows: 100px 1fr 300px;
grid-template-columns: 100px 1fr 300px
grid-template-rows:minmax(100px,200px) 200px 300px
grid-template-columns:200px 200px 200px
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学习总结
二、CSS布局:float、position、flex、grid
1、CSS是前端基础技能之一，而CSS最重要的功能就是网站布局。
2、 CSS布局方式有很多，从远古时代的table（表格）布局-->float（浮动）布局-->position（定位）布局-->flex（弹性）布局-->grid（网格）布局（还未正式推出），下面咱们简单谈一谈各种布局的用法及其优缺点。
3、 table布局就是将网站当做一个表单来做，这里不做展开，因为现在基本不这么用了。
4、 float：浮动。float刚开始并不是为了用来网页布局，而是用来解决图文信息中图片与文本冲突的问题的。
5、这种常见的图文效果，没有float之前是很难达到的。有了float之后只需要加一个float：left，轻松搞定。
6、‘咦，如果float可以处理图文的问题，那用来布局不也可以吗？’，后来有人用float试着用于网页布局，还真的可以。
7、比table布局要方便不少，不过float随之而来的带来了“浮动高度塌陷”的问题：
8、如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0；
9、引申：网页元素一般分为普通流，浮动流，定位流。其中普通流和浮动流在一个层级上，定位流>浮动流>普通流。
10、之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法，非常麻烦。
11、 position：定位；顾名思义，就是确定位置。position同样可以用做网页布局。
12、不过position需要计算每一个元素的位置，而且这个位置是定死的，略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。
13、关键点：子绝父相。需要定位的元素用absolute绝对定位，其父元素用 relative相对定位。还有fixed固定定位，他是以html为父元素的定位。
14、 flex：弹性；弹性布局很好的解决了float和position的问题，非常好用。
15、在父元素使用 display:flex;确定弹性作用的范围。
16、 justify-content：center（space-around，space-between等）；水平方向布局；
17、 align-items:center(flex-start,flex-end等);垂直方向布局；
18、不过flex不兼容IE8及以下的浏览器。
19、大部分情况下flex布局已经能满足需要，不过flex只能用作一维布局，也就是说，flex一次只能作用于一条线。如果想要进行二维布局，必须翻转坐标二次弹性，这样会显得不够优雅，这时候grid（网格）布局就发展起来了。
20、 grid布局用法和flex相似，但是作用于二维布局。
21、先在父元素使用 display:grid;确定网格作用范围；
22、 grid-template-columns: 40px 50px auto 50px 40px;（行）
23、 grid-template-rows: 25% 100px auto;（列）
24、等等属性，这里只简单介绍，大家了解有这个东西就行。
25、在现实工作用，以flex为主，position辅助已经足够应对所有问题。
三、css grid拖拽浏览器自动换行
1、IE浏览器使用样式tablelayoutfixed，引用内容为abcdefghigklmnopqrstuvwxyz1234567890。即可实现浏览器自动换行。
2、CSSGrid网格布局又称为Grid网格，是一个二维的基于网格的布局系统，它的目标是完全改变我们基于网格的用户界面的布局方式。CSS一直用来布局我们的网页，但一直以来都存在这样或那样的问题。
3、一开始我们用表格table，然后是浮动float，再是定位postion和内嵌块inline-block，但是所有这些方法本质上都是只是hack而已，并且遗漏了很多重要的功能例如垂直居中。
4、Flexbox的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局实际上Flexbox和Grid能协同工作，而且配合得非常好。Grid网格布局是第一个专门为解决布局问题而创建的CSS模块，只要我们一直在制作网站，我们就一直要讨论这些问题。
四、css如何实现英文对话排版
1、方法有很多种，是我就采用以下几种方式之一：
2、这种左右分别对齐的排版，第一反应用table。我知道肯定有人开始鄙视我，说什么年代了还在用table。但是，我想说的是table也是标准标签之一，把标签用在合适的地方，就是对标签最优的利用，不是吗?
3、<spanclass="personName">Georage：</span>
4、<p>Thisisagoodday.</p>
5、<p>Thisisagoodday.</p>
6、<spanclass="personName">Ken：</span>
7、<p>Thisisagoodday.</p>
8、<p>Thisisagoodday.</p>
9、</table>
方式二：利用dl标签
10、overflow:hidden;/*可以清除浮动*/
11、}
<dlclass="dailog">
12、<p>Thisisagoodday.</p>
13、<p>Thisisagoodday.</p>
14、<p>Thisisagoodday.</p>
15、<p>Thisisagoodday.</p>
16、</dl>
方式三：可以利用 ul或者 ol标签，方法类似方式二。
17、方式三：可以利用 ul或者 ol标签，方法类似方式二。
18、方式四：可以全用div，具体也类似方式二，这里就不罗列了。
19、一些详细的样式就不写了，这里只写了主要的样式，仅供参考。
五、如何使用css grid布局实现限宽容器全屏效果
1、在以前面对这样的效果，最好的解决方案是能过HTML的结构来做一定的处理。比如：
2、<divclass="container"></div>
3、</div>
比如我们的布局效果是960px的水平居中效果：
4、比如我们的布局效果是960px的水平居中效果：
5、}
但这种方法虽然能解决我们布局中在某个区域中实现全屏效果。但有的时候，这种方法并不能解决问题。不过，值得庆幸的是，有另外的方案可以在限宽的容器中实现全屏效果。
6、但这种方法虽然能解决我们布局中在某个区域中实现全屏效果。但有的时候，这种方法并不能解决问题。不过，值得庆幸的是，有另外的方案可以在限宽的容器中实现全屏效果。
7、}
这是一个较新的方案，不过有一个缺点。虽然这个方法能在限定宽度容器中实现全屏的效果，但是在一些平台上会出现一个水平滚动条，这是让人无法接受的。除非你在body元素上设置overflow-x:hidden;。
8、这是一个较新的方案，不过有一个缺点。虽然这个方法能在限定宽度容器中实现全屏的效果，但是在一些平台上会出现一个水平滚动条，这是让人无法接受的。除非你在body元素上设置overflow-x:hidden;。
关于css display grid，display的属性值的介绍到此结束，希望对大家有所帮助。
