随笔分类 - CSS
摘要：ios 0.5px线可直接画，但是安卓不行，用border:0.5px solid red;显示出来的直接是1px。所以用伪类after（before）和transform属性实现。 1、最初实现0.5px的bottom <div class="bottom-line"> 画0.5px的线 </di
阅读全文
摘要：一、定宽定高： 1、margin 根据已知的宽高写死，不推荐 2、绝对定位 + margin-top + margin-left <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
阅读全文
摘要：CSS隐藏元素的几种方法 1. display:none; 2.visibility:hidden; 3.clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); 4.opacity:0; 5. position: absolute; top: -99
阅读全文
摘要：标准盒模型： box-sizing: content-box; IE盒模型 : box-sizing:border-box; div.style.width :只能取到内联样式的高 rectObject = object.getBoundingClientRect(); rectObject.top
阅读全文
摘要：一、脱离文档流元素的居中 只可用于定宽高元素； 方法一：margin:auto法 方法二：负margin法 父元素设置为：position: relative; 子元素设置为：position: absolute; 距上50%，据左50%，然后减去元素自身宽度的距离就可以实现 top:50%;lef
阅读全文
摘要：圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀），圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进并传播开来，在中国也有叫法是双飞翼布局，它的布
阅读全文
摘要：理解好文档流，有助于我们对css中定位和浮动的理解。什么是文档流呢，加入自己的理解。文档流的定义如下： 网页在解析时，遵循从上向下，从左向右的顺序。 1、从上至上，从左至右的布局。 2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。 文档流，也称为普通流。下面来讲一
阅读全文
摘要：一、什么是Flex布局？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 其中在webkit内核的浏览器中使用时，必须加上-webkit-前缀，以下不再重复说明。 注意，设为Flex布局以后，子元素的float、c
阅读全文
摘要：1. 标准盒子模型： width只是内容的宽度。 元素的总宽度=width + padding*2 +border*2 +margin*2。 IE盒子模型： width=内容的宽度 + padding*2 + border*2。 元素的总宽度=width +margin*2。 2.top top 属
阅读全文
摘要：垂直居中 方法一 这个方法把div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。 实现如图： 能在本身里垂直居中； 优点： container 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时，container 不会被截断 缺点：
阅读全文
摘要：问题：span标签的width和height分别为多少？ 这题考点其实有几个： 1.span标签是行内元素，无法设置宽高的； 2.float会把浮动元素变成块级元素；支持宽高，height:100%;即为，200px，当height为%单位意为：基于包含它的块级对象的百分比高度。所以这里span的h
阅读全文
摘要：不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。这么来记很轻松的呀！不要被下边的吓到了哦~ 所有元素可继承：visibility和cursor。 内联元素可继承：letter-spacing、word-spa
阅读全文
摘要：1.float元素有继承属性：inherit. 2. span{ width:100px; height:100px; background:red; } 文档中不显示，因为span为块状元素，不能设置宽和高。 3. span{ width:100px; height:100px; backgrou
阅读全文
摘要：CSS样式引入 优先级：行内样式 > 内部样式 > 链入外部样式 后两者的优先级主要取决于位置，就近原则。 当选择器只有一个样式时，样式代码写一行即可。 链接伪类 链接的四种状态：未访问 :link；鼠标悬停:hover ；激活:active ;已访问:visited 。 eg. a:link{};
阅读全文
摘要：一、选择框 在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。 语法： 1、当type="radio"时，为单选框； type="checkbox" 时，
阅读全文
摘要：action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 method ： 数据传送的方式（get/post）。 get用于信息获取，是从那个网页获得，post是向那个网页提交数据，其详细区别见此网址： http://www.cnblogs.com/hyddd/arc
阅读全文
摘要：fieldset 元素可将表单内的相关元素分组。 <fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。 当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。其默认格式是设置边
阅读全文
摘要：*{margin:0;padding:0;} body{font-size:14px;} img{border:none;} li{list-style:none;} input,select,textarea{outline:none;} textarea{resize:none;} a{text-decoration:none;}
阅读全文
摘要：无标题文档 慕课网获App Store强力推荐荣登四榜单 发布人：Admin 发布时间：2014-08-01 浏览：5321次 8月伊始，慕课网App即获得了App Store的多个推荐，同时出现在“免费App精选”、“致毕业生”、“学而不倦”以及“轻松学编程”四个榜单中。这款IT编程学习类的App为何如此备受青睐？趣味视频课程、高清画面质感、在线离线随身学习……优质的课程...
阅读全文
摘要：3.10新闻中心制作评测题 01 【慕客访谈用户篇】“有为屌丝”在路上 02 【有奖活动】给父亲的三行书信 03 《程序猿，请晒出你的童年》活动获奖公告 04 【慕课访谈】破茧成蝶——美女程序员的蜕变史 05 【获奖公告】追“球”巅峰，争当“预言帝” 06 【问卷调查】慕课网用户学习情况大调查
阅读全文
浙公网安备 33010602011771号