随笔分类 -  {content:'html-css''}

1 2 3 下一页
前端基本
flex布局完整示例
摘要：先看图；完美的效果 最后，我们直接上代码： 总的来说，这个项目的知识点，还是挺多的，首相是我们布局的划分，你可以理解成，div如何进行嵌套！ 让后，就是利用我们flex 布局的特性来实现我们想要的效果； 还有，就是我们响应式设计的特点，当然少不了我们的ui设计，包括颜色的搭配，空间的合理布局 等等； 阅读全文
posted @ 2017-07-29 14:58 咕-咚 阅读(552) 评论(0) 推荐(1)
flex布局中flex-basis的理解
摘要：flex布局中flex-basis的理解 设置或检索弹性盒伸缩基准值,其实所谓的基准值，就是你的高度或者宽度了，那么到底值宽度还该高度呢； 这个就要取决于你的flex-direction滴呀； 看代码，看图 当然，出了，设置px以外，还可以设置我们百分的数量； 这些效果都还挺不错滴布局效果滴呀； 很 阅读全文
posted @ 2017-07-29 14:56 咕-咚 阅读(954) 评论(0) 推荐(0)
CSS两端对齐的效果；
摘要：ing 阅读全文
posted @ 2017-07-29 12:18 咕-咚 阅读(109) 评论(0) 推荐(0)
关于css各种布局的神奇文章收集
摘要：1. CSS 七种三栏布局技巧 https://zhuanlan.zhihu.com/p/25070186?refer=learncoding 2. 八种创建等高列布局 http://www.w3cplus.com/css/creaet-equal-height-columns 3 CSS 居中布局 阅读全文
posted @ 2017-04-11 20:28 咕-咚 阅读(240) 评论(0) 推荐(0)
BFC
摘要：BFC 阅读全文
posted @ 2016-03-30 11:36 咕-咚 阅读(115) 评论(0) 推荐(0)
css中各种居中的奇技淫巧总结
摘要：css中各种居中的奇技淫巧总结 第一种，在固定布局中比较常用的技巧设置container的margin：0 auto； 第二种（从布局中入手） css html 效果 第三种；单行文字居中 第四种 table布局 也可以改成是我们的div css： html 第五种：translate css 附带 阅读全文
posted @ 2016-03-28 17:51 咕-咚 阅读(569) 评论(1) 推荐(0)
vertical-align的理解
摘要：vertical-align的理解 定义和用法 vertical-align 属性设置元素的垂直对齐方式 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐 也就是说 它只是个适用行内元素的属性；而如果将元素的display设置为inline、table-cell的话，就可以使用了 css 阅读全文
posted @ 2016-03-28 17:46 咕-咚 阅读(374) 评论(0) 推荐(0)
关于各大浏览器的兼容问题解决方案（总结）
摘要：关于各大浏览器的兼容问题解决方案（总结） A. 渲染相关：和样式相关的问题，即体现在布局效果上的问题。 1.innerHTML,innerText,textContent; 2.关于透明度的问题； B. 脚本相关：和脚本相关的问题，包括JavaScript和DOM、BOM方面的问题 1.在获取事件对 阅读全文
posted @ 2016-03-25 12:36 咕-咚 阅读(294) 评论(0) 推荐(0)
offset/client/scroll一些总结
摘要：offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidth 5.offsetHeight 先看代码示例： 效果图； 1.offset-width和offse 阅读全文
posted @ 2016-03-25 10:24 咕-咚 阅读(358) 评论(0) 推荐(0)
深入css中的margin
摘要：深入css中的margin 第一：margin-top css代码（元素没有任何定位的情况下，并且元素默认为block） html 效果：（原因，div默认的是我们块级元素，它是独占一行的，当margin-top的时候，整个行，都会移动，再看看我们margin-left 就会明白了） ps：如果元素 阅读全文
posted @ 2016-03-24 21:04 咕-咚 阅读(264) 评论(0) 推荐(0)
css中的盒子模型
摘要：css中的盒子模型 css中的盒子模型，有两种，一种是“标准 W3C 盒子模型”，另外一种是IE盒子模型。 1.w3c盒子模型 从图中可以看出：w3c盒子模型的范围包括了：margin，border，padding，content； 重点：content不包含其他的部分！ 2.IE盒子模型 从上图中 阅读全文
posted @ 2016-03-24 20:55 咕-咚 阅读(155) 评论(0) 推荐(0)
cssHack
摘要：cssHack 不同的浏览器，比如Internet Explorer 6，Internet Explorer 7，Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样， 得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时 阅读全文
posted @ 2016-03-24 16:16 咕-咚 阅读(245) 评论(0) 推荐(0)
css样式优先级
摘要：css样式优先级 如果外部样式，内部样式和内联样式同时应用在同一个元素，就使用多中样式， 一般情况下： 外部样式《内部样式《内联样式（也叫行间样式） 但是顺序也是很重要的滴呀； 如果外部样式放在了内部样式的后面，则内部部样式将别覆盖； 选择器的优先权 解析： 1.内联样式（行间样式）的权值最高：10 阅读全文
posted @ 2016-03-23 16:11 咕-咚 阅读(399) 评论(0) 推荐(0)
前端面试题（html篇）
摘要：前端面试题（html篇） 阅读全文
posted @ 2016-03-23 16:10 咕-咚 阅读(120) 评论(0) 推荐(0)
响应式图片设计
摘要：响应式图片设计 阅读全文
posted @ 2016-03-22 11:30 咕-咚 阅读(126) 评论(0) 推荐(0)
响应式导航菜单
摘要：响应式导航菜单 阅读全文
posted @ 2016-03-22 11:29 咕-咚 阅读(123) 评论(0) 推荐(0)
meta的学习记录
摘要：meta的学习记录 最近再学响应式的布局，就先来总结一下我们的viewport。 什么是viewport呢？ 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽， 这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的 阅读全文
posted @ 2016-03-21 17:56 咕-咚 阅读(138) 评论(0) 推荐(0)
css中的媒介查询
摘要：css中的媒介查询 阅读全文
posted @ 2016-03-21 10:46 咕-咚 阅读(134) 评论(0) 推荐(0)
line-block代替float布局；
摘要：line-block代替float布局； 我们先看看float的一些特性(特征) 当我们改变浏览器的大小会出现这样的效果： 或则这样： 有时候，我们希望，以第一排最高的元素为换行基准时，我们就可以使用display：inline-block属性了滴呀 效果图 不能发现上图中有一个bug，那就是每个元 阅读全文
posted @ 2016-03-20 12:12 咕-咚 阅读(373) 评论(0) 推荐(0)
inline-block元素的空白间距
摘要：inline-block元素的空白间距 html代码 效果: 这种空白在要求不是特别严格的时候，其实无伤大雅，但又的时候我们就需要清除这些空白 清除的方法也是多种多样，我这里举出几个常用呀； 元素之间出现空白的原因是标签端之间的空白，各种方法去掉 方法一：改变html的布局方式 方式二：margin 阅读全文
posted @ 2016-03-19 14:47 咕-咚 阅读(147) 评论(0) 推荐(0)

1 2 3 下一页