前端之css
关注
分享
扫一扫
qq_597221342
这个作者很懒，什么都没留下…
展开
-
css之堆叠顺序
css之堆叠顺序1.background/border 2.-z-index 3.block 4.float 5.inline/inline-block 6.z-index:auto也可以看做z-index:0,不依赖z-index的层叠上下文(absolute) 7.正index以上顺序有小到大排列原创 2017-03-14 16:54:00 · 1063 阅读 · 0 评论 -
前端之css-BFC
BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC布局规则： 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的...转载 2019-03-01 10:43:45 · 260 阅读 · 0 评论 -
前端之css预编译
scss是sass3的最新版本格式，兼容sass及css语法，其主要特点为：1.嵌套 结构性更加清晰，效率高 2.变量 样式重用 3.模块 @import css 4.混合指令 定义宏代码重用原创 2017-12-15 09:52:19 · 2049 阅读 · 0 评论 -
前端之css
常见元素属性 1. 高宽尺寸 高宽尺寸 高度尺寸：height、max-height、min-height 文本 Color:设置文本颜色 Text-indent:文本缩进（可以为负值，常用单位:px、em） Text-align：文本水平对齐方式，属性值：left | center | right | justify Text-decoration:属性值：none | underli原创 2017-04-20 15:12:26 · 426 阅读 · 0 评论 -
margin重叠
margin重叠 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 margin值计算方法如下： a、全部都为正值，取最大者； b、不全是正值，则都取绝对值，然后用正值减去最大值； c、没有正值，则都取绝对值，然后用0减去最大值。解决方法： 1.外层元素padding代替 2.内层元素透明边框 border:1px原创 2017-03-14 16:08:29 · 586 阅读 · 0 评论 -
前端之css-flex
Flex布局 常用属性说明Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局 .box{ display: flex; }行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; }设为 Flex 布局以后，它的所有子元素自动成为容器成员，子元素的flo原创 2017-09-17 21:45:53 · 299 阅读 · 0 评论 -
前端之css-垂直水平居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>垂直水平居中</title> <style type="text/css"> * { margin:原创 2017-11-01 16:51:57 · 182 阅读 · 0 评论 -
css之小技巧
**css之小技巧**1.margin的计算规则 margin百分比都是相对于容器的宽度计算的， 例如：img{margin:10%} div{width:600px;height:200px;}/*父元素*/ 图片位于上60px，左60px2.绝对定位元素的百分比margin 例如：img{margin:10%；position:absolute} 图片位于上102.4px，距离祖先元素的距离3原创 2017-03-14 15:48:50 · 223 阅读 · 0 评论 -
前端之css之单位
1.百分比默认元素高度设置为100%，以自身高度为准，如果父元素设置宽度，子元素宽度为父元素宽度 2.remrem相对于html元素的font-size属性的大小而变化，需要由js代码动态控制原创 2017-11-07 11:31:57 · 309 阅读 · 0 评论 -
前端之css隐藏
隐藏元素的十种方法/*font-size: 0;方法一*/ /*opacity: 0;方法二*/ /*position: absolute;方法三 left: -9999px;*/ /*text-indent: -9999px;方法四*/ /*visibility: hidden;方法五*/ /*display: none;方法六*/ /*transform: translate(-9999px);原创 2017-11-07 10:27:36 · 248 阅读 · 0 评论 -
前端之css-Hack
cssHack 是为了解决不同浏览器显示不同从而是css代码兼容不同的浏览器 “-″减号是IE6专有的hack “\9″ IE6/IE7/IE8/IE9/IE10都生效 “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack “\9\0″ 只对IE9/IE10生效，是IE9/10的hackIE6能识别下划线”“和星号” * “，IE7能识别星号” * “，但不能识别下划线”“原创 2017-10-19 14:53:19 · 257 阅读 · 0 评论 -
前端之css遇到的问题
一、:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型 二、:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素例子： p:nth-child(1)的情况：没有背景变红色 / 查找p的父元素的第一个子元素 且为p（找不到）故没变色 */ p:nth-of-type(1)的情况：第一个段落变红原创 2017-04-19 17:17:26 · 256 阅读 · 0 评论 -
前端之css - 回流与重绘
回流与重绘定义: 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。 当render tree中的一些元素需要更新属性，而这些属...原创 2019-03-01 10:57:23 · 545 阅读 · 0 评论