首页 > 代码库 > CSS基础(2)

CSS基础(2)

2024-10-20 10:35:02   212人阅读

脱离文档流

<title></title>
<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    li{

        list-style: none;
        /*float: left;*/
        float: right;      /*一直在包含块最右边*/
        /*脱离文档流*/
        border: 1px solid black;
    }
    ul{
        border: 1px dashed red;
        /*触发BFC(块级格式下上下文：block formatting context)自动找回*/
        overflow: hidden;
    }
    /*子级浮动导致父级高度塌陷*/
    a{
        float: left;
    }
    /*行内元素设置浮动自动转化为块级元素*/
    p{
        float: left;
        /*浮动文本类的标记，如果没有设置宽度，则自动折叠到最小宽度*/
    }
    .big{
        width: 400px;
        height: 400px;
        border: 1px solid black
    }
    .small{
        width: 200px;
        height: 200px;
        background: red;
        float: left;
        /*子级只在父级内浮动*/
        /*不会穿越到内边距里*/
    }
    .small_two{
        width: 200px;
        height: 200px;
        background: blue;
    }
    /*浮动会影响别的元素*/
    /*如果父级没有足够的空间让子级浮动，子级则自动换行*/
</style>


<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
</ul>
<ul>
    <li>qq</li>
    <li></li>
    <li></li>       
</ul>
<a href="">行内a</a>
<p>p标签</p>
<div class="big">
    <div class="small">

    </div>
    <div class="small_two">

    </div>
</div>
word-break:break all(控制英文单词不超出范围)
box-sizeing:border-box(改变成IE盒模型)
默认字体在不同电脑可能造成换行

定位

1.相对定位

positon:relative;
left:20px;

2.绝对定位:绝对定位的视角位于 浏览器的 （0，0） 点（或者是body的 （0，0） 点）

position:absolute
top:10px;
left:10px;

3.非静态定位（相对、绝对、固定）：为父级（或者是上上级）设置相对定位，为子级设置绝对定位。 元素会以包含它的（非静态定位）的 （0，0）点开始移动。

4.浮动和绝对定位脱离文档流，使行内元素变块级元素。

5.固定定位:

position:fixed;
left、right、top:10px;

6.静态定位：默认的属性

position:static

两个元素重叠时用定位。

　　

BFC

BFC（Block Formatting Context） 块级格式上下文

1.是一个环境，一个隔离的独立容器，与布局相关，写了html标签他就已经是一个BFC，BFC形成后，里面内容和布局和外面互不干扰。

触发BFC的条件

  • 给父级元素设置属性 overflow：hidden。
  • 子集 margin-top 带下。
  • 子集浮动导致父级高度的塌陷。
  • 如果须要超出部分有滚动条则设置属性 overflow:scroll 或者 overflow-x：scroll为横向设置，overflow:scroll为纵向设置。

1.img之间有空隙，可给父级设置font-size：0；

2.为选择器添加：hover 并且添加文字变大的效果，最好给宽高定死。不然会影响下面的元素。

3.选择器 类选择器 [空格] 伪类选择器 [空格] 类选择器

蒙板

步骤：

    <style type="text/css">
        .box1{
            width: 600px;
            height: 400px;
            position: relative;
            overflow: hidden;
        }
        .box1 img{
            width: 600px;
            height: 400px;
        }
        .mb{
            width: 600px;
            height: 100px;
            outline: 1px solid black;
            background: rgba(22,333,0,.2);
            position: absolute;
            bottom: 0;
        }
        .mb:hover{
            transition:all linear 2s;           渐变
            bottom: -100px;
        }
        .mb-right{
            width: 100px;
            height: 400px;
            outline: 1px solid black;
            background: rgba(111,999,444,.6);
            position: absolute;
            right:0;
            bottom: 0;
        }
        .mb-right:hover {
            transition:all linear 2s;
            right:-100px;
        }

        同时动时选择父容器

        .box1:hover .mb{
            transition:all linear 2s;
            bottom: -100px;
        }
        .box1:hover .mb-right{
            transition:all linear 2s;
            right:-100px;
        }
    </style>
<body>
<div class="box1">                  主容器
    <img src="http://www.mamicode.com/images/NBA11.jpg">    背景图
    <div class="mb">·               蒙板
        12312
    </div>
    <div class="mb-right">          蒙板

    </div>
</div>
</body>
 

CSS基础(2)


联系
我们