CSS基础-002

盒子模型

包括：边框、内边距、外边距、实际内容 边框会影响定好宽高的盒子大小

内边距

padding：边框与内容之间的间距 padding复合写法，四个值是上右下左，顺时针方向设置 padding也会影响盒子大小 通过相等内边距撑开盒子

导航栏demo

  <div class="nav">
    <a href="#">新浪导航</a>
    <a href="#">手机新浪网</a>
    <a href="#">移动客户端</a>
    <a href="#">微博</a>
    <a href="#">干啥呀</a>
  </div>

.nav {
  height: 41px;
  border-top: 3px solid #ff8500;
  border-bottom: 1px solid #edeef0;
  background-color: #fcfcfc;
  line-height: 41px;
}

.nav a {
  font-size: 12px;
  color: #4c4c4c;
  /* 行内块 */
  display: inline-block;
  /* 去除横线 */
  text-decoration: none;
  height: 41px;
  padding: 0 20px;
  
}

.nav a:hover {
  background-color: #eee;
}

效果 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

外边距

margin：使用方法与padding一致，只不过设置的是盒子与盒子之间的距离 开发前记得清除内外边距

浮动

传统网页布局的三种方式 网页布局的本质：用CSS来摆放盒子，把盒子放到相应的位置 标准流：标签按照规定好默认方式排列 浮动 定位 为什么需要浮动 标准流不能解决，需要浮动 float属性用于创建浮动框，将其移动到一边，知道左边缘或者右边缘触及包含块或另一个浮动框的边缘

浮动特性

1、浮动的元素会脱离标准流 2、浮动元素会一行内显示并且元素顶部对齐 3、浮动元素会具有行内块元素的特性

网页布局准则：先设置盒子大小，之后设置盒子的位置

浮动布局注意点

1、浮动和标准流的父盒子搭配 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置 2、一个元素浮动了，理论上其余兄弟元素也要浮动 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

为什么要清除浮动？ 由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子 清除浮动的本质就是清除浮动元素造成的影响 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面标准流 clear：both 清除浮动的策略是：闭合浮动 清除浮动方法 1、额外标签也称为隔墙法，是W3C推荐的做法（新增的这个隔元素，必须是块级元素不能是行内元素） 2、父级添加overflow属性 hidden 3、父级添加after伪元素 4、父级添加双伪元素

属性书写顺序

1、布局定位属性 2、自身属性 3、文本属性 4、其他属性