CSS学习:基础+进阶 （三）

盒子模型

• border(边框)、padding(内边距)不占据盒子模型的宽高

• 强制border(边框)、padding(内边距)不占据盒子模型的宽高: border-box-->以边界去固定盒子尺寸

.box {
    width: 200px;
    height: 200px;
    padding:30px;
    border: 1px solid #000
    box-sizing: border-box;
    /下面是兼容各个浏览器/
    /*firefox*/
    -moz-box-sizing: border-box;
    /*chrome/safari*/
    -webkit-box-sizing: border-box;
    /*IE8一下*/
    -ms-box-sizing: border-box;
    /*presto opera*/
    -o-box-sizing: border-box;
}

一般会把上面的设置写在全局css当中---> 标签样式初始化
div {
    box-sizing: border-box;
    /下面是兼容各个浏览器/
    /*firefox*/
    -moz-box-sizing: border-box;
    /*chrome/safari*/
    -webkit-box-sizing: border-box;
    /*IE8一下*/
    -ms-box-sizing: border-box;
    /*presto opera*/
    -o-box-sizing: border-box;
}

• 与border-box 相反的就是 border-content: 以内容去固定盒子尺寸

一般会把上面的设置写在全局css当中 以单独的类去操作
.content-box {
    box-sizing: border-content;
    /下面是兼容各个浏览器/
    /*firefox*/
    -moz-box-sizing: border-content;
    /*chrome/safari*/
    -webkit-box-sizing: border-content;
    /*IE8一下*/
    -ms-box-sizing: border-content;
    /*presto opera*/
    -o-box-sizing: border-content;
}

• margin 利用auto值可以设置水平居中

.box {
  margin: 0 auto;
}

• 浏览器的body默认会有 margin

ie8 --> 上下16px 左右8px,
ie7 --> 上下16px 左右11px,

定位 position

绝对定位 position: absolute;

• 不占据文档流，类似新开一个图层

• left/right只能其一; top/bottom只能取其一;

• 两栏设计

.left {
  positon: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  backgroud-color: green;  
}

.right {
  margin-left: 300px;
  height: 100%;
  backgroud-color: orange;
}

相对定位 position: relative;

• 和绝对定位相似
• 但是还是会占据原来的文档流

定位元素的如何确定定位: 查找父级元素是否有定位元素,没有就找父父级元素,父父父...即找最近的父元素的定位元素,都没有就相对于整个html文档

浮动定位 position: float;

• 块级元素无法识别浮动元素的位置
• 内联、内联块、浮动、溢出隐藏、纯文本能识别浮动元素的位置
• 清除浮动(块级元素识别浮动元素的位置): 在块级元素中再加一个块级元素并加上 clear: both

.clearfix {
   clear: both;
}

<div class="box">
    <div></div>
    <div></div>
    <p class="clearfix"></p>
</div>

但是不推荐这个做，推荐用伪类::after  代替最后一个p元素然后设置 clear: both;
.box::after {
    content: "";
    display: block;
    clear: both;
}

当然上面的写法其实也麻烦，每个块级元素又要声明一遍，所以放到全局
ul::after
div::after {
    content: "";
    display: block;
    clear: both;
}

• 块级元素加了 float属性后，就变成 内联块级元素了

CSS 书写格式

• 样式书写顺序

• 命名规则