[郑州|结业弟子]JS-金俊|2018年05月15日的日报-技能树.IT修真院

发表于： 2018-05-15 22:36:18

3 594

今天的事情：完成任务5

明天的事情：进行任务6

遇到的问题：

问题一、flex 怎么布局头部两个项目，使得一个固定于左侧，一个相对于整个头部居中：

解决办法：设置第一个项目宽度 33% 第二个项目宽度33%
再使得第二个项目内元素居中，即可

问题二：头部第一个项目未准确达到1/3，修改width=33%为33.333333%

问题三：容器 height:100%  不起作用，解决办法谷歌到以下信息

当设计一个页面时，你在里面放置了一个div元素，你希望它占满整个窗口高度，最自然的做法，你会给这个div添加height: 100%;的css属性。然而，如果你要是设置宽度为width: 100%;，那这个元素的宽度会立刻扩展到窗口的整个横向宽度。高度也会这样吗？

错。

为了理解为什么不会，你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。

但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

观看演示
上面的演示例子是父元素没有设定固定高度，于是子元素的高度height: 100% 也不会起作用。你可以根据父元素的背景色来判断子元素的高度不是100%。

那么，如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。换句话说，你需要这样做：

<html>
  <body>
    <div style="height: 100%;">
      <p>
        想让这个div高度为 100% 。
      </p>
    </div>
  </body>
</html>
现在你给了这个div的高度为100%，它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用，你必须设定<body>和<html>的高度。

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        这样这个div的高度就会100%了
      </p>
    </div>
  </body>
</html>

问题四：默认按钮下右边框自带阴影，解决办法：重新设置border覆盖默认样式即可

问题五：背景图片变形：谷歌到解决办法：css3 图片拉伸

利用 background-size 属性规定背景图片的尺寸。

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

问题六：address 标签默认斜体，解决办法：重新设置样式覆盖

问题七：tr边框无效谷歌到以下解决办法 https://blog.csdn.net/chenssy/article/details/8453495

问题八：用table布局主体第二部分无法实现设计图竖直短边框，重做改用flex布局

问题九：自我介绍栏目未居中设置 align-items: center;

问题十：专业技能栏宽度超出页面解决方法：调试发现左右内边距误设置，去除解决

任务总结：

学习并掌握了 flex布局

阅读了css规范

掌握flex 布局使得头尾固定，中间滚动方法：

设置容器占满屏幕，header，footer，main三个项目按列排列 , main 项目flex-grow=1,头尾 flex-grow默认0 ，并且设置main overflow 属性为auto

.page {
    display: flex;
    height: 100%;
    flex-direction: column;
    /*justify-content: space-between;*/
    margin: 0;
    padding: 0;
}

footer {
    display: flex;
    justify-content:space-between;
    align-items: center;
    min-height: 2rem;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: auto;
    min-height: 10rem;
}

footer {
    display: flex;
    justify-content:space-between;
    align-items: center;
    min-height: 2rem;
}

任务头部返回图标高度=字体高度

底部：按钮的宽度等于底部一半减去左外边距再减去右外边距

width: calc(calc(100%) - calc(1.5rem));   /* 按钮大小等于容器减去左右外边距*/

学习掌握了边框圆角属性

掌握 ps 裁剪圆形图片 https://jingyan.baidu.com/article/e75aca8565e466142fdac641.html

掌握了多重背景图片 https://blog.csdn.net/q1056843325/article/details/53179419
照片层级为代码层级

学习了 html 表格 http://www.w3school.com.cn/html/html_tables.asp

深度思考：

1.css可以绘制哪些常见的特殊形状？

https://blog.csdn.net/aerchi/article/details/52909158

https://blog.csdn.net/cd_yaorao/article/details/78671586

2.如何理解vertical-align与line-height？

http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/