Pink | 易学教程

CSS盒模型以及如何解决边距重叠问题

阅读更多关于 CSS盒模型以及如何解决边距重叠问题

盒模型有两种，W3C 和IE 盒子模型 W3C定义的盒模型包括margin、border、padding、content，元素的宽度width=content的宽度 IE盒模型与W3C盒模型的唯一区别就是元素的宽度，元素的 width=border + padding + content IE定义的盒模型较为合理，所以在css3中新增了 box-sizing ，包含两个属性 content-box和border-box。 content-box 元素的 width = content border-box 元素的 width = border + padding + content 1. 对于行内元素 margin-top/margin-bottom对于上下元素无效，margin-left/margin-right有效！对于相邻的块级元素margin-top和margin-bottom两者叠加按照一定的规则（1）都是整数 margin值取两者的最大值（2）都是负数 margin值取最小值（3）两者正负相反，margin值取两者之和标准盒模型和IE模型的区别标准盒模型中 width 指的是内容区域 content 的宽度； height 指的是内容区域 content 的高度。标准盒模型下盒子的大小 = content + border + padding +

从零开始学习前端开发 — 11、CSS3选择器

阅读更多关于从零开始学习前端开发 — 11、CSS3选择器

一、基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二、层次选择器（关系选择器） 1.后代选择器语法： E F eg: .box a{color:red;}　　匹配.box中所有的子元素a 2.子代选择器语法： E>F eg: .box>a{color:red;}　　匹配.box中第一级子元素a 3.相邻兄弟选择器语法： E+F eg: .box+h3{background:pink;}　　匹配.box后面紧邻的那一个h3元素注：相邻兄弟选择器能匹配到的元素有且仅有一个，并且是E元素后面紧邻的F元素 4.通用兄弟选择器语法： E~F eg: .box~h3{border:2px solid blue;}　　匹配.box后面所有兄弟元素h3 注：通用兄弟选择器可以匹配到多个其后的兄弟元素三、动态伪类选择器 1.E:link 链接没有被访问过时的状态 2.E:visited 链接访问过后的状态 3.E:hover 鼠标滑过时的状态 4.E:active 鼠标按下时的状态（爱恨原则： L o V e HA te） 5.E:focus 当获取到焦点时的状态 eg: input:focus{border:2px solid red;} 当获取焦点时

关于js事件冒泡和事件捕获

阅读更多关于关于js事件冒泡和事件捕获

事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。 < div id ="parent" style ="height: 100px;width: 100px;background-color: pink;" > < div id ="child" style ="width:100%; height:100%" > </ div > </ div > < script > document.getElementById( ' parent ' ).addEventListener( ' click ' ,(e) => { alert( ' parent ' ); }) document.getElementById( ' child ' ).addEventListener( ' click ' ,(e) => { alert( ' child ' ); }) </ script > 结果先输出child，再输出parent，事件的触发顺序自内向外，这是事件冒泡。 < div id ="parent" style ="height: 100px;width: 100px

重绘和回流

阅读更多关于重绘和回流

页面呈现流程在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。 1. 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象(<html> tag)。 dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构，里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。 2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而firefox会去掉_开头的样式。 3、dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree，但其实区别有很大，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render

HTML及CSS笔记

阅读更多关于 HTML及CSS笔记

目标：Front-end Engineer → Full-stack Engineer 浏览器及其内核 HTML 开发工具 sublime 轻量级的ide 1.使用技巧 h${}*6 vsCode 写大项目时使用 1.使用技巧 SEO-搜索引擎优化 <html lang= "en"> < head > < meta charset = " utf-8 " >  < title > 我是title </ title > < meta content = " 服装 " name = " keywords " > < meta content = " 这是一件你穿了就不想脱的衣服 " name = " description " > </ head > < body >   </ body > </ html > 路径 1. 网上url <img src="https://xxxxxx.jpg" style="width:200px;"> 2.本地的绝对路径 D:/a/b/test.html D:/a/b/c/123.jpg <img src="D:/a/b/c/123.jpg>" 3. 本地的相对路径 …/来表示上一级目录 D:/a/b/test.html D

设置渐变色

阅读更多关于设置渐变色

<! DOCTYPE html > < html > < head > < meta charset ="utf-8" /> < title ></ title > < style type ="text/css" > #canvas1 { margin : 0 auto ; /* background: #efefef; */ display : block ; border : 1px solid #aaa ; /* width: 600px; height: 400px; */ } </ style > </ head > < body > < canvas id ="canvas1" width ="600" height ="400" > 你的浏览器不支持canvas </ canvas > < script type ="text/javascript" > // 找到要设置的画布 var canvas1 = document.querySelector( ' #canvas1 ' ) // 能够对这个画布画画的对象,就是画笔，canvas1的上下文对象 var ctx = canvas1.getContext( ' 2d ' ) ctx.rect( 100 , 100 , 200 , 100 ) // ctx.fillStyle = 'skyblue' // ctx

前端爱好者的小白学习之路-3.1 CSS学习笔记-用CSS来提升网页开发的效率学扎实CSS基础语法麻麻再也不用担心我的网页页面布局太丑辣（持续更新中）

阅读更多关于前端爱好者的小白学习之路-3.1 CSS学习笔记-用CSS来提升网页开发的效率学扎实CSS基础语法麻麻再也不用担心我的网页页面布局太丑辣（持续更新中）

更多细节请参考 CSS参考手册 1.写在前面关于CSS基础语法【1】相比于HTML 内容及难度上有明显的提升【2】CSS用来美化布局网页【3】CSS中最为困难的地方就是布局结构只有熟练地掌握了CSS语法基础才能理解之后更复杂的知识点并灵活地利用这些知识去进行网页的布局阅读完此文你会得到—— 关于CSS基础语法的要点得到一个大致的学习CSS的方向文章目录 1.写在前面 2.我的学习方式 3.网页布局中 CSS一定要熟练掌握这些！ 4.CSS基础语法 CSS背景简写属性的顺序 background-position的详情 CSS文本文本颜色文本缩进文本对齐方式文本修饰文本转换更多文本属性… 更多对文本的操作实例！ CSS字体字体系列-“weiruanyahei” 字体样式-斜体字字体粗细字体大小–设置像素/em 选择器通配符选择器普通选择器 id选择器&Class选择器（类选择器） id选择器 class选择器（类选择器）样式表外部样式表–独立的.css文件内部样式表—初学的时候用的最多！内联样表多重样式优先级其他CSS优先规则 CSS链接 a:hover a:active … 四个链接样式的顺序–“LoVe and HAte” 文本修饰背景颜色更多链接样式添加不同样式的超链接 CSS列表：list-style

css隐藏滚动条兼容谷歌、火狐、IE等各个浏览器

阅读更多关于 css隐藏滚动条兼容谷歌、火狐、IE等各个浏览器

项目中，页面效果需要展示一个页面的移动端效果，使用的是一个苹果手机样式背景图，咋也没用过苹果，咋也不敢形容。如下图所示：在谷歌浏览器如图一滚动条顺利隐藏，但是火狐就如图二了，有了滚动条丑的一批。先上谷歌浏览器解决滚动条代码： CSS代码： <style> .tp_box1{ width: 517px; height: 400px; 　/* auto在那个方向有益处就在那个方向上有滚动条 */ 　overflow: auto; } .tp_box1::-webkit-scrollbar{ display: none; } .tp_box2{ width: 100%; height: 500px; background: pink; } .tp_box3{ width: 100%; height: 500px; background: red; } .tp_box4{ width: 100%; height: 500px; background: black; } </style> HTML代码： <div class="tp_box1"> 　　<div class="tp_box2"></div> 　　<div class="tp_box3"></div> 　　<div class="tp_box4"></div> </div> 上述代码完美解决图一问题，但是此方法不兼容火狐

2020.4.4号全国疫情哀悼日网页变灰色前端是如何实现的？-pink老师

阅读更多关于 2020.4.4号全国疫情哀悼日网页变灰色前端是如何实现的？-pink老师

今天是4.4疫情哀悼日，纪念疫情期间牺牲的烈士和逝世同胞，因此大部分网站颜色都变灰色了，我们前端是如何实现的呢？核心原理，使用css3的滤镜效果即可,filter grayscale 将整个界面变为黑白灰色调，是CSS3新功能方式1：通过js可以设定指定时间，自动变灰以及复原注意：以下代码需要引入jquery <script> // 1.得到当前的时间 var nowTime = new Date().getTime(); // 2.设置结束的时间是 2020年4月5号凌晨 var overTime = new Date('2020/04/05 00:00:00').getTime(); // 3.如果当前时间小于了结束时间，简单说就是当前时间还没到4.5号零点 if (nowTime < overTime) { // 4.把html 设置灰色滤镜 $("html").css({ '-webkit-filter': 'grayscale(100%)', '-moz-filter': 'grayscale(100%)', '-ms-filter': 'grayscale(100%)', '-o-filter': 'grayscale(100%)', 'filter': 'progid:DXImageTransform.Microsoft.BasicImage

如何让css隐藏滚动条兼容谷歌、火狐、IE等各个浏览器

阅读更多关于如何让css隐藏滚动条兼容谷歌、火狐、IE等各个浏览器

订阅 Pink