手记

CSS学习总结

一,html相关

1,元素分类

    传统分类: 行内元素、块级元素、inline-block元素(inline元素可以跨行,inline-block不能)
    位置分类: 
            head区元素: meta link style script title base(指定基础路径); 

            body区元素: table、div、section、article、aside、header、footer;span em strong ul ol li dl dt dd  a form input select  textarea button

   html5分类:flow元素(占据文档流的元素)和非flow元素(如meta元素)

   html元素的嵌套关系:块级元素可以包含行内元素;
                     块级元素不一定能包含块级元素(如p元素不能包含div);
                     行内元素一般不能包含块级元素(a是例外,a可以包含div);

   Question: 为什么a可以包含div元素?要从html规范来解释,html5中可以,html4不可以。html5重新划分了html元素的类别,行内元素是透明元素时,其能否包含块级元素,要看行内元素的父元素是否能够包含块级元素,如P只能包含 phrasing conent 类别的元素,所以 p->a->div,这种是不合法的;但是 div->a->div是合法的

    html5新的分类:https://www.w3.org/TR/html5/dom.html#phrasing-content

2,html5相对于html4的变化
2.1 如何理解html:整个html是一个文档,类似word文档;标签用来描述文档的结构;文档是有大纲的

    2.2 更加强调语义化
          新增语义化的标签:
              section :能表达一块独立内容的区块(更细化)
              article:结构完整的区块(可由多个section构成)
              aside
              nav
          强化原有元素的语义:strong、i

    2.3 表单增强:
          新增 input 类型 : color/email/number/tel/url/search/range/date/time/datetime-local
         表单验证
         required/pattern

    2.4 新的API(离线、音视频、图形、实时通信、本地存储、设备能力) 分类和嵌套变更(如a元素的变化)

3,关于 form 表单

   3.1 不写js就可以直接提交表单
   3.2  使用submit/reset按钮 
   3.3  便于浏览器保存表单(如密码保存,提示用户体验) 
   3.4  第三方可以整体提取值( jquery 可以针对 form 元素整体提取值) 
   3.5  第三方库进行表单验证

4,form 表单的 enctype

   4.1 form enctype 属性区别:[参考文献][1]

   4.2 后台如何获取application/x-www-form-urlencoded的值:https://blog.csdn.net/soonfly/article/details/52082547

5,字体

   5.1 字体族:衬线字体(serif)、非衬线字体(scans-serif)、等宽字体(monospace)、cursive(手写体)、 fantasy(花体)
   5.2 多字体fallback
   5.3 自定义字体
         原理:网页上看到的字本质是一个一个的图片,用户输入的其实是一个
              编码,计算机根据编码在字体库中找到对应的字体图片,显示在屏幕上,

             通常所说的字体就是一个一个的字体库,比如黑体,它其实代表着
             一个字体图片库。我们指定字体是黑体,浏览器就会根据用户输入的编码
             到这个字体库中查找对应的字体图片,然后渲染

             基于这个原理,我们可以创建一个字体图片库,告诉浏览器这是一个
             字体库,并给他起个名字,比如:棕体。 使用时通过
                   font-family : 棕体
             告诉浏览器,去 棕体 这个库里面查找字体图片。

             @font-face {
                    font-family: 'FontAwesome';// 指定一个字体库的名字
                    src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); 
                    font-weight: normal;
                    font-style: normal;
            }
   5.4 图标字体
             图标字体的原理和自定义字体的原理是一样一样的,只不过,字体库里面
             存的不再是文字或者字母了,而是我们精心设计的图标

6,雪碧图 Demo1-Jsbin Demo2-Runjs

   原理:雪碧图,性能优化,把多个图集中到一张图片上,减少http请求,

   通过background、background-position 属性使用图片的不同部分起到多张图的效果

7,行高 Demo1

   概念:行内框、行框、行高、底线、顶线、基线、中线

8,viewport:移动设备的分辨率高

  viewport :手机屏幕代表的页面尺寸,如果viewport设为width=980px,就是说在当前设备上屏幕的宽度等于页面上980px的宽度

  通常移动设备的屏幕比PC小,比如说PC的屏幕宽度是980px,网页是按照
  980px设计的,在PC端显示正常。

   移动设备显示这个网页时,只能显示一部分。为了能全部显示整个网页,
   各移动端浏览器厂商将浏览器视口宽度设置为980px,这是网页能完整的
   显示了。但会出现下面的问题:

   在pc上,网页设计是根据PC的真实宽度来设计的,css中的1个px对应于
   屏幕的1个px(不一定)。而到了移动端,由于屏幕变小,但仍然要显示
   css中980个像素的宽度,于是多个css像素绘制到一个屏幕像素上,内容
   变小,而且模糊。

   这种策略出现在移动设备出现初期,网页设计通常只有针对pc的设计,
  没有移动端的设计。

   当网站有了针对移动端的设计之后,这种浏览器的行为就会导致浏览器
   不能按照我们的意图正常显示。

   通过设置 viewport 属性,让浏览器以屏幕真正的宽度渲染网页。  

9,base64优化图片

    base64将图片转为文本编码格式
    base64和性能优化 base64会增加约1/3的体积 base64减少网络请求 base64适用于小图标

10,背景 Demo-多背景叠加,网格背景

   背景图片、渐变色背景

11,边框 三角形

   图片边框
   边框特效(三角形)

12,常见布局 阮一峰Flex Demo浮动布局

   table 布局:
         display: table,table-row,table-cell
   inline-block 布局
         利用 inline-block 元素在同一行,并且可以设置 width 的特性
         像排文本一样排元素
         不需要考虑清除浮动
         要考虑清除间隙
   flex 布局
         最新的布局方式,存在兼容性问题
   浮动布局
          利用浮动元素脱离文档流的特性

13,css 属性分类 伪元素清除浮动Demo BFC清除浮动 绝对定位-破坏性

  非布局属性:行高、背景、字体、字重、颜色、大小、行高 、边框、滚动、换行 粗体、斜体、下划线 其他

  布局属性:padding、border、margin、width、height、display、position、float

  absolute绝对定位:包裹性、破坏性、位置跟随---来自张鑫旭
  要注意一个点:把一个元素设置为absolute后,如果不为其设置top、left,其位置
  保持在原地不动,即它的定位会考虑它前面的元素的位置,但是其后面的元素并
  不会考虑浮动元素的位置,会与浮动元素重叠--位置跟随特性。

  此外,如果绝对定位元素位于父容器的最后位置,并且父元素有高度,由于父元
  素的高度不会考虑到绝对定位元素,因此,绝对定位元素有可能因为超出父元素
  的盒模型而不可见。

  清除浮动:因为浮动会导致高度塌陷,所有有些情况需要清除浮动,让浮动元素
  撑起父容器的高度。

  原理:高度塌陷的原因是父容器在布局时不考虑浮动元素的尺寸
  思路一: 让父元素变成BFC,则其需要负责内部所有元素的布局,包括
  宽高计算
  思路二:在父容器的最后添加一个伪元素,并清除浮动,display:block使其
  成为块级元素

14,产生BFC的情况

     根元素或其它包含它的元素
     浮动 (元素的 float 不为 none)
     绝对定位元素 (元素的 position 为 absolute 或 fixed)
     行内块 inline-blocks (元素的 display: inline-block)
     表格单元格 (元素的 display: table-cell,HTML表格单元格默认属性)
     表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
     overflow 的值不为 visible的元素
     弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

15,响应式布局

      目标:
           在不同设备上正常展示
           主要处理对不同屏幕大小的适配
      主要方法:
           隐藏、折行、自适应空间
           rem、viewport、midea query

16,能做特效的 css 属性

      background、box-shadow、border-radius、box-shadow

17,box-shadow Demo 特效猫

      box-shadow: 0px 0px 0px 10px  inset;
      第四个参数可以是负值,可以放大缩小阴影

18,clip-path 使用 svg 裁剪

19,3d、2d变换

     transform; translate/translatex/translateY/rotate/scale

20,默认样式

      默认样式的意义;
      默认样式举例:body的margin;ul>li的padding
      默认样式带来的问题:默认样式的效果不是我们想要的效果
      解决默认样式的问题:css reset

21,doctype的作用

      浏览器以标准模式渲染
      浏览器知道元素的合法性

22,em和i

     em是语义化的标签,起强调作用;
     i表示斜体,是纯样式标签

23,语义化的意义:

     开发者容易理解,便于维护
     机器容易理解结构
     有助于seo

24,自闭合元素

    表单元素input
    图片img
    br hr
    meta link

25,html和dom的关系

  html是死的,是静态的
  dom由html解析而来,是活的
  js可以维护dom

26,property 和 attribute的区别

 attribute是似的的,是html中标签的属性
 property是html解析成dom之后的结点的属性,比如在input输入框中输入一个值,改变的是property而不是attribute

27,你必须知道的css

选择器:用于匹配html元素,分类和权重,解析方式和性能(body div .nav,从右往左解析),值得关注的选择器
分类:伪类/类,元素/伪元素,属性选择器,id选择器,组合选择器,通用选择器,否定选择器
二,html相关

1,非布局样式
字体(font、font-family、font-weight)
行高(line-height影响整行的高度,不影响文字大小,影响行间距):line-height、text-align
背景(背景颜色:hsl,hsla,rgb,rgba,background:linear-gradient,background-repeat,雪碧图,background-position,background-size(用于多分辨率的适配),base64(使用方式:background:url(base64)))
border(border-image:url(./bc.jpg) 30 repea/round)
换行(overflow-wrap(是否保留单词),word-break 针对多字节文字,white-space空白处是否断行,white-space:no-wrap,不换行)
装饰性属性:text-decoration、font-weigth、font-style

1人推荐
随时随地看视频
慕课网APP