css一些知识总结-css-ArcherWong博客

css一些知识总结

作者：ArcherWong
分类：css
时间：2019-01-04 10:33:01
阅读：385

# 1. margin和padding

如果边界画一条线，则margin的属于边界外，padding属于边界内

1. 当我们给元素背景色时，margin区域不会被着色，而padding区域会被着色。

2. 当上下两个块元素，一个设置margin-bottom:10px,下面的设置margin-top:20px,两个块元素的距离不是30  而是20。 而padding则是相加的情况

3. margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”

# 2. 外边距塌陷

定义：块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距

1、相邻的兄弟姐妹元素

```
<p style="margin-bottom: 10px;">上面的段落</p>
<p style="margin-top: 20px;">下面的段落</p>
```

两者的边距不是两者和30，而是二者较大的20.

2、块元素与其第一个或者最后一个子元素

```
<style>
    .my-title{
        margin:0;
        background-color: #808080;
    }   
    .parent{
        margin-top:35px;
        background-color: #00FF00;

}   
    .children-first{
        margin-top:20px;
        margin-bottom:40px;
    }   
    .children-second{
        margin-top:20px;
    }   
</style>
```

```
<div class="my-title">
    my title
</div>
<div class="parent">
    <div class="children-first">
        children
    </div>
    <div class="children-second">
        children
    </div>
</div>
```
# 3. 定位position

position 这个属性决定了元素将如何定位。它的值大概有以下五种：

position 值	|如何定位
---------|---
static | **position的默认值**。元素将定位到它的正常位置（上文提到过），其实也就相当于没有定位。元素在页面上**占据位置**。不能使用 top right bottom left 移动元素位置。
relative |	相对定位，相对于元素的正常位置来进行定位。元素在页面**占据位置**。可以使用 top right bottom left 移动元素位置。
absolute |	绝对定位，相对于最近一级的 **定位不是 static 的父元素来进行定位**。元素在页面**不占据位置**。 可以使用 top right bottom left 移动元素位置。
fixed |	绝对定位，相对**于浏览器窗口**来进行定位。其余和 absolute 一样，相当于一种特殊的 absolute。
inherit | 从父元素继承 position 属性的值。

#  其它

1. 对于块级元素，子元素的宽度默认为父元素的100%，
父元素宽度 = 子元素宽度 + padding + margin

2. 当时img这种元素时，不管我们怎么设置父元素的宽度和高度，而不设置img的宽和高时，img总是表现为其原始的宽和高。当宽和高设置一个时，另一个则等比例缩放。当宽和高都100%时则铺满这个父元素

3. 同为块元素，脱离文档流时候，以浮动为例当父元素有宽度，子元素没有宽度，子元素浮动后，注意子元素大小；当子元素有宽度，父元素没有宽度，子元素浮动后，注意父元素大小

标签：

下一篇：灵活的两列布局

css一些知识总结

文章分类

阅读排行

友情链接