CSS项目及chorm调试工具 (5)

项目前期准备

准备工具

ps(切片工具)+ Vs code或其它的开发工具+chorm浏览器

准备文件

创建根目录 根目录里面创建html文件 css文件夹 image文件夹 js文件(目前用不上)

CSS项目及chorm调试工具 (5)_第1张图片

css书写顺序

CSS项目及chorm调试工具 (5)_第2张图片

布局流程

CSS项目及chorm调试工具 (5)_第3张图片

chorm调试工具

打开控制台

f12 或ctrl+shift+I 或右击检查

快速定位css行数

CSS项目及chorm调试工具 (5)_第4张图片

快速定位到当前行

ctrl+g

CSS项目及chorm调试工具 (5)_第5张图片

css拼写单词错误

CSS项目及chorm调试工具 (5)_第6张图片

注意事项

子元素的宽度可以大于父元素

在某些情况下 子元素的宽度可以大于父元素,例如在某些布局中,子元素的宽度可以大于版心宽度
  • 在这个案例中,每个li的宽度为300px,margin-right的值为20,等于每行的宽度为(300px+20px)X4=1280px,可以container的值设为1280px且大于nav的1200px,且不受影响正常的布局




    
    
    Document
    



    


CSS项目及chorm调试工具 (5)_第7张图片

清除浮动

在某些情况下,父元素不方便给高,子元素浮动后而导致子元素高度为0。
清除浮动后,父元素会自动检测子元素的高度,不会影响下面的布局

源码:pan.baidu.com/s/1IqD9Glj2…

你可能感兴趣的:(css)