css

css

选择器

• #id
• .class
• *
• h1.class 交集选择
• h1>img 直接子代
• h1+p紧邻,同父的下一个 ~所有兄弟
• :first-child 元素的直接第一个子元素
• :last-child 元素的直接最后一个子元素
• :nth-child(n)指定的,even偶数odd奇数
• :first-of-type 只计算当前标签,其余同上
• :last-of-type
• :nth-of-type
• a[href][type]
• [title = "title"]
• [attribute]
• [attribute = value]
• [attribute ~= value]包含value
• [attribute |= value]开头value且整个单词或加-
• [attribute ^=value]开头value的所有
• [attribute $= value]结尾value的所有
• [attribute *= value]包含value所有
• :not(选择器)否定伪类选择
• 优先级权重
  • 内联样式    1000
  • id选择器     100
  • 类和伪类    10
  • 元素选择器 1
  • !important最高优先级(避免)
  • 相同后覆盖
  • 并集选择器单独算优先级
  • 低级累加不会超过高级

引用

• <link rel = "stylesheet" type = "text/css" href = "mycss.css" />

背景(不继承)

• background
• background-color:
• background-image:url(/images/image.jpg)
• background-repeat:repeat-x  repeat-y  no-repeat
• background-position:(center  top组合9位置)  px  %(默认0 0)
• background-attachment:fixed   固定图片背景(上面的position就相对于浏览器了,类fixed,常用设置给body)
• background-size
• 所有背景都是不继承的,默认透明
• 背景覆盖content,padding

文本

• text-indent:  块级首行缩进
• text-align:center  left  right  justify
• word-spacing:字间隔
• letter-spacing:字母间隔
• text-transform:uppercase大写  lowercase小写  capitalize首大
• text-decoration: none  overline  underline  through-line
• direction:ltr  rtl  书写方向

字体

• color:
• font-size: 1em = 1字体大小(默认16)
• font-weight: bold  100~900(也许不一定准,精度不够)
• font-family:字体
• font-style:italic斜体  oblique倾斜
• font:30px "微软雅黑" //后两个必写(注意默认行高问题)

链接

• <a href="http://www.baidu.com"></a>

 列表

• list-style:
• list-style-type:none  square
• list-style-image: url(image/image.jpg)
• list-style-position:outside(默认)  inside

 表格

• border: 1px solid blue
• border-collapse:collapse去除重复边框
• border-spacing:设置表格间距离(collapse设置了自动失效)

 轮廓

• outline:
• outline-color:
• outline-style:
• outline-width:

框模型

• 内容
• 内边距
  • 背景包含内容和内边距
  • padding: %相对于父元素的宽度百分比
• 边框
  • border-width:
  • border-style:
  • border-color:
• 外边距
  • 透明
  • margin:auto
    • margin-left(right)的auto左(右)边距最大
    • margin-top(bottom)的auto为零
    • margin的auto居中
  • 块级的相邻垂直外边距取两者最大,定位,浮动,行内不受影响
    • 兄弟相邻取最大
    父子相邻,子会传给父
    • 设置父的border和padding可避免
    • 所以尽量设置父亲的padding不用子的margin
• 浏览器会为很多元素自动设置margin和padding    *{}性能不太好
• visibility
  • hidden(仍占位)
• display
  • none(不占位)
  • inline  无宽高,有水平内外边距,边框(影响布局),有竖直内边距边框(但不影响布局),无竖直外边距,相当于字,注意多个之间的换行变空格
  • block  
  • inline-block 可以设置宽高的行内元素(img)

定位

• position:
  　　- absolute 相对最近的定位的祖先元素(至浏览器),所以一般设父元素相对定位,提升一个z层级,脱离文档流(内联变块,随着被内容撑开),
  　　- relative 不脱离文档流(性质不变),提升一个z层级
  　　- fixed 固定定位:相对浏览器的绝对定位,不随滚动条变化
  left: //切记：默认值是auto，不是0(所以上面相邻有元素不会重叠)
  top:
  z-index:-1   只有开启定位的有效,父元素高不过子元素

• 相对于其包含块定位(已定位祖先元素)
• 生成的一定是块级框

浮动

• 向上爬
• float:none left right
  • 浮动到父元素边框,兄弟块元素或者其他浮动元素(行内元素会超过)
  • 浮动元素不会超过上面的浮动元素,最多对齐
  • 浮动元素不会盖住文字
  • 浮动元素块元素默认宽高为0,脱离文档流内联元素变成块元素
  • 高度坍塌问题(父元素未设高,子元素全浮动)
    • 隐藏属性BFC
    • 父元素设置inline-block即可跟随浮动子元素的高,但是宽丢失
    • 推荐父元素overflow:hidden(非visible),ie6不行
    • 在这个父元素:after伪类添加{content:"",display:"block",clear:both} ,运用clear原理
• 清除浮动的影响
  • clear:left right both
  • 假设浮动元素是块,避免浮动元素对他的影响,进而不坍塌

 伪类

• a:link  未访问
• a:visited  已访问
• a:hover 鼠标在 在link.visited之后
• a:active 点击时 在hover之后
  • 以上四者优先级一样,有重叠情况
  • 避免覆盖,link和visited在前两个,hover在active之前在后两个
• :focus 获得焦点之后
• ::selection 文字选中时

 伪元素

• :first-line首行文本
• :first-letter首字母
• :before元素前
  • 默认指元素前面的空地方
  • content属性表示这块
• :after元素后
  • 同上

 行尺寸

• line-height:   
  • 百分比相对于字体,数值相对于字体倍数
  • font:30px/50px 默认自动设置了一个行高,混用注意覆盖
• max-height:
• min-height:
• max-width:
• min-width:
• height:
• width:

 

 透明度

• opacity:0.4

 

CSS3

边框

• border-radius:10px;圆角边框
• box-shadow:10px 10px 10px color //x,y,模糊度，颜色
• border-image:

背景

• background-size:10px 20px;//背景图大小
• background-origin:border-box padding-box content-box背景图区域
• background-clip:同上，裁剪
• background-image:url(path),url(path)多重背景

 文本

• text-shadow:10px 10px 10px color//x,y,模糊度，颜色
• white-space:nowrap不换行(normal，pre，pre-wrap，pre-line)
• word-wrap:break-word不许单词内断句，会换行(宽度不够另起一行断句）
• word-break:break-all 词内超出直接断词换行

 2D转换

• transform:translate(10px,10px) rotate(30deg) scale(2,4) skew(30deg,30deg)平移 旋转 缩放 翻转
• matrix()
• transform-origin:20% 40%基准点位置

 3D转换

• transform:translate3d(x,y,z) translateX() translateY() translateZ() rotate3d() rotateX(30deg) rotateY(30deg) scale3d()

 过渡

•  transition:width 2s linear 2s,height 2s linear 2s;属性 时间 匀时 延迟
  • transition-property transition-duration transition-timing-function transition-delay

 动画

• @keyframes myfirst{
  from {color:red;}
  to {color:blue;}
  }
• @keyframes myfirst{
  0% {color:red;}
  50% {color:blue;}
  100% {color:yellow;}
  }
• animation:myfirst 5s;其他属性同上

多列

• column-count:4;列个数
• column-gap:10px;列距离
• column-rule:3px outset red列间，颜色样式，宽度

用户界面

• resize:both自定义
  overflow
  • visible默认溢出框外(不影响其他布局)
  • hidden溢出隐藏修剪
  • scroll永存滚动
  • auto自动判断添加滚动条
  • no-display
  • no-content
• box-sizing:border-box padding-box content-box;
• outline:2px solid red;
  outline-offset:15px;

 高度坍塌与外边界重合问题

元素:after { //高度坍塌
    content:"",
    display:block,
    clear:both
}

元素:before { //外边距重叠
    content:"",
    display:"table",
}
//有需要可以整合在一起

 Flex布局

https://zhuanlan.zhihu.com/p/25303493 

Less

npm i -g less
lessc 文件名.less 文件名.css
    - @a定义变量,可运用计算,&表示自己
    - 嵌套规则
    - 混入引用名即可直接使用(&:.extend(.类名))
    - 导入@import "文件名"
    - 循环等等
    - less-loader

 

 默认值问题

    - 默认auto：position:absolute的left，top
    - 默认auto：width，height默认不是100%
    - margin，padding默认0
    - 百分比：height为包含块的height，其余为width参照

 

 

 

 

-moz-火狐

-webkit-

单位px,百分比,em(等于1当前元素的font-size)

避免多次请求,资源合一方法:多个图片合成一张 (CSS-Sprite雪碧图)

 所有简写属性没写的都会设置成默认值(之前写过的小心被覆盖)

 

未完待续~~