发表于: 2019-06-23 21:08:27

1 863


今天完成的事:今天把任务6提交了,然后学习深度思考,知道了inline-block之间的间隔如何去掉,最常用的是使用font-size:0;来取消。也学习了css有那些属性可以继承。具体会在下面写。然后进行了任务七,做了首页内容,知道了用按键想要跳转到另一个html可以用a标签包住button,然后链接写另一个html即可。

然后写了任务6的总结,对任务6学到的知识进行了梳理,知道自己学到什么,遇到过什么弯路,怎么解决的。

以下是任务六总结:

转至元数据结尾

转至元数据起始

任务总结:

任务名称:CSS-task6

成果链接:https://bronyazaychikl.github.io/jnshu/test6/test6.html

日报链接:https://www.jnshu.com/daily/99818?dailyType=others&total=16&page=1&uid=33850&sort=0&orderBy=3

任务耗时:2019.6.18-2019.6.22,无延期

个人脑图:


官方脑图:





任务总结之任务6:

1.任务6开始写着使用bootstrap,就先去看了bootstrap,后来发现里面的css名称不熟悉的话效率会很低,又改为自己写css。

2.学习雪碧图的时候,切下来的雪碧图比实际要用的大一倍,后来搜索了把雪碧图的总尺寸用background-size改小,每个要用的雪碧图尺寸也改为相应的比例,再调节背景定位找到相应的雪碧图。

3.列表项的下拉框使用的时候发现需要把边框进行渐变,下拉的内容要居中,后来就去百度,学到了border-image和text-align-last,使用text-align不行的原因是下拉框设置了宽度。

4中间的主体部分使用了flex弹性盒子,开始做的时候是把每列设置flex括起来,再用大盒子括起来,然后用flex的justify-content:space-between;往两边扩,结果让边框的线断开了,就去请教师兄,师兄说这样后期js设置不好设置,最好是相同的分成块,然后向下复制堆盒子,这样改某一块比较方便。后来就改成先做相同的部分,再向下复制堆叠。

5.主体部分设置文本省略,开始设置了但是不起作用,后来和同期的问了才知道是需要给盒子设置一个宽度,这样文本才知道什么时候才算空间不够,才开始省略。

深度思考:

1.去除inline-block间距有哪几种方法?

(1).去掉标签段之间的空白,因为元素间有间隙就是因为书写的时候有空格和和回车。

(2).使用font-size:0;可以解决大部分浏览器的间距,IE浏览器会剩余1像素。子元素会继承父元素的font-size。

(3).把margin设置为负值,具体尺寸要知道字体类型。

(4).调节字符间距letter-spacing或者单词间距word-spacing,设置字符间距时,子元素的字符间距也会被影响,需要设置子元素的letter-spacing为0。

平时最常用的是font-size:0;大多数都兼容。

2.css有哪些属性可以继承呢?

   字体系列属性

        font:组合字体

        font-family:规定元素的字体系列

        font-weight:设置字体的粗细

        font-size:设置字体的尺寸

        font-style:定义字体的风格

        font-variant:设置小型大写字母的字体显示文本

文本系列属性

        text-indent:文本缩进

        text-align:文本水平对齐

        line-height:行高

        word-spacing:增加或减少单词间的空白(即字间隔)

        letter-spacing:增加或减少字符间的空白(字符间距)

        text-transform:控制文本大小写

        direction:规定文本的书写方向

        color:文本颜色

元素可见性:visibility

表格布局属性:caption-side、border-collapse、border-spacing、 empty-cells、table-layout

列表属性:list-style-type、list-style-image、list-style-position、list-style

生成内容属性:quotes

光标属性:cursor

页面样式属性:page、page-break-inside、windows、orphans

声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、 speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

所有元素可以继承的属性:

        元素可见性:visibility、opacity        2、光标属性:cursor

内联元素可以继承的属性:

        字体系列属性        2、除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性:

        text-indent、text-align




返回列表 返回列表
评论

    分享到