随笔分类 - CSS
摘要：嵌套中个的子盒子使用了绝对定位，父盒子使用了相对定位。那么子盒子如何居中显示： 1、距离左偏离50% 2、margin-right子盒子宽度的一半 效果：
阅读全文
posted @ 2017-11-07 16:09
var_obj
摘要：static静态定位：默认的定位方式，就是文档流。 absolute绝对定位： 1、元素使用绝对定位之后不占据原来的位置（脱标）。 2、元素使用绝对定位，位置是从浏览器出发。 3、嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。 4、嵌套的盒子，父盒子使用定位，子盒子绝对定
阅读全文
posted @ 2017-11-07 15:16
var_obj
摘要：浮动的环境：当我们有一个大盒子（只设置了宽，没有设置高），里面嵌套着若干个小盒子，为了布局从左到右显示，都设置为浮动。再从外部加一个大盒子的时候，因为上面大盒子内部的子盒子是浮动的，所以它们都是不占位的，这时候大盒子会顶到上面的盒子的位置。 清除子盒子浮动： 1、clear: left | righ
阅读全文
posted @ 2017-11-06 18:13
var_obj
摘要：float：就是在于布局，首先要介绍的是文档流（标准流），之后是浮动布局。 文档流：元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。 浮动布局： 1、float: left | right 2、元素浮动之后不占据原来的位置（脱标） 3、浮动的盒子在一行上显示 4
阅读全文
posted @ 2017-11-06 17:42
var_obj
摘要：1、上下外边距合并，选最大值。 2、两个input标签在编辑中如果换行了，在浏览器中显示的时候会自动增加一些距离。 效果：
阅读全文
posted @ 2017-11-06 11:50
var_obj
摘要：行内元素： 1、margin：0 20px；只可以定义左右。 2、pading：20px 20px 20px 20px；上下左右都有效 例如span： 效果：
阅读全文
posted @ 2017-11-06 11:04
var_obj
摘要：浏览器默认文字大小：16px 行高：是基线与基线之间的距离 行高=文字高度+上下边距 一行文字行高和父元素高度一致的时候，垂直居中显示。 效果： 注释：因为行高的定义是文字高度+上下边距，所以当行高定义的值与父元素一样时，它就会去找上下边距，自然的就会居中。
阅读全文
posted @ 2017-11-06 10:48
var_obj
摘要：1、padding的运用:子div继承父div的宽，子div的padding-left值是不会撑大的。 2、背景图片的运用：不平铺、定位 3、ul本身就是一个盒子，它的高度是li中的字体的默认高度撑起来的。 4、li是ul中的子盒子，padding-left可以控制他们的左边距离。 5、li与li之
阅读全文
posted @ 2017-11-06 10:36
var_obj
摘要：maigin连写： 垂直方向外边距合并: 两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。 注释：上下两个盒子最后的距离不是30px，而是其中设值最大的20px。 嵌套的盒子外边距塌陷： 上面嵌套盒子设置了margin-top:20px，随着发生了父盒子也往下移动了20px。 解决
阅读全文
posted @ 2017-11-04 20:41
var_obj
摘要：padding是盒子内容与边框的距离。 注释：在盒子加上padding之后，例如padding:10px，会造成盒子宽高实际上都增加了10px。 嵌套中的盒子也就是子盒子，如果继承了父盒子的宽，那么不管子盒子如何增加padding-left、padding-right的值都不会撑大自己的宽，高是可以
阅读全文
posted @ 2017-11-02 21:24
var_obj
摘要：CSS中的盒子具有以下几个种重要的属性: 1、border（边框） ：盒子的厚度 2、padding（内边距）：盒子内容距离盒子边框的距离 3、margin（外边距）：盒子边框与其他的盒子的距离
阅读全文
posted @ 2017-11-02 20:54
var_obj
摘要：搜索栏图标： 效果： 视频列表图标： 效果： 购物车图标： 素材： 效果： 在点击购物车图标后背景图片会立马切换到登陆：
阅读全文
posted @ 2017-11-02 17:02
var_obj
摘要：背景经常用到以下属性： 特别注意： 1、background-position如果只写一个值，那么第二值默认是center 2、background-attachment的值是scroll的时，它是相对盒子进行定位的。如果是fixed的话，它是相对于浏览器进行定位。 属性的连写：
阅读全文
posted @ 2017-11-02 16:25
var_obj
摘要：在a标签中运用最多： 1、a:link {color: #FF0000} /* 未访问的链接 */ 2、a:visited {color: #00FF00} /* 已访问的链接 */ 3、a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ 4、a:active {colo
阅读全文
posted @ 2017-11-02 15:28
var_obj
摘要：样式优先级：默认样式<标签选择器<类选择器<id选择器<行内样式<!important 注释：上述代码为了屏蔽样式的层叠性，样式表都是反浏览器渲染的过程书写的，最后还是以标注了!important的标签选择器为为主。 优先级特点: 1、继承的权重为0 2、权重会叠加 注释： 1、在样式表中子元素如果
阅读全文
posted @ 2017-11-02 11:59
var_obj
浙公网安备 33010602011771号