20200814 王维

学习总结:
1.字体属性
font-weight lighter 字体变细 无单位的数字400正常 700加粗
font-style:italic字体倾斜
font-variant 小型大写字母
font 必须写size和family否则不生效 font-size/line-height
2.文本属性
text-align:justify两端对齐
text-align:center使得元素的内容居中,但不会使块级元素居中对齐,margin:auto使元素本身居
中对齐
line-height属性取值为无单位的数字为字号的倍数
text-decoration取值underline下划线、overline上划线、line-through删除线
outline轮廓 边框边缘的外围
3.背景
background-size cover填充 contain包含 auto默认值,真实大小
background-attachment fixed窗口改变时,图片位置不变 scroll默认值
background:color url() repeat attachment position背景简写
background-position用法 精灵图sprite,项目中为了减少响应次数,一般很多小图片都会拼到
一张大图中,然后使用背景图的background-position,去显示具体想要的小图标,这种很多小
图标拼出的大图,称之为精灵图,雪碧图
背景渐变使用background-image设置
线性渐变 linear-gradient(angle,color 出现的距离起点的位置,color 出现的距离起点位置,...)
angle为指针指向上方为基准旋转的角度,沿指针方向按给定的颜色取值渐变,
可以取值关键字 to top 0deg 从下到上;to right 从左到右 90deg;to bottom 180deg 从上到下;
to left 270deg 从右到左
径向渐变 radial-gradient(半径 at 圆心位置(left top),color 出现的距离圆心的位置,...)
重复渐变 repeating-linear-gradient线性 repeating-redial-gradient径向
兼容性问题 css hack 添加浏览器内核前缀 -ms- IE浏览器;-o- Opera;-moz FIrefox;-webkit-
Chrome/Safari 存在前缀时,不写to,方向为起点
4.表格
td/th设置外边距无效 vertical-align设置单元格数据的垂直对齐方式 middle垂直居中对齐
boder-collapse:collapse边框合并
boder-spacing 边框边距
table-layout表格显示规则 auto默认值 自适应内容,表格复杂时加载较慢,比较灵活;fixed 固定
表格内容,加载快,不灵活
5.列表
list-style-image设置列表项为图片
心得体会:
很多css样式看起来很简单,但其中的每一个属性要想准确理解很难,需要多查资料,多试验,如渐
变色,颜色后面跟的值是这个颜色的位置,这个位置是以到距离起点的距离表示的,我开始理解为
颜色原样显示的长度,后面经过试验,在浏览器中进行微调,大概理解了他的含义,以小见大,一
个css样式或者一个html标签,看上去他的定义可能很简单,但想要准确理解,还是要多下功夫。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1