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 · 271 阅读 · 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 · 474 阅读 · 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 评论 -
多列布局
多列布局Columns Columns Columns: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 · 239 阅读 · 0 评论 -
flex布局全部属性
flex布局介绍flex container和flex items认识flex布局flex container上的属性flex-direction 介绍 flex布局是web开发中使用最多的布局方案 flex布局:弹性布局 目前特别是移动端用的最多,pc端也越来越多 flex container和flex items flex container是开启弹性布局的元素 flex items是flex container里面的直接元素 .box{ display: flex; } <原创 2020-09-16 17:49:26 · 493 阅读 · 0 评论 -
盒布局
盒模型一级目录 一级目录原创 2020-09-16 17:00:18 · 286 阅读 · 0 评论 -
H5的新特性,position,animation和transition,css中的单位
盒模型 H5的新特性 position animation和transition 简述div元素和span元素的区别。 css中的单位 box-sizing的属性值 CSS中实现动画的⽅式原创 2020-09-14 17:04:25 · 965 阅读 · 0 评论 -
文本样式
一级目录 说的话覅但是 一级目录 说的话覅但是 一级目录 说的话覅但是 一级目录 说的话覅但是 一级目录 说的话覅但是 一级目录 说的话覅但是原创 2020-07-19 19:00:58 · 148 阅读 · 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 · 150 阅读 · 0 评论