webkit

CSS解决盒模型居中的问题

由 做~自己de王妃 提交于 2021-01-07 14:52:31
CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 全局样式 .parent { color: #FFFFFF; height: 200px; width: 200px; margin: 0 auto; background-color: #000000; } .child { width: 50px; height: 50px; background-color: #26f12d; } 第一种：margin+width 这种方法适用于已经知道width的盒子，实现起来比较简单 <div class="parent"> <div class="child"></div> </div> .child { width: 50px; margin: 0 auto; } 第二种：text-align+inline-block 这种方法适用于多种场景（width不固定） <div class="parent"> <div class="child"></div> </div> .parent { text-align:center; } .child { display: inline-block; } 第三种：float+position 这种方法适用于多种场景（width不固定） <div class="parent"> <div class=

图集 | 川西环线

由 为君一笑 提交于 2021-01-06 03:03:12
温馨提示：因微信中图片被压缩，请通过文末的 “阅读原文” 获取高清图片 ； 国庆 和小伙伴一 起 参加川西线路打卡之行，从成都出发，途径色达、理塘、甘孜，随后前往稻城亚丁，之后途径康定、雅安后回到成都，历时 9 天之久。这是一次让人铭记的旅游，认识了很多 nice 的人、见识过很多以前未曾见识过人文风景。将此次旅游中的若干风景照片、视频整理于此。 2019.09.28 杭州 - 成都 早晨从杭州出发前的晨曦 成都东站夜景 成都东站附近的高架桥 2 019.09.29 成都 | 都江堰&青城山 位于成都都江堰景区玉垒山的最高点，是都江堰景区的最高处 在玉垒阁上远眺都江堰 深淘滩，低作堰”，是闻名世界的都江堰水利工程的六字治水真经，内涵丰富 坐落在二王庙旁边的“玉垒仙都”雕刻牌坊，拥有三重飞檐 安澜索桥入口的亭子 南 桥位于都江堰宝瓶口下侧的岷江内江上， 是南街与复兴街之间的一座雄伟壮丽的廊式古桥，原名为“普济桥” 下午前去青城山景区，景区前方有一匾额上写着“西蜀第一山”， 楹联为“看三十六峰雨晴浓淡无章画； 有百零八景行吟顾步少陵诗” 青城山正门，门上悬挂着 “青城天下幽”匾额 坐索道上青城山，石阶引向第一个观就是慈云阁 山门上悬挂三匾，中间是“慈云阁”，两旁分别是“普度众生”及“国泰民安”，劵门前有鼎式香炉 再往上走就是上清宫，上清宫是历代天师举行重大宗教活动的主要场所

昨天网站都变灰了，你知道是怎么做的么？

由 旧巷老猫 提交于 2021-01-04 13:02:53
昨天是 2020 年 4 月 4 日，清明节。 这个清明节，我想我们很多人在今后的很多年中都不会忘记，这一刻，我们参与了历史，同时成为了历史的见证者。 2020 年从过年到现在，我们的国家遭遇了非常惨痛的经历，很多英雄在救助他人的路上倒下，更有很多烈士保卫人民的安危遇难，全国下降半棋，北京时间上午 10 点，全国拉响防空警报，默哀 3 分钟，来致敬逆行的英雄。 同时，所有的公共娱乐活动也全部停止，包括直播、综艺、影视、游戏等等。 在昨天，如果你有打开过抖音 APP ，看到的几乎全都是我们这次的抗疫英雄，我觉得，抖爸爸这次干的漂亮，英雄们值得被这样宣传。 截至4月2日，全国共有60名公安民警和35名辅警牺牲在抗击疫情和维护安全稳定第一线，用宝贵生命谱写了一曲曲人民公安为人民的英雄赞歌。 截止4月3日，已有41位抗疫牺牲殉职医生和护士，2020年我们已经痛失13名院士，沉痛悼念。愿天堂再无病痛！ 我也在这里也向全国抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞表达深切的哀悼，向所有在抗战在疫情前线的工作和医护人员致敬。 网站变灰 昨天早晨一觉醒来，打开浏览器，整个互联网都变灰了，一开始还以为自己色盲了，后来才反应过来，不禁为自己的智商感到担忧。 不过在网上冲浪一圈，可以看到很多我们常用的网站都变成了灰色的： 可以看到，这些网站的全站内容都变成灰色的了，包括按钮、图片、文字等信息。

CSS样式更改——用户界面和指针类型

由 [亡魂溺海] 提交于 2021-01-04 07:32:06
###前言 上篇文章主要讲述了CSS样式更改中的多列、元素是否可见、图片透明度基础知识，这篇文章我们来介绍下CSS样式更改中用户界面和指针类型基础用法。 ####1.用户界面 UserGui 1).重设元素大小 resize div { resize:both } none 不调整 both 调整元素的高度和宽度 horizontal 调整元素的宽度 vertical 调整元素的高度 2).规定两个并排的带边框的框 box-sizing div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ } content-box 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 3).对轮廓进行偏移outline-offset div { outline-offset:15px 轮廓与边框边缘的距离 } ####2.指针类型Cursor div{ cursor:auto } 光标形状： default 默认光标（箭头） auto 浏览器设置的光标。 crosshair 十字线 pointer 一只手 move

CSS样式更改——用户界面和指针类型

由 ≡放荡痞女 提交于 2021-01-04 07:31:55
###前言 上篇文章主要讲述了CSS样式更改中的多列、元素是否可见、图片透明度基础知识，这篇文章我们来介绍下CSS样式更改中用户界面和指针类型基础用法。 ####1.用户界面 UserGui 1).重设元素大小 resize div { resize:both } none 不调整 both 调整元素的高度和宽度 horizontal 调整元素的宽度 vertical 调整元素的高度 2).规定两个并排的带边框的框 box-sizing div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ } content-box 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 3).对轮廓进行偏移outline-offset div { outline-offset:15px 轮廓与边框边缘的距离 } ####2.指针类型Cursor div{ cursor:auto } 光标形状： default 默认光标（箭头） auto 浏览器设置的光标。 crosshair 十字线 pointer 一只手 move

【HTML】让网站变成灰色的办法

由 别来无恙 提交于 2021-01-04 04:00:00
一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。那么今天就说说，通过几行简单的代码，来实现这个功能。 第一种：修改CSS文件 我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰 CSS代码 html { filter : progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) ; -webkit-filter : grayscale(100%) ;} 第二种：在网页的<head>标签内加入以下代码 如果你不想改动CSS文件，你可以通过在网页头部中的<head>标签内部加入内联CSS代码的形式实现网站网页变灰 代码 <style type="text/css"> html { filter : progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) ; -webkit-filter : grayscale(100%) ;} </style> or html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale

Chrome on iPhone overflows content on empty page (on new tab only, not reload)

由 只愿长相守 提交于 2021-01-04 03:15:16
问题 On IOS Chrome, the body overflows on a new tab or page with no content, but if the page is reloaded, the problem is fixed. It poses a problem for any element positioned at the bottom (absolute or fixed). Here is the code to reproduce the problem: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <style>* { box-sizing:

Chrome on iPhone overflows content on empty page (on new tab only, not reload)

由 女生的网名这么多〃 提交于 2021-01-04 03:12:49
问题 On IOS Chrome, the body overflows on a new tab or page with no content, but if the page is reloaded, the problem is fixed. It poses a problem for any element positioned at the bottom (absolute or fixed). Here is the code to reproduce the problem: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <style>* { box-sizing:

Chrome on iPhone overflows content on empty page (on new tab only, not reload)

由 百般思念 提交于 2021-01-04 03:11:47
问题 On IOS Chrome, the body overflows on a new tab or page with no content, but if the page is reloaded, the problem is fixed. It poses a problem for any element positioned at the bottom (absolute or fixed). Here is the code to reproduce the problem: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <style>* { box-sizing:

Chrome on iPhone overflows content on empty page (on new tab only, not reload)

由 僤鯓⒐⒋嵵緔 提交于 2021-01-04 03:11:01
问题 On IOS Chrome, the body overflows on a new tab or page with no content, but if the page is reloaded, the problem is fixed. It poses a problem for any element positioned at the bottom (absolute or fixed). Here is the code to reproduce the problem: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <style>* { box-sizing:
订阅 webkit