![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html+css
关于html+css学习
to-and-fro
即使前方寸步难行
展开
-
超出省略号表示常见方式
单行超出 width: 100%; height: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;多行超出 width: 100%; height: 100%; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:3; /*设置行数*/原创 2020-12-18 21:01:28 · 255 阅读 · 1 评论 -
canvas与SVG
canvas与SVGcanvas在页面中插入 canvas 元素给制图形的基本方法绘制判断是否支持 canvas绘制直线矩形圆形属性canvas在页面中插入 canvas 元素<canvas id=”myCanvas ” width=” 200 ” height=”1 0 0”></ canvas></ body>给制图形的基本方法var c=docurnent.getElernentByid (”myCanvas ”)通过 canvas 元素的 getContext(原创 2020-09-16 19:11:39 · 410 阅读 · 0 评论 -
盒模型
盒模型box-sizing可控大小——Resize属性内容溢出定义轮廓网页居中:auto设计弹性页面box-sizing盒子模型默认设置的宽度为content区域宽度,不包含边框和内外边距box-sizing: border-box;表示width是包含padding和border的box-sizing: content-box;表示width=content,值包含content(默认值)可控大小——Resize属性None:浏览器不提供尺寸调整机制,用户不能调节元素的尺寸Both:提供双向原创 2020-09-16 19:06:21 · 109 阅读 · 0 评论 -
多列布局
多列布局ColumnsColumnsColumns:colnum-width每列宽度 colnum-count列数只定义宽度,列数根据浏览器调整只定义列数,无论浏览器怎么调整,列数不会改变Colnum-gap定义列间距 normal(1em,默认),或者具体数字 /*定义列间距为3em,默认为1em*/ -webkit-column-gap: 3em; -moz-column-gap: 3em; column-gap: 3em;Colnum-rule定义列边原创 2020-09-16 18:50:17 · 236 阅读 · 0 评论 -
flex布局全部属性
flex布局介绍flex container和flex items认识flex布局flex container上的属性flex-direction介绍flex布局是web开发中使用最多的布局方案flex布局:弹性布局目前特别是移动端用的最多,pc端也越来越多flex container和flex itemsflex container是开启弹性布局的元素flex items是flex container里面的直接元素.box{ display: flex; }<原创 2020-09-16 17:49:26 · 492 阅读 · 0 评论 -
盒布局
盒模型一级目录一级目录原创 2020-09-16 17:00:18 · 283 阅读 · 0 评论 -
H5的新特性,position,animation和transition,css中的单位
盒模型H5的新特性positionanimation和transition简述div元素和span元素的区别。css中的单位box-sizing的属性值CSS中实现动画的⽅式原创 2020-09-14 17:04:25 · 956 阅读 · 0 评论 -
文本样式
一级目录说的话覅但是一级目录说的话覅但是一级目录说的话覅但是一级目录说的话覅但是一级目录说的话覅但是一级目录说的话覅但是原创 2020-07-19 19:00:58 · 147 阅读 · 0 评论 -
CSS选择器
CSS选择器基本选择器组合选择器基本选择器1, *{ margin:0; } 表示匹配任何元素2,p{ margin:0; } 标签选择器,匹配所有对应标签3, .table1{margin:0;} 类选择器,匹配所有class=table1的元素4,#table2{margin:0;}ID选择器,匹配所有id=table2的元素组合选择器多元素选择器(以逗号分隔)<!doctype html><html><head><meta chars原创 2020-07-19 19:00:20 · 145 阅读 · 0 评论