CSS基础

参考资料

基础

  • CSS 指层叠样式表(Cascading Style Sheets),把样式添加到HTML 4.0 中是为了解决内容与表现分离的问题
  • CSS层叠次序,样式优先级:
    • 内联样式(HTML元素内部)
    • 内部样式表(位于head标签内部)
    • 外部样式表
    • 浏览器缺省设置
  • CSS语法:选择器+一条或者多条声明
    selector {declaration1; declaration2; ... declarationN }
  • 创建
    • 外部样式表
      <link rel="stylesheet" type="text/css" href="mystyle.css" />
      
    • 内部样式表
      <head>
      <style type="text/css">
        hr {color: sienna;}
      </style>
      </head>
      

CSS样式

  • 背景

    • background-color:不能继承,默认是 transparent 透明,所以祖先元素背景可见
    • background-image:设置url("image-src"),不能继承,默认 none
    • background-repeat:对背景图像进行平铺;可选repeatrepeat-xrepeat-yno-repeat
    • background-position:改变图像在背景中的位置
      • 位置关键词:可同时指定多个值centerlefttopbottomright
      • 百分比值:中心与其元素的中心对齐
      • 长度值:元素内边距区左上角的偏移
    • background-attachment:背景关联;默认随文档滚动scroll,可以设置fixed,相对于可视区是固定的
  • 文本

    • text-indent:文本缩进
    • text-align:水平对齐
      • left:文本居左
      • right:文本居右
      • center:元素内部文本居中
      • justify:两端文本对齐
      • inherit:从父元素继承
    • word-spacing:改变字(单词)之间的标准间隔
    • letter-spacing:改变字符(字母)之间的间隔
    • text-transform:字符转换
      • none:默认
      • uppercase:全部大写
      • lowercase:全部小写
      • capitalize:每个单词头字母大写
    • text-decoration:文本装饰
      • none
      • underline:下划线
      • overline:上划线
      • line-through:贯穿现
      • blink:文本闪烁
    • white-space:处理空白符
      value
    • direction:文本方向ltrrtl从左到右、从右到左
  • 字体

    • font-family
    • font-style:字体风格
      • normal - 文本正常显示
      • italic - 文本斜体显示
      • oblique - 文本倾斜显示
    • font-variant:字体变形;设定小型大写字母
    • font-weight:字体粗细
    • font-size:字体大小;1em 等于当前的字体尺寸;在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值
      value
  • 链接

    • 四种状态:
      • a:link - 普通的、未被访问的链接
      • a:visited - 用户已访问的链接
      • a:hover - 鼠标指针位于链接的上方
      • a:active - 链接被点击的时刻
    • 设置规则次序:
      • a:hover 必须位于 a:link 和 a:visited 之后
      • a:active 必须位于 a:hover 之后
  • 列表

    • list-style-typedisc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit
    • list-style-image:列表项图像
    • list-style-postion:标志出现在列表项内容之外还是内容内部
      value
  • 表格

    • border-collapse:折叠边框 separate | collapse | inherit
    • border-spacing: 设置相邻单元格的边框间的距离(仅用于“边框分离”模式)
    • empty-cells:设置是否显示表格中的空单元格(仅用于“分离边框”模式);hide | show | inherit
  • 轮廓

    • outline在一个声明中设置所有的轮廓属性
    • outline-color设置轮廓的颜色
    • outline-style设置轮廓的样式
    • outline-width设置轮廓的宽度

CSS盒模型

  • CSS盒模型规定了元素框处理元素 内容内边距边框外边距 的方式
  • 盒子实际宽度(高度)= 内容 + 内边距 + 边框 + 外边距
  • 标准模型:width(height)指内容部分的宽度(高度)
  • IE模型:width(height)指 内容+内边距+外边距 部分的宽度(高度)
  • 切换盒模型,可以使用css3的box-sizing属性
    • box-sizing: content-box 是W3C盒子模型
    • box-sizing: border-box 是IE盒子模型
  • 适用场景:border-box可以便于计算,对于有边框的盒子可以正常使用百分比宽度
  • margin越界问题(第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题),解决方案:
    • 给父元素加边框border
    • 给父元素设置padding值
    • 父元素添加 overflow:hidden
    • 父元素加前置内容生成
      .parent:before {
        content: " ";
        display: table;
      }
      
  • CSS外边距合并:当两个垂直外边距相遇时,它们将形成一个外边距;合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
  • 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

CSS定位

  • CSS 有三种基本的定位机制:普通流、浮动和绝对定位
  • position
    • static:该框是一个常规框,布局根据常规流。’left’ 、’right’、’bottom’ 和 ‘top’ 属性不适用
    • relative:框的位置根据常规流计算(被称为常规流中的位置)。然后框相对于它的常规位置而偏移
    • absolute:框的位置(可能还有它的尺寸)是由’left’,’right’,’top’和’bottom’特性决定;绝对定位的框从常规流向中脱离。这意味着它们对其后的兄弟元素的定位没有影响
    • fixed:框相对于可视窗口固定,滚动时不移动
  • 偏移:toprightbottomleft
  • overflow:设置当元素的内容溢出其区域时发生的事情
  • clip:设置元素的形状。元素被剪入这个形状之中,然后显示出来
  • vertical-align:设置元素的垂直对齐方式
    value
  • 浮动:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止;由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样

CSS选择器

  • 元素选择器
  • 类选择器
  • 通配符选择器
  • ID选择器
  • 属性选择器[title]
    value
  • 后代选择器
  • 子元素选择器>
  • 相邻兄弟选择器+:可选择紧接在另一元素后的元素,且二者有相同父元素
  • 伪类:first-child | last-child | first-of-type | last-of-type | active | focus | hover | link | visited
  • 伪元素
    value
  • CSS3下伪类和伪元素的区别
    • 伪类其实是弥补了CSS选择器的不足,用来更方便地获取信息
    • 伪元素本质上是创建了一个虚拟容器(元素),我们可以在其中添加内容或样式
    • CSS3中伪元素用双冒号

CSS3新特性

  • 主要模块:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
  • 边框:
    • border-radius:圆角边框
    • box-shadow:边框阴影
    • border-image:边框图片
  • 背景
    • background-size:背景图片的尺寸
    • background-origin:规定背景图片的定位区域 content-box、padding-box 或 border-box
    • 允许多重背景图片,多个url通过逗号分隔
    • background-clip:规定背景的绘制区域 border-box|padding-box|content-box
  • 文本效果
    • text-shadow:规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色
    • word-wrap:允许长单词或 URL 地址换行到下一行normal|break-word
  • 自定义字体
    <style>
    @font-face
    {
      font-family: myFirstFont;
      src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */
    }
    div
    {
      font-family:myFirstFont;
    }
    </style>
    
  • 2D转换transform
    value
  • 3D转换transform
    value
  • 过渡transition
    • 规定您希望把效果添加到哪个 CSS 属性上
    • 规定效果的时长
  • CSS动画
    value
  • 多列
    value
  • 用户界面
    • resize: 规定是否可由用户调整元素的尺寸 none | both | horizontal | vertical
    • box-sizing:以特定的方式定义匹配某个区域的特定元素

其他

  • 单行文本溢出
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
  • 多行文本溢出
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    

Flex布局

  • CSS3 弹性盒子(Flex Box):是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
  • 设置
    {
    display: -webkit-flex; /* Safari */
    display: flex;
    }
    //行内元素
    {
    display: inline-flex;
    }
    
    • 设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效
    • 容器上的属性:
      • flex-direction:row | row-reverse | column | column-reverse
      • flex-wrap:nowrap | wrap | wrap-reverse
      • flex-flow:<flex-direction> <flex-wrap>前两个属性的简写
      • justify-content:flex-start | flex-end | center | space-between | space-around 项目在主轴上的对齐方式
      • align-itemflex-start | flex-end | center | baseline | stretch 定义项目在交叉轴上如何对齐
      • align-content:flex-start | flex-end | center | space-between | space-around | stretch 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
    • 项目上的属性
      • order:<integer>定义项目的排列顺序,数值越小,排列越靠前,默认为0
      • flex-grow:<number>定义项目的方法比例
      • flex-shrink:<number>定义项目的缩小比例
      • flex-basis:<length> | auto项目占据的主轴空间
      • flex前三个属性的简写
      • align-self:auto | flex-start | flex-end | center | baseline | stretch允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

  转载请注明: Blog CSS基础

 上一篇
前端安全问题 前端安全问题
参考资料CSRF 攻击的应对之道前端安全知识 XSS Cross-Site Scripting(跨站脚本攻击)简称XSS,是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本,使之在用户的浏览器上运行。利用这些恶意脚本,攻击者可获取用户的
2018-08-18
下一篇 
Element-ui+Vue实现图片上传组件 Element-ui+Vue实现图片上传组件
talk is cheap show me the code 参考资料 element-ui vue前端(element-ui),express后端实现上传图片到七牛云 前端组件 具体的样式配置可以见element-ui的官网 第一种
2018-08-08
  目录