33岁转职者的前端笔记-DAY 12 一些网页切版技巧的小笔记-Part 3

排版小技巧

• 比较早期的排版都是用表格(table)的方式来排版，现在不会用表格(table)的方式来排版了，而是用div。

• div = 原文： Division，简单来说就是版块、区块的意思，可以决定元素的大小, 最常拿来排版的标签。

• 看标签 的小技巧：可以展开折起来看，code 旁边有个小箭头可以按一下隐藏里面的 code , 一层一层慢慢看，比较不会乱掉跟眼花。

• chorme 的检查会很常用，找 bug 会用他来查

• {}特殊的选择器，全部标签都能选到

• border: 1px solid black; 框线:大小、样式、颜色

让画面有边界线语法(方便排版)：

{
   border: 1px solid black;
} 

版面宽度应用

• 计算宽度的方法：width: calc(100%/3); 可以不用计算需要几px，可以直接里面计算。
• width: 100%; 所在的容器把他填满不是符合版面大小
• flex：可以解读成灵活的箱子
• dlisplay:显示模式
• display: flex;让内部第一层元素左右并排 ，会自动抓里面的宽度
• flex-wrap: wrap;里面的宽度不要自动缩放，放不下就换行
• padding: 30px 10px;对内留白：上下 左右 */
• padding: 15px; 上下左右都是留白15px
• 网页检查工具：绿色：padding 橘色：marging