发表于: 2019-01-08 20:42:36
1 739
任务名称:css-task6
成果链接:https://dongjiayu2018.github.io/learn/task6/task6.html
任务耗时:本次任务从1.4-1.8 共耗时4天
官方脑图:
个人脑图:
任务总结:
一、去除inline-block间距有哪几种方法
1、移除空格
2、使用margin负值
3、删除闭合标签
4、使用font-size:0
5、使用letter-spaciing
6、使用word-spacing
二、属性与属性值
1、justify-content
justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
属性值 :
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
2、text-overflow
text-overflow 属性规定当文本溢出包含元素时发生的事情。
属性值:
clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。
ellipsis: 当对象内文本溢出时显示省略标记(...)。
3、overflow
overflow 属性规定当内容溢出元素框时发生的事情。
属性值:
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
4、white-space
white-space属性指定元素内的空白怎样处理。
属性值:
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
5、border-image
border-image 属性是一个简写属性,用于设置以下属性:
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
6、line-height
line-height 属性设置行间的距离(行高)。
7、font-weight
font-weight 属性设置文本的粗细。
8、vertical-align
vertical-align 属性设置元素的垂直对齐方式。
9、user-select
user-select 属性控制用户能否选中文本
10、cursor
cursor 属性规定要显示的光标的类型(形状)。
评论