html、css
then啥
这个作者很懒,什么都没留下…
展开
-
圣杯布局
<div class="main"> <div class="main-content"> main </div></div><div class="left"> left</div><div class="right&quo原创 2018-07-14 13:54:00 · 142 阅读 · 0 评论 -
margin重叠问题
相邻垂直元素<div class='a'>a</div><div class='b'>b</div>.a{ width:100px; height:100px; background-color: #ccc; margin-bottom:30px;}.b{ width:100px; h...原创 2018-11-19 11:29:28 · 177 阅读 · 0 评论 -
使用border画正方形、三角形等
<div></div>div{ width:0; border-top:100px solid blue; border-right:100px solid red; border-bottom:100px solid green; border-left:100px solid orange;} 需要三角形只需将对应的...原创 2018-11-22 09:32:46 · 966 阅读 · 0 评论 -
css手动实现一个栅格布局
利用css3中的新特性对不同分辨率的终端进行页面适配:1.<meta name="viewport" content="width=device-width, initial-scale=1.0">2.网格布局:整体视图区域被分为12列,每列占约8.33%。一行内各个小div的col之和为123.媒介查询:@media 媒介查询 整体实现方式:以一行分为三部分为例。...原创 2018-07-30 19:20:13 · 2395 阅读 · 0 评论 -
使用flex实现一个固定在底部的footer
要求:实现一个footer页脚,内容不足一页时在底部显示,当内容超过一屏高度时依然在内容底部实现要点:html要设置height为100% body要设置min-height为100% 必须直接将内容区包裹在body内,且display: flex; 给需要占满整屏的元素添加flex: 1; <!DOCTYPE html><html lang="en"&...原创 2018-11-23 21:29:54 · 7933 阅读 · 1 评论 -
性能优化(《建设高性能网站》总结)
1.减少http请求图片地图(指定area) 合成雪碧图(限定显示区域,再依次移动图片),现在常用svg或icon-font 内联图片(src属性内写入base64文件信息) 合并js和css文件2.设置CDN(使用户就近访问服务器上的静态资源)3.设置长久的缓存(max-age缓存时间或expires过期时间)4.压缩组件(在http请求中设置Accept-Encoding: gzi...原创 2018-11-22 20:33:55 · 177 阅读 · 0 评论 -
原生js实现添加删除和查询元素的class
<p id='p' class='dec'>hello</p>.active{ color:red;}.bigger{ font-size:30px;}.dec{ text-decoration:underline;}let p=document.getElementById('p');p.classList.add('ac...原创 2018-11-22 23:34:30 · 243 阅读 · 0 评论 -
如何判断该使用padding或margin、id或class、div或语义化
padding或margin二者角色定位不同:padding在内容和边框之间添加空白以便于阅读,margin在元素间添加空白,使页面布局更加清晰 padding可以被填充背景色或背景图,margin无此效果 class或id在充当选择符时,class和id的区别在于优先级;id的特别作用:关联label和input(for id)、页面定位(a href) 因此,id可用于实现行为与...原创 2018-11-18 10:13:25 · 142 阅读 · 0 评论 -
css布局、flex、响应式、grid
一、常见布局类型表格布局:原始布局方式,利用表格的特性展示布局,没有页面逻辑且大量冗余代码,现在几乎不用 固定宽:常用960px,移动端缩放表现差,不友好 流式:使用float实现动态浮动,各分辨率下样式无法保证 flex弹性盒子:简洁且强大,主流使用 css栅格布局(grid):将网页分成一系列行和列,将对应内容放入对应区域;新属性兼容性差二、flex弹性盒子:1.组成部分:弹...原创 2018-11-24 14:32:48 · 531 阅读 · 0 评论 -
css隐藏元素的方法
仍在文档流:div{ visibility: hidden; opacity: 0; clip-path: circle(0);} clip-path可以创建一个基于当前元素的剪切区域不存在文档流:div{ display: none;}div{ position: absolute; margin-left: -999...原创 2018-11-21 10:25:12 · 101 阅读 · 0 评论 -
行内元素和块元素
块元素:前后有换行 可以设置margin和padding行内元素:前后无换行 无法设置上下margin,但可以设置padding img标签是个例外,可以在行内拥有上下margin若想使行内元素也可以设置上下margin,可使用display: inline-block...原创 2018-11-21 10:01:54 · 97 阅读 · 0 评论 -
回到顶部按钮 页面加载时会闪烁
解决办法:1.设置默认display:none;2.在js中通过jquery的链式操作先修改其css $(".back_top").css("display", "block").fadeIn();原创 2018-07-14 10:14:15 · 449 阅读 · 0 评论 -
去除button默认样式
border: 0;background-color: transparent;outline: none;原创 2018-07-14 10:01:00 · 35361 阅读 · 4 评论 -
定位
相对对位:relative相对于自身原本所在位置,通过上右下左设置偏移值进行移动,原有位置保留。绝对定位:absolute相对于最近的一个position不为static的元素定位,通过上右下左偏移,原有位置消失,脱离文档流。固定定位:fixed相对于窗口定位,移出文档流,上右下左偏移。<!DOCTYPE html><html><head...原创 2018-07-13 13:02:08 · 111 阅读 · 0 评论 -
有无box-sizing的区别
box-sizing:border-box;有此项则该元素的元素的width包含padding和border的宽,如果无此项则元素实际大小会在width基础上再加padding和border宽度。.div1 { width: 300px; height: 100px; border: 1px solid blue;}.div2 { width: 300...转载 2018-07-26 21:49:36 · 181 阅读 · 0 评论 -
src和href的区别
href=‘xxx‘ 用于建立与外部资源的链接,与文档渲染同时进行,不影响页面加载;src是source的缩写,所在位置将被替换为其指向的文件内容,常见的如js和image,页面遇到此类元素会暂停渲染直到src内容加载并执行编译完成,再加载后续资源。故script标签常放在body最下方...原创 2018-09-02 07:54:48 · 2193 阅读 · 0 评论 -
marquee标签
参考:https://www.cnblogs.com/lovablebox/archive/2007/04/09/705277.html属性介绍:scrollamount=num:移动速度direction:移动方向behavior:移动方式转载 2018-10-15 12:24:23 · 760 阅读 · 0 评论 -
响应式:媒介查询的方式及常见测试特性
link标签<link rel='stylesheet' type='text/css' media='screen and (orientation:portrait) and (min-width:800px)' href='portrait-screen.css' /> css文件内引入其他样式表@import ulr('phone.css') screen an...原创 2018-11-11 10:42:22 · 114 阅读 · 0 评论 -
ie盒子与w3c盒子
ie盒子:width包含padding和borderw3c标准盒子:width只包含内容原创 2018-11-08 12:29:33 · 446 阅读 · 0 评论 -
background-image样式和img标签如何选择
background-image的优势:节省img标签所占用的空间 便于布局(例如将文字布局在图片上,直接使用padding调整即可,使用margin会导致边距冲突)什么情况下应该使用img标签:由于搜索引擎不搜索css,所以当图片可以帮助网页获取流量时,应该使用img标签,且同时设置alt属性对图像进行说明 ...原创 2018-11-23 12:44:23 · 2140 阅读 · 0 评论