中软大前端0315-CSS

CSS

选择器


  • *全部选择器
    *{}

  • 标签选择器
    div{}

  • ID选择器
    #divId{}

  • 类选择器(class)
    具有同样样式的使用类,需要重复使用的
    .divClass{}

  • 符合选择器
    后代选择器:ul li 使用空格(嵌套)

交集选择器:直接连接(第一个选择器必须是标签选择器 标签+class 符合这两个条件的),且的关系(JQuery的交集选择器中第一个选择器没有要求)

并集选择器:使用逗号

  • 伪类选择器
    p:first
  • [class*="col-"]
    选择所有类名中含有”col-“的元素
  • [class^="col-"]
    选择所有类名中以”col-“开头的元素
  • [class$="-col"]
    选择所有类名中以”-col”结尾的元素
  • 优先级
    ID选择器优先级 高于 类选择器
    类选择器 高于 标签选择器

常用属性


background:

  • background-color:颜色
  • background-image:url(“”)
    背景图片可以有多个-重叠效果,用’,’连接
  • background-repeat:no-repeat/repeat-x/repeat-y/
    背景图片的重复
  • background-position:bottom/center/top/left/right
    背景图片位置
  • background-attachment:fixed/scroll
    背景图片固定/随页面滚动
  • background-size:100% 100% / 100px 100px
    背景图片大小
  • background-origin:padding-box/border-box/content-box

    对齐方式,边框对齐/内容对齐
    background-origin 属性规定 background-position 属性相对于什么位置来定位。
    注释:如果背景图像的 background-attachment 属性为 “fixed”,则该属性没有效果。

  • background-clip:padding-box/border-box/content-box
    背景绘制区域,背景图片修剪(包含padding区域/包含border区域/不包含border和padding区域)

  • padding:数值(上下,左右) 标签内部留白
  • margin:数值 与外层元素边距

ul-li

  • list-style-image:url(“”)
  • list-atyle-position:inside/outside
    列表项目符号的位置(默认outside)
  • list-style-type:
    工程中项目符号一般用背景图片

font

  • font-size: 字体大小(单位 px em)
  • font-style:normal/italic/oblique
    字体样式(正常 倾斜)
  • font-width:bold/bolder/lighter/数值
    字体粗细(加粗400/更粗700/细)
  • font-family:字体类型

text

  • color:red/#ff0000/rgb(r,g,b)/rgba(r,g,b,a)
    字体颜色(英文单词/十六进制数/rgb(0-255)/rgba(红,绿,蓝,透明度)
  • text-align:left/right/center/justify
    文本对齐方式(左/右/居中/两端对齐)
  • text-indent:首行缩进(单位 em/px)
  • lin-height:文本的行高
  • text-decoration:none/underline/overline/line-through/blink
    文本装饰
  • vertical-align:文本垂直对齐方式,图文混排,属性加在图片上
  • word-spacing:单词间距
  • letter-spacing:字间距,字母间间距
  • white-space:nowrap 换行
  • text-shadow:文字阴影

border

  • border-style:solid/double/dotted/dashed/grove/ridge/inset/outset
    边框线样式(实线/双线/点线/虚线/3D沟槽/脊边框)
  • border-top-style:
  • border-radius:圆角(左上,右上,右下,左下)
  • box-shadow:盒子阴影(inset内部阴影)
  • border-color:
  • border-width:(上右下左)(上下,左右)
  • border-img:url() 30 30 30 30 round;
    使用该样式时,border-style必须存在
    (上,右,下,左)切割大小

显示/隐藏

  • display:block/inline/none;
    显示为块级元素/显示为行内元素(内联元素)/不显示
  • visibility:visible/hidden;
    可视/隐藏

用diaplay隐藏时,元素会消失在文档流中,不保留原本位置(二级导航)。而用visibility隐藏时,只是不显示该元素,元素原本位置会保留

超出部分显示…

white-space:nowarp; 不换行
overflow:hidden; 超出部分隐藏
teat-overflow:ellipsis; 超出部分省略

盒子模型

  • Margin(外边距) - 清除边框区域。Margin没有背景颜色,它是完全透明
  • Border(边框) - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
  • Padding(内边距) - 清除内容周围的区域。会受到框中填充的背景颜色影响
  • Content(内容) - 盒子的内容,显示文本和图像

轮廓线—outline

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用,同border一样,有宽度,颜色,样式。但是outline的宽度不占盒子宽度,不会影响布局。

  • opacity:0-1;透明度
  • cursor:pointer;光标样式:手指

总结

CSS布局


display显示

  • visibility:hidden 隐藏元素,但是元素仍然占据空间并影响布局。
  • display:none 隐藏元素,并从布局中删除元素。

position定位

float浮动

column列布局(瀑布流)

  • column-count:设置列数
  • column-gap:指定列间距
  • column-rule:列规则,包括宽度、样式、颜色
  • column-rule-style:样式
  • column-rule-color:颜色
  • column-rule-width:宽度

响应式布局

max-width:480px 当最大宽度为480px时(即屏幕宽度小于480px时)的布局

min-width:768px 当最小宽度为768px时(即屏幕宽度大于768px时)的布局

@media only screen and (max-width:480px){

}

  • picture-source 实现响应式图片

    1
    2
    3
    4
    5
    6
    7
    <picture>
    <source media="(max-width:480px)" srcset="img/480x320.gif">
    <source media="(max-width:640px)" srcset="img/640x427.gif">
    <source media="(max-width:720px)" srcset="img/720x480.gif">
    <source media="(max-width:900px)" srcset="img/900x600.gif">
    <img src="img/900x600.gif"/>
    </picture>
  • img-srcset实现响应式图片

    1
    2
    3
    4
    5
    6
    <img sizes="(min-width:900px) 900px,100vw"
    srcset="img/480x320.gif 480w,
    img/640x427.gif 640w,
    img/720x480.gif 720w,
    img/900x600.gif 900w"
    src="img/480x320.gif"

box-sizing

  • box-sizing: content-box|border-box|inherit:
    content-box:这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
    border-box:并排放置两个带边框的框,这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中

javascript:https://github.com/zhubangbang/zhubangbang-javascript-notes

https://github.com/lin-xin/blog

Adroid:https://github.com/zhujun2730/Android-Learning-Resources

UI:https://github.com/qyxxjd/UI-Design-Resources