CSS Learning Record

慕课网上提供了前端工程师学习计划,这学期开始照着里面的步骤来学习。这篇文章主要用来记录一些零碎的知识点。

W3C标准--万维网联盟制定的一系列标准


倡导结构、样式、行为分离:

结构化标准语言--HTML&XML
样式标准语言--CSS
行为标准语言--js

3D盒子模型


CSS Learning Record_第1张图片
3D盒子模型

元素分类


块状元素

...

      内联元素(又叫行内元素)

      
      
      

      内联块状元素

      
      
      

      css三种定位机制


      标准文档流

      从上到下,从左到右,自动换行。

      浮动

      特点

      元素会左移或右移,直到触碰到容器为止。

      会影响紧邻其后的元素。

      当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。

      清除浮动的常用方法

      • clear属性--常用clear:both;(不推荐)
      • 同时设置width:100%(或固定宽度)+overflow:hidden;

      绝对定位

      定位


      自动居中

      #testdiv {
        width:80%;
        margin:0 auto;
      }
      

      auto会根据浏览器的宽度自动设置两边的外边距

      外边距=( 浏览器的宽度-外包含层的宽度)/2

      如果想让页面自动居中,当设置margin属性为auto的时候,不能再设置浮动或绝对定位属性

      你可能感兴趣的:(CSS Learning Record)