发表于： 2019-05-02 20:17:08
1 789
今天完成的事情：
1.浏览css大纲，查看那些不熟悉的语法。
background-attachment:fixed(可以设置背景图像固定在屏幕上，不随着滚动消失)
text-decoration:none(删除链接中的下划线)
border-collapse：collapse(设置表格的边框被折叠成一个单一边框)
vertical-align:bottom（设置垂直对齐，底部或顶部、中间）
注：vertical-align只有元素是inline或者inline-block才能起作用。
display:none或visibility:hidden都能够隐藏元素，区别是后者会影响布局。
overflow能够作用于block和inline-block
2.line-height和height都是起到高度的作用，如果一个标签没有定义height，表现出来的高度是由元素撑起来的。那么一个空的div，高度就是0。然而不是文字撑起的高度，而是line-height撑起的。line-height检测里面的元素，哪个最高就使用哪个的值。行高具有总是垂直居中的特性，利用这个特性能够实现单行和多行文字的垂直居中对齐。
（1.单行的文字居中对齐，把line-height设置为需要的盒子的高度。
（2.容器高度固定，多行文字的垂直居中对齐。用span把文字封装起来，设置为inline-block。
（3.使用margin:auto设置居中对齐，必须设置盒子宽度，如果不设置，默认浏览器宽度，导致margin不起作用。margin同样能够使得图片居中对齐，需要改display为block。
3.为什么inline-block不能使用margin：0 auto居中？
block是会独占一行的，不设置宽度，默认自动填满父元素宽度。即使设置了宽度也是独占据一行。而inline-block本身是行标签属性，具有了能够设置宽高的特点而已。所以任然是保持行标签靠左对齐的特性。在父元素设置text-align：center能够实现居中对齐。
4.元素居中的方法：
5.max-width:100%能够使得图片随容器宽度自动缩放。而使用width：100%在容器比图片宽的情况下，图片会被拉伸变形。
6.margin和padding使用百分比来写，都是指父元素width的百分之多少，无论水平还是竖直。而不是相对父元素的margin和padding。
明天计划的事情：
1.浏览css其他知识点
2.任务六的css部分
返回列表
评论