随笔分类 - html
摘要：第一种情况flex属性不写 flex属性默认是0 1 autoflex-grow为0，则存在剩余空间也不放大flex-shrink为1，则空间不足该项目缩小flex-basis为auto，则该项目本来的大小原始代码： <style> .parent { display: flex; width: 6
阅读全文
摘要：1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下： △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸： △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系
阅读全文
摘要：当img中间无图片时显示默认边框，尝试用border:0无效 可以使用属性选择器设置opacity为空 img[src=""],img:not([src]){ opacity:0; } 原文链接：https://blog.csdn.net/weixin_40431771/article/detail
阅读全文
摘要：一、float布局 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
阅读全文
摘要：效果如下图所示： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
阅读全文
摘要：1、下拉框，效果如下图所示： 代码： <style> .selectBox { width: 90px; margin: 50px; } .select { width: 90px; background-color: #17a6b5; height: 40px; cursor: pointer;
阅读全文
摘要：相信很多小伙伴在页面布局上都碰到过行内元素之间存在默认的间隙的问题。其实这是因为行内块元素之间，浏览器会有一个默认的间距。如图： 解决的办法有四种： 1.html中将行内元素在同一行显示，不影响美观即可，可读性比较差 <div class="main"> <!-- 在html中将行内元素在同一行显示
阅读全文
摘要：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test1</title> </head> <body> <!-- video对象属性：width height 设置视频的宽高 autoplay 视频就绪自动
阅读全文
摘要：一、普通背景模糊 代码： <Style> html, body { width: 100%; height: 100%; } * { margin: 0; padding: 0; } /*背景模糊*/ .bg { width: 100%; height: 100%; position: relati
阅读全文
摘要：效果图： 代码： <!DOCTYPE HTML> <html> <head> <title>纯CSS3实现圆圈动态发光特效动画</title> <style> body { background-color: #000000; } @keyframes twinkling { 0% { opacit
阅读全文
摘要：效果： 代码： <style> .inputBox { width: 100px; height: 50px; background: green; color: white; font-size: 16px; text-align: center; line-height: 50px; borde
阅读全文
摘要：示例一： 代码： <style type="text/css"> .one { height: 200px; width: 200px; margin: 10px auto; line-height: 200px; background: yellowgreen; background: linea
阅读全文
摘要：Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。 语法element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); //
阅读全文
摘要：在css盒模型默认的定义里，对一个元素设置width和height只会应用到该元素的的内容区，如果这个元素有任何的border或padding，绘制到屏幕上的宽度和高度会加上border和padding，所以当你调整一个元素的宽度和高度时要时刻注意这个元素的边框和内边距，特别是在做响应式布局时，这个
阅读全文
摘要：<!DOCTYPE html> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>无标题文档</t
阅读全文
摘要：/* Chrome、Safari 、Opera浏览器 */ input::-webkit-input-placeholder { color: #fff; } /* 火狐浏览器 */ input::-moz-placeholder { color: #fff; } /* IE浏览器 */ input
阅读全文
摘要：写这个页面只是为了记录各个浏览器修改input type="range" 默认样式的方法，有需要的朋友们可以参考下。 注：在chrome浏览器中进度条不显示颜色，需要自己设置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
阅读全文