发表于: 2018-08-26 17:56:46
1 680
今天完成的事情:
今天完成了提交任务6,做好任务7的准备工作,下载了任务7的资源,贴了任务6的wiki,画了任务6的脑图,改了任务6的一些问题。
明天计划的事情:
开始做任务7先看看与任务7相关的知识然后开始做。
遇到的问题:
垂直居中问题,我用了个flex,解决了图标垂直居中的问题,给图标加上外边距防止太贴近页面边,字体变成省略号的问题,用了百度上的代码解决了。字体对齐并且页面改变,仍然对齐,我用的是给外面包一个大的div,然后给div加上外边距的方法。
收获:
学习了letter-spacing,减少或者增加字体之间的距离。一直用flex,对flex更熟悉,flex直接控制子元素,如果给子元素加上一个子元素,那么就无法控制,做完了任务6。
任务总结之任务6:
今天完成了任务6感慨很多,任务6的页面我第一眼看到感觉很简单,并不需要多少东西就可以做出来,但做的时候才发现,用到了很多知识点结合引用,以及浏览器不同显示出来的不同,适应各个浏览器,以及手机端的问题,消除下拉框的边框,改变下拉框的颜色,消除下拉框的样式,困扰了我很久,下面是我的代码
border: none;
outline:none;
font-size: 30px;
color: #a8a8a8;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background-color: white;
在图标居中的问题上,我也很困扰,如果直接给他父元素的上一级加上flex,给他居中它并不会居中,只能给他父元素加上flex,才能让他垂直居中。
还有超出字体变成省略号的代码,把超出固定的宽字体变成省略号
white-space: nowrap;
width: 36%;
这是我的代码,完成了缩小字体一部分变成省略号,放大显示。
还有箭头符号的定位问题,我用的是,给父元素一个相对于整个html,的相对定位,然后给子元素一个绝对定位,这样子元素就是相对于整个html绝对定位。解决了不能复制的问题。
static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。z-index是可以完全覆盖下面的元素,不让它显示出来,屏幕滚动时加上这个
如果是上面就用top0 下面就用bottom0 实现上面导航栏固定并且,元素翻动使上面覆盖。
2、relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。 如果这个元素作用到父元素上,子元素在使用绝对定位,就可以相对于父元素绝对的定位,如果不给父元素加上的话,加上的话就是相对于整个html绝对定位,子元素加上绝对定位就可以实现
3、absolute(绝对定位):生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。绝对定位可以实现在任何地方定位,并且flex影响不了绝对定位。
4、fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。这个定位之后就不好改变位置,就是你定到你页面的什么位置,它就不会变,无论你怎么翻动改变页面。
雪碧图
雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更好。
使用雪碧图的优点有以下几点:
将多张图片合并到一张图片中,可以减小图片的总大小。
将多张图片合并成一张图片后,下载全部所需的资源,只需一次请求。可以减小建立连接的消耗。
提一下雪碧图非常方便,减少了bug。
去除inline-block间距有哪几种方法?
1元素间留白间距的出现原因即标签段间的空格,去掉空格间距自然没有了。
2用负值的外边距来解决这个问题。
3还可以删掉闭合标签。
4使用font-size:0 用0值大小解决间距的问题。
5用letter-spacing,加到css上letter-spacing 属性增加或减少字符间的空白。
6使用word-spacing和上面一样。
css有哪些属性可以继承?
1字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格。
2、文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:增加或减少单词间的空白(即字间隔)
letter-spacing:增加或减少字符间的空白(字符间距)
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色
3、内联元素可以继承的属性
字体系列属性
除text-indent、text-align之外的文本系列属性
4、块级元素可以继承的属性
text-indent、text-align
脑图:
评论