发表于： 2018-10-25 22:44:27
1 731
今天完成的事情： 详细的学习了层级相关知识，相对定位，绝对定位和固定定位都会提升一个层级，默认定位元素，后者层级会高于前者，也就是说层级相同时，下面的定位属性元素会盖住上面的，但是父级不会盖住子级。层级可以用z-index改变。
插入图片时，如果图片大于父级尺寸，则从图片左上角开始显示：
反之则会重复显示：
设置
可以只显示一张图片
用background-attachment:fixed可以让背景图片在下拉时位置不变，相当于固定定位。
还有display-repeat：repeat-y垂直重复图片或者repeat-x水平重复。
还有如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为：
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
还有hidden剪切多余不显示，和auto如有剪切会出现下拉条。
div，section，article直接的区别，
div是块级元素，本身没有语义，只是作为css布局和样式化来使用。
section也是块级元素，他相当于有语义的div，最好不要随便使用，他一般用于文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。当元素内容明确地出现在文档大纲中时最好用section，如果只是样式化的话应该用div。
而article是一个完整的独立的内容块代表。它有着更明确的语义，一般来说， 会有标题部分(通常包含在 header 内)，有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，它本身就是独立的、完整的，代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如：博客中的一篇文章，论坛中的一个帖子或者一段浏览者的评论等。因为article元素是一段独立的内容，所以article元素中，通常包含头部（header元素）、底部（footer元素）。然后学习了flex布局的相关属性 容器属性
- flex-direction属性决定主轴的方向（即项目的排列方向）。
- flex-wrap默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- justify-content属性定义了项目在主轴上的对齐方式。flex-start（默认值）：左对齐,flex-end：右对齐,center,居中，space-between两端对齐，space-around项目间隔相等。
- align-items属性定义项目在交叉轴上如何对齐。
- align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
- 项目属性
- order排列顺序，数字越小越靠前
- flex-grow放大比例，默认0
- flex-shrink缩小比例，默认1，空间不足时将缩小
- flex-basis在多余空间被分配之前，item的mainsize
- flex：flex-grow，flex-shrink，fiex-basis缩写默认0 1 auto
- align-self单个item对齐方式，可覆盖align-items，默认auto即继承父级，如果没有则是stretch。
- flex：1；写法表示让所有弹性盒子模型子元素都有相同的长度，并忽略它们的内容。
明天计划的事情： 继续学习flex布局，具体书写方式，表现方式，然后用在任务5中。
遇到的问题：flex元素属性太多，无法细致掌握，明天多看多运用，争取明天能够基本掌握。
收获：了解了flex布局，以及有关层级方面知识。
返回列表
评论