大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

css 实现矩形四个边角加粗

css 实现矩形四个边角加粗 1、工具/原料 html css 2、具体实现 效果图 html代码 css实现矩形边角加粗 css代码 body{ display: flex; flex-direction: column; align-items: center; width: 400px; height: 200px;main span:nth-child(1){ position: absolute; left: -5px; top: -5px; padding: 15px; border-style: solid; border-color: rebeccapurple; border-width: 5px 0 0 5px; bottom: -5px;

左侧固定宽度 右侧自适应

display: table-cell;left{ width: 200px; background-color: slateblue; background-color: blueviolet;footer{ height: 100px;注意: html代码中,固定宽度的div 要放在自适应宽度的div前面 CSS代码: body{ color: #fff;前端知识宝典 中第19条有介绍calc CSS代码: body{ color: #fff; width: -webkit-calc(100% - 200px);wrap{ position: relative;

服务器版本更新与客户端不同步的问题

服务器版本更新与客户端不同步的问题 http状态304表示请求的是缓存,200表示是从服务器请求的。 3张不同的照片,第一次访问,总共请求了4次, Insert title here 然后我们刷新一下,发现200的变成了304,因为图片已经缓存在了本地。 以下是3张相同的image1照片,明显都是存在了本地缓存中 加上时间戳目的是为了解决项目更新代码不同步的问题。同理CSS

CSS中的BFC

页面展示 相邻兄弟元素margin重叠问题 上图两个P元素之间距离应该为200px,然而实际上只有100px,发生了margin重叠。bug如何修补 只需要在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。代码 p{ color: #fff;wrap{ overflow:hidden; float: left; height: 200px;

background-size

background-size background-size规定背景图片的尺寸 值: 默认值是auto 自定义的长度和宽度——设置背景图片的宽度和高度,如果只设置一个,另一个会被设置为auto 自定义百分比 cover——将图像扩展至能把整个区域覆盖掉,而多余的图片部分会隐藏 contain——将图片按照宽或者高进行缩放,使整个图片能在区域里显示 background-size .content{ width: 200px; background: url(images.jpg) no-repeat;

Flexible box 伸缩盒的 flex 属性

Flexible box 伸缩盒的 flex 属性 声明:此文章内含转载内容,点击查看。如有侵权24小时内删除。联系QQ:1522025433 语法:flex:none | '?flex :nth-child(1){flex:1 1 300px;flex :nth-child(2){flex:2 2 200px;background-color:#eee;} #box2 li:nth-child(1){-webkit-flex:1 0 100px;} #box3 li:nth-child(3){-webkit-flex:1 2 400px;

如何获取swiper中当的索引值

width: 100%; font-size: 20px; height: 200px;swiper1', { slidesPerView:4, // 轻拍事件:点击slide会触发 onTap:function(){ var navIndex = swiper1.clickedIndex;swiper-slide').addClass('active').removeClass('active');swiper2', { // 当slide开始滑动时触发的事件 onSlideChangeStart:function(){ // 获取当前滑动页的下标 actIndex = swiper2.activeIndex; swiper1.slideTo(actIndex); }, onSlideChangeEnd:function(){ var num=swiper2.activeIndex console.log(num) } })

JS事件冒泡详解

function $(id) { return document.getElementById(id); } // 点击box2会继续弹出box1及body,这是冒泡造成的,所以要阻止冒泡 $("box2").onclick = function (e) { var e = e || window.event; // if (e.stopPropagation) { // e.stopPropagation(); // } else { // e.cancelable(); } $("box1"). // } else { // IE // e.cancelBubble(); } document.body.onclick = function () { alert("body");

CSS清除float浮动的4种方法

CSS清除float浮动的4种方法 css3.png 在开发网页的时候经常需要用到各种浮动,此时便需要及时的清除浮动,否则将会导致布局出现问题,所以本人在网上整理了一下CSS清除float浮动的各种方法,以下4种方法,本人亲测有效: 方法一:after伪元素(推荐) 废话不多说,直接上代码: CSS: . width: 300px; height: 50px; background-color: #3b73b9; } HTML : 给父元素定高. overflow: hidden;

VUE+WebPack游戏设计:实现碰撞检测和动画精灵

VUE+WebPack游戏设计:实现碰撞检测和动画精灵 上一节,我们完成了平行背景滚动的效果,这一节我们要在变化背景的前方加入精灵动画以及检测碰撞。我们现在背景的前方加入一个奔跑的小人,打开gamescenecomponent.vue,在style标签里添加代码如下: #player { position: absolute; bottom: 100px;} to {background-position: -200px; -webkit-animation-timing-function: steps(2, end);

HTML Table边框

HTML Table边框 效果 效果图 html row 1, cell 1 row 1, cell 2 row 1, cell 2 row 2, cell 1 row 2, cell 2 row 2, cell 2 row 2, cell 1 row 2, cell 2 row 2, cell 2 CSS // 设置宽高 去除td的边框 td{ border-top:0; height: 200px; width: 200px; } // 去除最后一列的右边框 tr td:last-child{ border-right: 0; } // 去除最后一行的下边框 table tr:last-child td{ border-bottom: 0;

变换 transform

} 第一种: X轴、Y轴分开写 body:hover div{ transform: translateX(300px);png 注意:transform:translate(200px);png 4、变形/斜切 skew skew当中接受的也是一个旋转角度,如40deg skewX() skewY() skew(30deg,30deg)第一个值是X轴的斜切角度,第二个值是Y轴的斜切角度 那么说完这四种变换,他们连写方式是怎样的呢? 按照下面这个顺序来写: body:hover div{ transform:translate(200px,0) rotate(45deg) scale(1.5) skew(15deg,15deg);

Web之旅—— 了解CSS(6)

Web之旅—— 了解CSS(6) 一、CSS用来做什么? CSS(层叠样式表)可以控制HTML文档my_div{ width: 200px; /*设置宽度200px*/ height: 400px; /*设置背景色yellow*/ } 这是一个DIV,将通过CSS来控制其宽、高、背景色。 3、引入外部样式(1) CSS演示 @import "CSS.css";

css设置垂直居中

html代码: Text here (1) 行内文本垂直居中 css代码: . line-height: 100px;child { width: 500px; transform: translateY(-50%); } 第二种方法(不使用transform):css代码: . width: 100%;child { display: table-cell; } (4) 已知高度的块级元素垂直居中html代码: sddvsds dfvsdvds css代码: #parent { height: 300px; } #child { height: 40px; margin-top: 120px; /*这个只为父元素的高度减去这个元素的高度除以二计算得到的*/ border: 1px solid #ccc;

JS如何获取元素样式?

上篇文章讲到如何设置元素样式,本文将继续给大家分享如何获取元素样式。 一、style,只获取标签上定义的行内样式 在这里讲的style用法包括三个:style、style.cssText和style.getPropertyValue(),直接看个例子吧: /*CSS*/ #box{ width: 200px;//JavaScript var box = document.getElementById("box"); // "" console.log(box.style.getPropertyValue('background-color')); console.log(rules[0]. // "100px" console.log(getComputedStyle(box).

详解css盒模型与外边距重叠

注:padding、border 和 margin 区域都包括 top、right、bottom、left 四部分。如图所示("LM" 代表 left margin,"RP" 代表 right padding,"TB" 代表 top border……)。 2.边界 上述四个区域(content, padding, border, margin)分别有他们的边界,细化来说, 每个区域都有top, right, bottom, left四个边界.C这个div的高度不是auto,所以他的margin-bottom和他的子元素B的margin-bottom不相邻,因此,不会发生重叠,依然只有50px;

css边距重叠的解决方案

css边距重叠的解决方案 ** css防止边距重叠的方法 ** 今天整理了一下用css防止边距重叠的几种方法先假设一组dom结构 通常情况下,如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果,然而这其实不是我们想要的结果,我们只想对子元素设置margin,那么现在我们应该怎么做呢?(1) 给父元素设置边框 .child { width: 200px;parent { overflow: hidden; display: inline-block;

面试--css实现元素的水平和垂直居中

面试--css实现元素的水平和垂直居中 针对单行文本 使用line-height .height: 200px;text-align: center;vertical-align:vertical 属性是针对兄弟级别的元素设置的其中.block也可以使用 img:after或者:before来代替 针对父元素和子元素的高度都未知情况下 定位+transform .height: 400px;position: relative; top:50

左定宽右自适应宽度并且等高布局

左定宽右自适应宽度并且等高布局 要求: 左列定宽,右列自适应; 左右两列等高且自适应; 右列优先渲染; 对于第一点很好实现,实现的方法也不唯一。 对于实现两列等高,则需要实现最小高度的设置。如下: min-height: 200px; width: 200px; } 效果图如下: 第二步 我们看到右列的部分内容被左列覆盖掉了。 所以,接下来需要让被覆盖的内容显现出来 #container{ margin-left: 200px;

要准确裁剪背景图片先要准确渲染,background-origin与background-clip

box3 { width: 200px; border: 20px dotted #ccc; padding: 30px; background-size: 100% 100%; margin-top: 50px;box1 { background-clip: border-box;box2 { background-clip: content-box;图片: 以上就是对background-origin和background-clip的解述,我们在裁剪背景图片做某些效果时就一定得准确的先渲染。如果以上那些地方理解有误还请指点,笔者会虚心学习。