css
关注
分享
扫一扫
景洪在编程
不疯魔不成活
展开
-
深入理解css之 —— absolute定位
这一篇主要总结一下position属性： - absolute绝对定位 - relative相对定位 position这个属性定义建立元素布局所原创 2017-05-22 13:19:41 · 712 阅读 · 0 评论 -
table-cell实现大小不固定元素的垂直居中
代码实例：<!DOCTYPE html><html><head> <title>测试</title> <meta charset="utf-8"> <style type="text/css"> .container{ display: table; width: 300px; height: 2原创 2017-08-02 15:41:04 · 1754 阅读 · 0 评论 -
[复习］清除浮动的几种方法总结
为什么需要清除浮动前面有一篇博客中有提到关于”浮动塌陷”的描述http://blog.youkuaiyun.com/github_38861674/article/details/77427309 由于包含元素里面的元素都设置为浮动，导致包含元素的高度塌陷为0，如下图所示： 这种塌陷进而会产生如下后果：包含元素的背景和边框不能生效margin 和padding值不能生效，特别是上下的margin和pad原创 2017-08-20 17:02:58 · 440 阅读 · 1 评论 -
复习css布局模型
css布局模型浏览器从服务器读取数据，保持页面元素的原始顺序，是一个顺序，然后按照文档流的顺序进行解析； css布局模型有：流动模型flow、浮动模型float、层模型layer；流动模型： 流动模型基于标准文档流进行布局，除了绝对定位、固定定位之外、浮动之外，任何元素都将默认为流动布局模式；块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%原创 2017-08-20 11:09:18 · 399 阅读 · 0 评论 -
复习DOM相关操作
一、DOM节点创建DOM节点（Node）最主要的三类为：Element，元素节点Attribute，属性节点Text，文本节点DOM节点创建最常用方法：document.createElement()document.createTextNode()var node1 = document.createElement('div');var node2 = document.creat原创 2017-08-21 14:05:45 · 277 阅读 · 0 评论 -
padding的使用技巧（持续更）
创作一个和宽度相等的正方形盒子html代码： <div class="box-wrapper"> <div class="box"> </div> </div>css代码： .box-wrapper{ width: 200px; background:yellow; } .box{原创 2017-08-06 08:28:01 · 832 阅读 · 0 评论 -
box-sizing的应用
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。box-sizing: content-box:border和padding不计算入内容width之内,box-sizing:padding-box，padding计算入内容width内,box-sizing:border-box:border和padding计算入内容w原创 2017-08-03 18:04:57 · 329 阅读 · 0 评论 -
flex布局实现小标题
html代码： <div class="title"> <div class="line"></div> <div class="text">这是一条小标题</div> <div class="line"></div> </div>css代码：(采用了stylus的书写格式）.title display: flex width: 80% margin原创 2017-08-01 21:47:42 · 431 阅读 · 0 评论 -
CSS Sticky footer完美底部布局
html结构：<div class="container"> <div class="content-wrapper> <div class="content">内容区域，可随机长度</div> </div> <div class="close"><div><div class ="close">关闭图标</div>始终再底部.css代码：.containe原创 2017-08-01 16:23:59 · 4452 阅读 · 0 评论 -
利用伪类清除浮动
給类名为clearfix的元素清除浮动<div class =''clearfix''></div>.clearfix:after{ content:”.”; display:block; height:0; clear:both; visibility:hidden; }原创 2017-08-01 15:48:46 · 583 阅读 · 0 评论 -
一像素边框的实现
給这个div添加底部一像素边框，<div class='box border-1px'>//首先添加普通的底部一个像素的边框.box position: relative &:after content: ' ' display: block position: absolute bottom: 0 left: 0 width: 100%原创 2017-07-30 19:05:56 · 1208 阅读 · 0 评论 -
css布局的小知识点积累（持续更）
<### 1、 行内元素的注意点只能设置margin-left,margin-right,padding-left,padding-right; 不能设置他们的top，bottom值 2、 多余的文字显示省略号在web开发过程中，常常会遇到要让布局中的某些文本根据宽度来显示，如果超过最大宽度仍然显示不完的，就显示为省略号的情况，添加下面的CSS样式表就能实现这种效果，但是这种效果只适用于单行显原创 2017-08-09 14:54:06 · 338 阅读 · 0 评论