发表于： 2019-01-08 23:28:58
1 684
今天完成：
大体完成了任务七；
了解了一些css画三角形等图形的方法；
了解了Flex布局；
明天计划：
整理前几天的问题和收获；
了解任务八；
遇到的问题：
1、 使用:first-child 选择器失败
我原以为是father:first-child{……}，实际定义是
用于选取属于其父元素的首个子元素的指定选择器。
如果通过父元素指定，则可使用father:>first-child{……}的语法
2、 使用Bootstrap，却因为Bootstrap对container在不同屏幕下的宽度限制，无法布满浏览器。
具体宽度限制如下
在今天使用谷歌浏览器是大于720左右后会无法控制列的高度，遂放弃……
解决：使用Flex布局
收获：
·1、<html>
向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english。
页面如果是中文页面，可将其改为<html>zh即表示中文
这个主要是给搜索引擎看的，判断该站点是中文站还是英文站，页面越规范，就越容易被收录。
2、Div嵌套最好不超过三层
3、字体也可使用vw
4、并排等宽的设置可以试试将div放入设置了浮动的li，更为方便，免去浮动、等宽等等烦恼。
5、CSS3 background-clip 属性，对于画横条很有帮助，虽然可以切图，但用css可以方便的更改样式
语法：
background-clip: border-box|padding-box|content-box;
border-box | 背景被裁剪到边框盒。 |
padding-box | 背景被裁剪到内边距框。 |
content-box | 背景被裁剪到内容框。 |
6、同文档流中，子元素可能无法覆盖父元素
7、Flex意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局，行内元素也可以使用Flex布局。
Webkit内核的浏览器，必须加上-webkit前缀。
以下6个属性设置在容器上。
• flex-direction flex-direction属性决定主轴的方向（即项目的排列方向）。
• flex-wrap默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content属性定义了项目在主轴上的对齐方式。
• align-items属性定义项目在交叉轴上如何对齐。
• align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
以下6个属性设置在项目上。
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
8、bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义以及 bootstrap一个标签中，同时有 col-xs , col-sm , col-md , col-lg，由此可以发现一个标签可以设定多个类名，类名与类名之间用空格隔开
返回列表
评论