首页 > 其他分享> 文章详细

康少带你玩转CSS-2

2019-05-30 16:53:36 阅读：173 来源： 互联网

标签：定位 50px 元素 height textSome 玩转康少 position CSS

1.CSS盒子模型

2.margin外边距

3.padding内填充

4.float 浮动

5.clear 清除

6.overflow 溢出属性

7.position 定位 static(静态的)relative(相对定位)absolute（绝对定位）fixed（固定）

8.是否脱离文档

9.z-index 模态框

10.opacity 透明

1.CSS盒子模型

margin(外边距):用于控制元素与元素之间的距离，margin的最基本的用途就是控制元素周围空间的间隔

<style>
        body {
            margin: 0;
        }
        .a{
            width: 50px;
            height: 50px;
            color: #FF0000;
            margin: 10px 10px 10px 10px;
            border: 2px solid;
        }
        .b{
            width: 50px;
            height: 50px;
            color: pink;
            margin: 10px 20px 30px 40px;
            border: 2px solid;
        }
    </style>
    <div class="a"></div>
    <div class="b"></div>

　结果:

2.margin外边距

<style>
        .a{
            border: 2px solid red;
            width: 50px;
            height: 50px;
            margin-left: 50px;
        }
        .b{
            border: 2px solid black;
            width: 50px;
            height: 50px;
        }
    </style>

<div class="a"></div>
<div class="b"></div>

　结果:

顺序：上右下左

补充padding的常用简写方式：

提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

3.padding内填充

<style>
    .a{
        border: 2px solid red;
        width: 50px;
        height: 50px;
        /*margin : 5px 5px 5px 5px;*/
        padding: 5px 5px 5px 5px;
    }
    .b{
        border: 2px solid black;
        width: 50px;
        height: 50px;
    }
</style>

结果:

4.float 浮动

只要是页面布局都会用到浮动

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

<style>
    .a{
        border: 2px solid red;
        width: 30px;
        height: 30px;
        float: left;
    }
    .b{
        border: 2px solid black;
        width: 30px;
        height: 30px;
        float: left;
    }

</style>
<div class="a"> div</div>
<div class="b">div</div>

注意:使用浮动有他的好处但是他也会带来弊端，如果当上图两个div浮动起来了外边的边框就会缩起来

比如说这两个div在你的口袋中，你把这两个div拿了出来放在口袋扣处，这个口袋就会鼓不起来了

就会出来如下图效果

5.clear 清除

解决方案：在你会出现问题的地方继承clearfix 然后去定义一个clearfix的方法

.clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

6.overflow 溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

　　当你内容超出了你标签的宽和高的时候就会产生溢出的状况:

#解决方法（overflow）

#解决方法（overflow）

<style>
    .d1{
        border: 2px solid black;
        width: 50px;
        height: 50px;
        overflow: auto;
    }


</style>
```

```html
<div class="d1">
    <span>dbhaseifhgweofheroifgherktghedruoghdroghdrtoighdrog</span>
</div>

7.position 定位

static(静态的)

　　position的默认值为static 默认就是静态的

relative(相对定位)

　　相对定位是根据自身的原本位置进行偏移。

　　注意：移动相对定位元素，但它原本所占的空间不会改变。

<style>
    .q1{
        border: #FF0000 1px solid;
        width: 100px;
        height: 100px;
        position: relative;
        left: 100px;

    }
    .q2{
        border: #0000FF 1px solid;
        width: 100px;
        height: 100px;

    }

</style>

<div class="q1"></div>
<div class="q2"></div>

absolute（绝对定位）　　

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

 <style>
h2
{
   position:absolute;
   left:100px;
   top:150px;
}
</style>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>

fixed（固定）

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

<style>
p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}
</style>

Some more text
注意: IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.
Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text

8.是否脱离文档

脱离文档流:
　　1.浮动
　　2.绝对定位
　　3.固定定位

不脱离文档流:
　　1.相对定位

9.z-index 模态框

<style>
    /*body {background-color: darkgray}*/
    .a2{
        background-color: darkgray;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
    }
    .a3{
        width: 200px;
        height: 200px;
        background-color: #eeeeee;
        position: fixed;
        top: 50px;
        left: 50px;
        z-index: 1000;
        margin-top: 250px;
        margin-left: 50%;
    }

</style>
<div class="a2"></div>
<div class="a3"></div>

10.opacity 透明

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

标签：定位,50px,元素,height,textSome,玩转,康少,position,CSS
来源： https://www.cnblogs.com/ZKPython/p/10950455.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9