发表于： 2018-10-26 15:32:55
1 636
2018/10/26
今日完成：完成任务6、任务四、任务三的总结并更新到个人档案，学会垂直居中的各种方法，学会去除inline-block间距的几种常用方法，了解css哪些属性可以被继承及不能被继承。
CSS 布局 - 水平 & 垂直对齐常用到方法
1、水平居中：
1.要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配。（注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。）
.center { margin: auto; width: 50%;border: 3px solid #5fc0cd;}
2.文本在元素内水平居中对齐，使用text-align: center; 如果要使单行文字垂直居中，可以使用line-height设置文本高度与所在元素高度一致。
3.图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中,同方法1一样。
4.左右对齐可以使用定位方式 position: absolute; 属性来对齐元素，但是绝对定位元素会被从正常流中删除，并且能够交叠元素；因此经常配合relative使用，绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”,如A定义了relative后，B定义absolute就会相对于A进行移动，为什么一般父元素要用relative而不是其他，是因为relative的特性：移动相对定位元素，但它原本所占的空间不会改变，这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套；在这个例子里我们只是要让A作为B的一个参照偏移位置，并不需要A元素以及它周围的元素有所改变。
5.通过设置浮动float达到左右对齐（注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。)
2、垂直居中：
1.元素的头部顶部都使用padding使它垂直方向居中。
2.使用 line-height垂直居中。
3.使用flex布局，align-items属性垂直居中。
4.使用position 和 transform 属性来设置水平和垂直居中。translate(x,y) 括号的百分比数据，会以本身的长宽做参考，比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动
{ position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
任务六深度思考：
1、去除inline-block间距有哪几种方法？
display:inline-block 为行内块元素，改元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
默认情况下，inline元素之间就有空隙出现，所以结合了inline和block属性的inline-block属性自然也有这个特点。那这些空隙是什么呢，它们是空白符！
在浏览器中，空白符是不会被浏览器忽略的，多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格，换行都会产生空白符。
如：
去除间距的几种方法：
https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
1、如果将上面例子中的 li 标签写成一行，或者 li 之间的空格和转行删除 ，空白符就会消失，但是这样会影响代码阅读性。
2、使用margin负值，margin负值的大小与上下文的字体和文字大小相关，由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。
3、使用font-size:0, 上面的例子可以写成，
4、利用HTML注释标签。如
5、还有百度上说到的是取消标签合并，但是之前看的入门html都是要求标签合并的，这个有点矛盾。？？
2、css有哪些属性可以继承？
https://www.cnblogs.com/thislbq/p/5882105.html
常用的属性（有些属性暂时还未接触到）：
1、字体系列属性：font、font-family、font-weight、font-size、font-style、font-variant、font-size-adjust
2、文本系列属性：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color、
3、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
4、列表布局属性：list-style-type、list-style-image、list-style-position、list-style
5、元素可见性：visibility
6、生成内容属性：quotes
7、光标属性：cursor
8、页面样式属性：page、page-break-inside、windows、orphans
9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
遇到的问题：暂无。
明日的计划：巩固所学知识点，并开始任务7。
任务六总结：
任务名称：CSS=TASK6
成果链接：https://strivezc.github.io/hello-world/task6/task6.html
任务耗时：2018.10.23-2018.10.25（3天） 无延期
技能脑图：
官网脑图：
个人脑图：
- 脑图对比分析：个人脑图基本与官网脑图一直，个人脑图细分了每个步骤需要用到的属性。
任务总结：这个任务主要使用了flex定位、position：absolute、制作雪碧图以及如何使用雪碧图作为背景图像插入图标，初步学习了下拉框的制作，初步学习并使用bootstrap样式以及文本内容溢出时该怎样处理，最后也从实际操作中学会怎样去思考，怎样去搜索你想要的答案。对于新手而言，学习一个新知识点，应该多练习自己写代码，光听光看是不起作用的，看教程看视频的时候可能觉得自己应该会了，实际操作就会遇到各种问题，只有自己多练习，才是不断进步的最佳途径；另外不能忘记修真院的学习模式，光是自己埋头苦干是不行的，也许你一整个上午一个整天都未必能思考出所以然，还会产生泄气不自信的状态，只有调整心态遇到难题解决不了多跟师兄请教思路，师兄也只能是给你指路，具体怎么走，还是得看你自己。
任务中遇到哪些疑难问题，最终是如何解决的，有哪些值得分享的收获。
在本任务中，遇到的主要问题还是花在怎样去布局怎样去实现各种居中，这也是经常遇到问题，主要还是需要去理解透各种居中的方法，不然布局很难下手。
在做任务的时候，用雪碧图制作图标时老是会出现各种问题，如图标做出来位置不对，图标大小不对等等，出现这些问题第一须理解透雪碧图的原理，位置不对图标大小有问题，这些问题应该出现在background-position上面，然后检查坐标有没打错，没有的话那就是单位的问题了，单位需要统一，然后还需要设置 background-size:的尺寸，这样才能保持统一坐标就不会出错大小也不会变的奇怪。还有就是明明单位和坐标都没出问题，为什么还是图标不正确呢，这时看看css是怎样的写的，如果background 属性是写在background-size: background-position后面的话，由于background是复合属性，还有一个是后面的会覆盖前面，因此复合属性background 应该写在前面才不会覆盖掉background-size和 background-position。
另外关于文本溢出省略号和模拟下拉框等都是可以百度找到答案，看的时候不要觉得麻烦，静下心看下去并去实操你就会有收获。
关于bootstrap样式的修改，建议不要在原有的样式修改，不然引用的bootstrap样式都是你自己定义的覆盖了bootstrap的，后面会有引起混乱的可能，应该自己新建类名。
任务四总结：
任务名称：CSS=TASK4
成果链接：https://strivezc.github.io/hello-world/task4.html
任务耗时：2018.10.20（1天） 无延期
技能脑图：
官网脑图：
个人脑图：
脑图对比分析：与官网脑图基本一致，本次任务用了绝对定位，未使用浮动。
任务总结：
在任务四里主要学习了position的几个定位以及他们的区别：
fixed 定位：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
注意：Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixed。
relative 定位：相对定位会按照元素的原始位置对该元素进行移动。
元素仍保持其未定位前的形状，原本所占的空间仍将保留。相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。元素原先在正常 文 档流中所占的空间会被后面元素占据。
注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
任务中遇到哪些疑难问题，最终是如何解决的，有哪些值得分享的收获。
在用input制作输入框的时候，css里给这个输入框确定宽度，如果给他定死了宽度，F12调试模式缩小屏幕时会变形，因此想实现能跟随屏幕宽度变化而变化的宽度，百度了一下找到 calc 动态长度属性，解决了这个问题。
按钮边框出现黄色、蓝色的框怎么让它消失，只要百度input怎么去掉默认边框就能找到解决的方案。
任务三总结：
任务名称：CSS=TASK3
成果链接：https://strivezc.github.io/hello-world/task4.html
任务耗时：2018.10.17-2018.10.19（3天） 无延期
技能脑图：
官网脑图：
个人脑图：
任务总结：
任务三主要是对盒子模型的熟悉并运用，学习浮动知识，并认识em px rem单位区别，学习关于viewport的用法。
解决父元素塌陷的问题：父元素的塌陷可能产生的影响：影响这个容器后面元素的布局，导致布局产生混乱。
让子元素撑开父元素，网上查看后，认为以下两个方法比较合适。
解决方法1：在父元素最后面添加一个无关的元素，让添加的无关元素去清除浮动。缺点：添加了一个无关元素，代码阅读受影响。
.clear{clear: both;}
方法2：通过伪类来实现，在需要清除浮动的父元素里，添加一个清除浮动的伪类，无上面的缺点。<div
.clearfix:after{
content: ""; /*内容为空*/
display: block; /*转换为块级元素*/
clear: both；} /*清除左右两边浮动*/
在网页的<head>中设置viewport.添加以下这句话，可以让网页的宽度自动适应手机屏幕的宽度。
其中：
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例。
rem单位和em单位的区别
rem单位怎么转换为像素值，取决于html元素的字体大小，谷歌浏览器默认的字体大小为16px（几乎在每个浏览器中，16px都是字体大小的默认值）， 即1rem=16px 。 可以通过设置font-size来设置字体大小。
em单位取决于它上一父元素font-size的大小，而它上一级的父元素又取决上上级，以此类推。
html { font-size: 16px;}
p {font-size: 1rem; /* 1*20=16px*/}
.someClass { font-size: .75em; // 12px}
.someClass p { font-size: 2em; // 24px}
.someClass p .test { font-size: 1.25rem; // 20px}但是当设置到12px以下的时候字体大小不再改变，因为谷歌浏览器默认最小的是12px。即font-size设为62.5%时，1rem不等于10px，应为浏览器的最 小值12px，所以可以设置其他合适的font-size值。
返回列表
评论