York's Blog

CSS

CSS的历史

CSS全称Cascading Style Sheets，1994年哈肯·维姆·莱提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计CSS。
1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。W3C 开始接管 CSS
1998年5月W3C发表了CSS2,CSS2.1修改了CSS2中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。
从 2011 年开始 CSS 被分为多个模块单独升级，统称为 CSS 3。

这些模块有：

  • CSS 选择器 level 3
  • CSS 媒体查询 level 3
  • CSS Color level 3
  • 更多请 搜索 CSS spec

CSS周边工具

  1. LESS CSS一种简化、功能更多的 CSS 语言
  2. SASS一种简化、功能更多的 CSS 语言
  3. PostCSS 一种 CSS 处理程序

CSS 学习资源

  1. Google: 关键字 MDN
  2. CSS Tricks
  3. Google: 阮一峰 css
  4. 张鑫旭的 240 多篇 CSS 博客
  5. Codrops 炫酷 CSS 效果
  6. CSS揭秘
  7. CSS 2.1 中文 spec
  8. Magic of CSS

CSS知识点

  1. CSS引用

    1. 内联样式 style属性
    2. style标签方法用link标签的方式引入stylesheet，
      1. 外部样式(media=”print” 只在打印的时候显示该内容)<link rel="stylesheet" href="./print.css" media="print">
      2. 该文件仅在设备宽度小于 500 像素时生效<link rel="stylesheet" href="./mobile.css" media="(max-width: 500px)">
    3. import url（./b.css）

  2. box（盒模型)
    在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸, 属性 — 像它的颜色，背景，边框方面 — 和位置是渲染引擎的目标。
    在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。
    content-box与border-box的区别：content-box的width不包括padding和border,border-box的width包含。

  3. 常见的CSS属性：

    1
    2
    3
    4
    5
    6
    7
    8
    1.font-family:字体样式；font-size:字体大小 默认16px；font-weight:字体粗细；
    2.body的margin默认8，padding默认0。ul的margin默认16px 0px，padding-left默认40px其他为0px；
    3.color:字体颜色；background-color:背景颜色；margin:外边距；padding:内间距；
    4.line-height:行高；chrome中默认的line-height为1.5.
    5.text-align:center让元素中的内联元素居中
    6.display:inline:
        1.给display:inline元素设置宽高是无效的。
        2.给display:line元素设置margin-top margin-bottom是无效的

  4. 开发者工具：

    1. style展示所有样式
    2. computed展示计算出来的样式

  5. z-indexz-index 属性指定了一个具有定位属性的元素及其子代元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。

  6. 高度是由什么决定的？

    1
    2
    div块级元素的高度 由其内部文档流元素的高度总和决定，多个span在一起，由最高的span决定
    span内联元素的高度 字体和字体设计师设计的参数,font-size 字体最高点和最低点的大小

  7. Line Box:每一行称为一条Line Box，它又是由这一行的许多inline-box组成，它的高度可以直接由line-height决定，line boxes的高度垂直堆叠形成了containing box的高度，就是我们见到的div或是p标签之类的高度了。

  8. 文档流：文档内元素的流动方向

    1
    2
    3
    4
    5
    1.内联元素从左往右流动，如果宽度不够，换行继续流（英语单词不换行）style样式 word-break：break-all.
    2.块级元素从上往下依次流动，每个块占一行.

    脱离文档流 1.postion：fixed，2.position：absolute。
    元素一旦脱离文档流，父元素高度就不包含这个元素了.

  9. CSS 属性position取值：CSS position MDN

    1
    2
    3
    4
    5
    6
    absolute：绝对定位-不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
    relative：相对定位-该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）
    fixed：固定定位-不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
    static：普通定位-该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。
    sticky：粘性定位-盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。
    子元素css样式写postion：absolute，父元素要写postion：relative；

  10. CSS3实现圆角矩形和阴影怎么做?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    1. 设置圆角
        border-radius: 1em;
        /* 等价于 */
        border-top-left-radius:     1em ;
        border-top-right-radius:    1em ;
        border-bottom-right-radius: 1em ;
        border-bottom-left-radius:  1em ;
    2. 设置阴影
        box-shadow使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。
        对象选择器 {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
        对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

  11. 如何做左右横向布局（float + clearfix）:
    给每个子元素加上float一定会有BUG，给父元素加上class=clearfix

    1
    2
    3
    4
    5
    .clearfix::after{
        content: '';
        display: block;
        clear: both;
    }

  12. 上下左右居中:
    给父级元素加上样式:

    1
    2
    3
    display: flex;
    justify-content:center;
    align-items:center;

  13. div水平居中

    1
    2
    3
    4
    5
    6
    7
    六种实现元素水平居中
    1.margin和width实现水平居中,在分页容器上定义一个宽度，然后配合margin的左右值为“auto”实现效果
    2.inline-block实现水平居中方法,要在元素的父容器中设置text-align的属性为“center”
    3.浮动实现水平居中的方法,在这里是通过“position:relative”属性实现，首先在列表项“ul”上向右移动50%（left:50%;）,紧接着我们在“li”上也定义“position:relative”属性，但其移动的方向和列表“ul”移动的方向刚好是反方向（right:50%;）
    4.绝对定位实现水平居中
    5.CSS3的flex实现水平居中方法
    6.CSS3的fit-content实现水平居中方法

  14. 垂直居中：line-height
    div高度为 30px，div 里有一行字垂直居中，字的大小为 14px：

    • 给div的样式为font-size：14px；line-height：20px;padding:5px 0;
    • 给div的样式为font-size：14px；line-height：24px;padding:3px 0;
    • 给div的样式为font-size:14px;line-height:30px

  15. css画个三角形

    1
    2
    3
    4
    div{border:10px solid transparent;
        width:0;
        border-left-color:red;
        bored-top-width:0px;}

  16. 所有CSS伪类/元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 伪元素 */
    ::before ::after 必须给content：‘’；
    ::before ::after 只能一个

    /* 伪类 */
    ：hover   /* 把鼠标放在链接上的状态 */
    ：nth-child(n)  /* 选择所有p元素的第n个子元素 */
    ：focus /* 选择元素输入后具有焦点 */
    a:link {color:#FF0000;} /* 未访问的链接 */
    a:visited {color:#00FF00;} /* 已访问的链接 */
    a:hover {color:#FF00FF;} /* 鼠标划过链接 */
    a:active {color:#0000FF;} /* 已选中的链接 */

  17. display：inline-block一定要加vertical-align:top

  1. max-width比width好的属性

  2. css布局想要BUG少，尽量不要写width和height；

All content copyright York's Blog © 2014 • All rights reserved.
Proudly published with Hexo