css
关注
分享
扫一扫
文章平均质量分 58
Jancy1072
这个作者很懒，什么都没留下…
展开
-
CSS布局之流动模型&&margin负值和百分比
在网页中，元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer）流动模型默认的网页布局模式。文档流将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。 有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。 但是在IE中浮动元素也存在于文档流中。块级元素和行内元素（或内联元素）块状元素都会在所处的包含原创 2017-02-27 23:51:12 · 446 阅读 · 0 评论 -
css之margin
1.可视尺寸clientWidth:contentWidth+paddingWidth-滚动条宽度 占据尺寸outerWidth(true):contentWidth+paddingWidth+borderWidth+marginWidth 2.margin影响元素的clientWidth width为auto的普通块级元素，不是float、absolute、fixed、inline、tabl原创 2017-03-13 23:26:42 · 642 阅读 · 0 评论 -
css之padding
1.padding影响元素尺寸： 对于block元素： - box-sizing:border-box;padding值大于宽度值，会影响元素宽度 - width非auto，padding值会影响元素宽度 - box-sizing:border-box;同时padding值没有大于宽度值或者width:auto,padding值不会影响元素宽度 对于inline元素： 水平padding原创 2017-03-13 21:54:47 · 947 阅读 · 0 评论 -
圣杯布局和双飞翼布局
圣杯布局三列布局，左右固定宽度，中间自适应，利用float、margin负值、position:relative实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局和双飞翼布局</title> <meta name="keywords" content="圣杯布局 双飞翼布局"原创 2017-03-24 23:44:53 · 382 阅读 · 0 评论 -
css动画和过渡
transform转换translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。 scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 scaleX(n) 定义 2D 缩放转换，改变元素的宽度。 sca原创 2017-03-24 23:29:21 · 397 阅读 · 0 评论 -
替换元素
替换元素浏览器根据其标签的元素与属性来判断显示具体的内容。<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。 替换元素一般有内在尺寸，所以具有width和height，可以设定。例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度。 对于表单元素，浏览器也有默认的样式，包括原创 2017-04-08 21:26:28 · 605 阅读 · 0 评论 -
伪类和伪元素
伪类一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。 :active :focus :hover :link :visited :lang UI状态元素伪类选择器 :disabled :enabled :checked 结构性伪类选择器： :nth-child nth原创 2017-04-08 20:49:14 · 573 阅读 · 0 评论 -
css之border&三角形
1.border-width不支持百分比。那样不符合语义。同理，outline、box-shadow、text-shadow也不支持百分比 2.border-width支持关键字，thin（1px）、medium(3px)（默认）、thick(5px) 3.border-style为double要大于等于3px，才能有效果。3像素时1+1+1，4像素时1+2+1。 4.border-style原创 2017-03-12 23:07:06 · 499 阅读 · 0 评论 -
css之vertical-align
vertical-align起作用有前提条件：应用于inline水平以及’table-cell’元素。 inline水平： inline: <img>, <span>, <strong>, <em>,未知元素, … inline-block:<input>(IE8+), <button>(IE8+), … ‘table-cell’元素：table-cell: <td>默认状态下，图片、按钮、原创 2017-03-06 14:16:41 · 315 阅读 · 0 评论 -
css之reset
不要使用不要使用* { margin: 0; padding: 0; } 不要完全照搬网上下载来的reset.css。要根据具体需求，适量裁剪和修改后再使用。没用到的元素可以直接拿掉，减少代码量，避免影响渲染性能。我的版本body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li,pre, fieldset, lengend, bu原创 2017-03-09 17:02:22 · 355 阅读 · 0 评论 -
CSS布局之BFC
BFC：Block Formatting Context，块级格式化上下文。它是一块渲染区域，有一套渲染规则，它决定了子元素如何定位，以及和其它元素的关系与相互作用。会生成BFC的元素：根元素float为left或rightposition为absolute或fixedoverflow不为visibledisplay为inline-block，table-cell，tab原创 2017-03-02 21:56:19 · 288 阅读 · 0 评论 -
css清除浮动/闭合浮动
本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。 暴力的方法：#main{ background-color: green;}.left{ background-color: red; height: 500px; wi原创 2017-03-02 20:04:12 · 392 阅读 · 0 评论 -
css布局之浮动模型&&左右两栏自适应布局
一个元素浮动时，其他内容会“环绕”该元素，浮动元素要设置一个width。浮动元素会自动生成一个块级框（行内元素会转成块级元素）。浮动元素规则浮动元素不能超过包含它的块的左右内边界。 浮动元素之前如果出现浮动元素，则必须在该浮动元素之后（不能覆盖 )。如果浮动元素加一起太宽，会自动向下。垂直方向要顶头不能超过块区域，同样不能超过在它上面的浮动元素。浮动元素脱离文档流，不占据空间。不浮动的块级元素原创 2017-02-28 00:25:32 · 2370 阅读 · 0 评论