wust_cyl的博客

单行文本：我们看一下如下效果这种情况随处可见，实现起来也很简单。 <p> 友情，能够随时说话找一个能随时随地和你聊天的人真的很难。 </p>p{ width:10em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }多行文本...

JavaScript和HTML的交互是通过事件来实现的。先来简单看一下DOM事件处理程序的级别1：DOM0级别事件处理程序（简单的说，就是将一个函数赋值给一个事件处理程序属性）dom.onType = function (e) {}var btn = document.getElementById("myBtn"); btn.onclick = function(){ al...

基本概念CSS盒模型分为俩种：1：标准盒模型     2：IE盒模型它们俩个的区别在于width和height的计算方式区别那么如何设置这俩种模式了？box-sizing: content-box;    标准模式box-sizing: border-box;      IE模式 顺便提一下如何通过JS获取width和height1：dom.style....

1：实现高度已知，左宽度固定，右自适应 <section> <style> .part2-content-wrap{ position: relative; } .part2-content-wrap div{ ...

Grid布局：Grid布局知识点布局1：左右俩边固定，中间自适应 <style> .wrap{ display: grid; grid-template-columns: 300px auto 300px; grid-template-rows: 100px; }...

布局1： 高度已知，左边固定，右边自适应当我们缩小浏览器窗口时，黄色自动缩小 <section> <article> <style> .part2-content-wrap div { height: 300px; ...

cssTable布局：table布局布局1：高度固定，左边宽度固定，右边自适应 <style> .content-wrap { display: table; height: 100px; width: 100%; } .content-left ...

语法规则可参考：RYF布局1：高度固定，左宽度已知，右边适应 <section> <style> .part2-content-wrap{ display: flex; height: 100px; } ...

CSS2元素背景的显示范围与CSS2.1、CSS3并不相同。在CSS2中，背景的显示范围是指内部补白（padding)之内的范围，不包括边框；而在CSS2.1至CSS3中，背景在格个盒模型中，它是布满整个元素的盒子区域的，并不是从内部补白（padding)开始，只不过边框部分遮住了部分background、但有一点需要注意，当元素的background-repeat为no-repeat时，...

如何给图片增加内阴影？如果你想给图片加入box-shadow属性，你可以先试试。我们可以在img外面套一层div，给·div属性加box-shadow是可以的，但是仅仅这样是不可以的，因为图片比内阴影层级高会覆盖它，所以我们应该修改z-index属性<div class='box-shadow'> <img src='https://image.zhangxin...

首先我们来下一个插件！已经准备好了！！！      密码：n69y下载之后，在谷歌浏览器的设置里面点击更多工具，然后点击扩展程序，然后直接把刚刚下好的插件拖进去（需要点击开发者模式）。这样表明成功了，刷新你的csdn页面，你会发现tmd,那些恶心的广告没有了。 ...

text-align：'center' 这是针对内联元素的，而margin：0 auto 则是针对块级元素的居中方式。而且它们的使用对象不一样。我们看一下如下代码： <div style='text-align:center;width:500px;height:500px;border:1px red solid'> <p>我们交个朋...

参考博客： 张鑫旭我们先来看一下效果：还不错咯，这个主要是利用了css3里面的transform属性。简单介绍一下。总共分成3层，外层div是舞台设置perspective属性，里层div是容器开启transform-style:preserve-3d;我们给里层div里面放入6张图片，然后设置position:absolute,定位到底部。6张图片围成一圈（360度），那么每张图片沿Y方向旋转6...

参考博文：阮一峰Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。开启开启伸缩盒模display: flex;开启伸缩盒模型的盒子称为容器。容器中的包含的元素称为项目。flex布局图片main axis 称为水平的主轴cross axis 称为垂直的主轴设置在容器上的六个属性...

包含块:是视觉格式化模型的一个重要概念，它与盒模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。可以把包含块理解成一个参考系。那么怎么确定包含块的所属关系了，简单的说谁是谁的包含块，谁是谁的参照系。1：根元素所在的包含块被成为初始包含块，在xhtml中根元素是html,对于连续媒体设备，初始包含块的大小等于视口...

转载博主： 浏览器渲染机制我们可能都知道浏览器含有一个渲染引擎，用来渲染窗口所展示的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件，用于显示PDF格式。但是其具体的渲染原理和流程估计也有很多人都不知道或者不清楚吧。这些天研究了一下浏览器的渲染原理，有了些心得，在这里跟大家分享一下，这里只讨论渲染引擎最主...