发表于： 2018-09-13 21:05:51
1 735
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
今天完成了任务五，任务五对于暂时会用了一些display:flex这样的东西，不过还是不熟悉的
明天计划的事情：（一定要写非常细致的内容）
明天计划复习之前学习的东西，还有任务六的开始
遇到的问题：（遇到什么困难，怎么解决的）
遇到了一些问题，就是关于一些定位，在任务五的时候，经常都是无法垂直居中，或者说无法居中，有的时候都没有办法去对齐头像和文字这样的
收获：（通过今天的学习，学到了什么知识）
任务五任务总结。
2018.9.4~2018.9.13
成果链接：https://jksmiss.github.io/start-a-project/task5/task5.html
我的脑图
官方脑图
定位分为绝对定位，相对定位，和固定定位
相对定位 position：relative;
针对于原本所在的位置进行移动
在css样式中输入
position:relative;
left:20px;横坐标，正值表示像右边横移，负值表示像左横移
top:20px；纵坐标，正值表示像下边横移，负值表示像上横移
其他的方向一样
由于相对定位脱离了那个位置，但是原本的位置还是在的，所以别人也是占据不走的，相对定位用途就是作用于子绝父相，用来绝对定位的测量，和本身的微调
绝对定位：position；absolute;
就是使设置了相对定位的标签脱离它原本的文档流以后，如果它的父元素没有设置相对定位，那么它就会继续寻找祖元素是否相对定位，如果都没有，那么就根据页面来决定漂浮宽高，而且绝对定位后，就不管是不是块级元素和行内元素，都可以直接设置宽高 了，也不需要进行元素转换了
固定定位：position: fixed；
固定定位，就是在网页上的滚动条无论怎么滚动，一些要看的东西都会一起下来。叫做固定定位。要设置一个TOP来固定高度
PS如果说没有办法打开左边的工具栏的时候，可以在，窗口找到工具就可以
还有一段就是：
PS如果有很多的参考线，然后你又不知道怎么办的时候，可以在上面的视图，清除参考线
每一个标签都有它本身的意义，这个是我们应该去掌握的，就和我们的语文一样。表达对方的方式有，你，我，它，他。她，您，贵公司。贵先生。这每一个单词，每一个字，都是有它本身意义的，所以标签也一样，不同的标签在不同的场景下都是有不一样的意义的，这个就是语义化的标签，也有很多废除的标签，像孔乙己里面的，茴香豆的四种写法，但是除了茴以外，剩下的三种写法都没有人写了，没人用了，大家认可的都是茴这个字，那么标签也一样，有一些废除的标签了解一下就好，不用去记。我们只要记住要常用的标签这样就行了
通用的块级标签就是<div>行内标签，
<span>标签就是短语内无语义的标签
相对于一个盒子内的文字进行居中生效的话，要对于他的父级元素来进行改变，才可以，单个的标签是没有办法进行居中的
添加背景图片的时候，需要设置单张图片。不然的话会填充全部的地方，那也就是说没有设置no-repeat;的时候是没办法不填充的
以及关于FLEX的
.png)
盒子模型浏览器默认的margin外边距是8px
块级元素的默认margin是16px
margin: 0 auto是一种居中的方式
在CSS中，设置完宽和高以后，如果不设置背景颜色或者边框的话，是无法出现图案的
CSS四种选择器：类选择器，标签选择器，ID选择器，通配符，是指选择了HTML里面的某一个标签，或者全部的标签，为这个标签设定一个属性值，让它生效
类选择器，为某一个标签设定一个类。class。选择它以后再添加上属性值
<p class="kj">4545</p>这个是标签
.kj{
width:10px;
height:15px;
}
运用了class和.来选择了这个标签来选择它并且为它加上属性值
标签选择器：来为某一个标签来选择它，并且为它添加属性值
<p>4545</p>这个是标签
p{
width:10px;
height:15px;
}
直接运用了p标签来选择了它本身，和类标签不同的是这个选择器可以选择所有相同的标签
ID选择器，以#来作为选择器，在你想要的那个特定的标签来用，只能用一次
#muylju{
width:10px;
height:15px;
}
<h2 id="muylju">55555</h2>
用#来选择一个名称，这个名称可以随便写
（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如id不能叫做body、img、a。
通配符*匹配所有的标签
*{
margin-left:0px;
margin-top:0px;
}
对于所有的标签都是通用的
还有一些高级的选择器
后代选择器，可以选择同级标签的后一个标签，用空格来表示后代，只要表示了后代的关系就行，不一定非得是子元素
h1 p{
width:10px;
height:15px;
}
<p>454545</p>
这里就是直接选择的h1的后代p标签来设置属性值
并集选择器
在里面可以放下其他的选择器，用逗号来隔开
下一个兄弟选择器
运用了+号来表达
<style type="text/css">
h3+p{
color:red;
}
</style>
上面的是说，<h3>标签的第一个p标签的颜色是和红色
CSS里面有个属性和值。比如说float:left，那么意思属性是浮动，值是左边
HTML里面的表头，像<head>标签就是显示表头的，是一个容器，里面包含了要写在表头的各种属性和信息，
一些像<line>标签作为连接的标签可以写在这里作为连接，这里写的东西除了<title>里面写的东西会显示为标题头部以外，
其他的东西都不会显示网页当中，只有写在<body>和 的才会显示在网页当中，其中的<link>标签是一个外部引用的链接标签
写在<head>里面的有一个<meat>标签是说明，这个html里面的文档的一个字库，在不做其他的改变的时候都是用的这字库
<body>代码都是写在这里面的，写的代码在这里面是会显示出来的，是主要的内容
其中还有一个外部引用的链接，链接到外部文件
<a href="02个人节目.html">进入新的界面</a>也可以这样
<a href="http://www.baidu.com" target="_blank">点我点我</a>
直接输入网站进入界面
href是英语hypertext reference超文本地址的缩写
footer是页脚的意思，是属于语义化标签
返回列表
评论