【CSS知识点练习】第一篇

作者: 前端菜篮子 | 来源:发表于2019-09-30 17:20 被阅读0次

01. `shape-outside`：文字环绕效果

image

<html>
    <head>
        <style>
        .main {
            width: 400px;
            margin: 100px auto;
        }
        .circle{
            width: 200px;
            height: 200px;
            float:left;
            background-color: blue;
            border-radius:50%;
            shape-outside: circle();
        }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="circle"></div>
            <p>
                Sometimes a web page's text content appears to be
                funneling your attention towards a spot on the page
                to drive you to follow a particular link. Sometimes
                you don't notice.
            </p>
        </div>
    </body>
</html>

02. `margin`负数时

先画出没有margin属性的两个div

image
代码如下：

<html>
    <head>
        <style>
            .tdiv {
                border-style: dotted;
                margin:100px auto;
                width:250px;
                height: 150px;
            }
            .div {
                width: 100px;
                height: 100px;
                background-color: aqua;
                float: left;
            }
            .fuchsia {
                background-color: fuchsia;
            }
        </style>
    </head>
    
    <body>
        <div class="tdiv">
            <div class="div"></div>
            <div class="div fuchsia"></div>
        </div>
    </body>
</html>

为上面的蓝色块中加入margin属性

margin-left

image
margin-right

image
注意：左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似

03. 外边距合并

image
为外层div加上（去掉）overflow:hidden查看效果

<html>
    <head>
        <style>
            .outer {
                background-color: aqua;
                /**请查看加上该属性与不加的区别*/
                overflow: hidden;  
                /**这里也可以加个margin,加与不加查看区别*/
                margin-bottom: 20px;
            }
                .inner {
                margin-top: 30px;
            }
        </style>
    </head>
    <body>
        Laborum commodo voluptate commodo minim tempor elit ut 
        enim id laboris proident. 
        Consectetur sit enim pariatur exercitation est 
        sit occaecat nostrud proident nisi adipisicing pariatur do. 
        Ut eu sit cupidatat nulla ex aliquip nisi Lorem. 
        Fugiat do enim ex laborum incididunt. 
        Ex do mollit velit adipisicing.
        Fugiat anim et adipisicing culpa esse mollit 
        culpa aliquip nostrud consequat. 
        Ut commodo quis fugiat labore sit sunt labore dolor proident. 
        Id sit nisi velit voluptate mollit. 
        Dolor aute dolor esse esse esse nulla.
        
        <div class="outer">
            <div class="inner">
            Culpa ea fugiat ad pariatur pariatur fugiat. 
            Aute Lorem officia aliqua ex incididunt elit do ut. 
            Aliquip eiusmod eu laboris nulla ex deserunt occaecat aute aute. 
            Ad amet velit nisi eiusmod enim quis fugiat duis proident ullamco.
            </div>
        </div>
    </body>
</html>

04. 消除浮动的影响之：`flow-root`

浮动元素使其父元素高度塌陷 :我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。

<html>
    <head>
        <style>
            .pdiv {
                background-color:cornflowerblue;
                border: 2px solid red;
                /**父元素加overflow:hidden
                可以消除子元素float对父元素的影响*/
                /**overflow: hidden; */
                
                /**
                display新的属性值
                虽然目前仅几个最新浏览器支持，
                但完全可以通过@supports()属性做完美降级处理。
                */
                display: flow-root;
            }
            /**
            为父元素添加伪类可以
            消除子元素float对父元素的影响
            .pdiv::after {
                content:"";
                clear:both;     //清除浮动
                display:block;  //确保该元素是一个块级元素
            }
            */
            .cdiv {
                background-color:burlywood;
                border: 1px solid brown;
                width: 100px;
                height: 100px;
                margin: 20px;
                /** float: left; */
            }
        </style>
    </head>
    <body>
        <div class="pdiv">
            <div class="cdiv">
            </div>
            <div class="cdiv">
            </div>
        </div>
    </body>
</html>

未加float时：

image
将上面代码中的float放开：

image

在第一个示例中仿佛父元素消失了，但在第二个示例中发现其实父元素并没有消失，只是高度被计算为0。这就要回到浮动元素的特性来说明此问题“当元素设置浮动后，会自动脱离文档流”，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况）
解决方法：

a、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。

b、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。

c、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。

d、给父元素添加 overflow：hidden;

e、给父元素添加伪类::after清除浮动
新的解决方法：display: flow-root;
display的32种写法

05. `flex布局之margin:auto`的神奇用法

5.1 照例先添一个阮老师的Flex布局教程
5.2 再来一个CSS选择器
5.3 下面进入正式的案例：
image

<html>
    <head>
        <style>
        .container {
            display: flex;
        }
        .container>div {
            width: 40px;
            height: 40px;
            border: 1px solid black;
            background-color: aqua;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
    </body>
</html>

image

06. `flex布局之flex-grow`

image

6.1 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
6.2 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
6.3 当几个项的flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部

案例的基本代码部分同第5个（上一案例）。

image
image
image

07. `input`的宽度

并不是给元素设置display:block就会自动填充父元素宽度。input就是个例外，其默认宽度取决于size特性的值

image

<html>
    <head>
        <style>
            .div {
                width: 300px;
                height: 50px;
                margin: 50px;
                background-color: cornflowerblue;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <input />
        </div>
    </body>
</html>

image
为input增加size特性

image
选中对应的元素，右键，Add attribute

image

08. 定位`position`

A. 有哪几种定位方式：

①、Static 定位

/**
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
*/

②、Fixed 定位

/**
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
*/
p.pos_fixed{
    position:fixed;
    top:30px;
    right:5px;
}

③、Relative 定位

/**
相对定位元素的定位是相对其正常位置。
可以移动的相对定位元素的内容和相互重叠的元素，
它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
*/
h2.pos_left{
    position:relative;
    left:-20px;
}
h2.pos_right{
    position:relative;
    left:20px;
}

④、Absolute 定位

/**
绝对定位的元素的位置相对于最近的已定位父元素，
如果元素没有已定位的父元素，那么它的位置相对于<html>
Absolute定位使元素的位置与文档流无关，因此不占据空间。
Absolute定位的元素和其他元素重叠。
*/
h2{
    position:absolute;
    left:100px;
    top:150px;
}

<!-- clip：剪辑一个绝对定位的元素-->
img {
    position:absolute;
    clip:rect(0px,60px,200px,0px);
}
<img src="/attachments/cover/baby.jpg" 
    width="100" height="140" />

⑤、sticky（粘性）定位：粘性定位要起作用，需要设置最后滞留位置

<!--
粘性定位的元素是依赖于用户的滚动，
在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative;
而当页面滚动超出目标区域时，
它的表现就像 position:fixed，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，
换言之，指定 top, right, bottom 或 left 
四个阈值其中之一，才可使粘性定位生效。
否则其行为与相对定位相同。
-->
<html>
    <head>
        <style>
        div.sticky {
          position: -webkit-sticky;
          position: sticky;
          top: 0;
          padding: 5px;
          background-color: #cae8ca;
          border: 2px solid #4CAF50;
        }
        </style>
    </head>
    <body>
        <p>尝试滚动页面。</p>
        <p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
        <div class="sticky">我是粘性定位!</div>
        <div style="padding-bottom:2000px">
          <p>滚动我</p>
          <p>来回滚动我</p>
          <p>滚动我</p>
          <p>来回滚动我</p>
          <p>滚动我</p>
          <p>来回滚动我</p>
        </div>
    </body>
</html>

image

⑥、z-index

/**
元素的定位与文档流无关，它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序
    （即哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序
*/
img{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}
/**
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z-index，
最后定位在HTML代码中的元素将被显示在最前面。
z-index 进行定位元素：
(position:absolute, position:relative, or position:fixed)
*/

⑦ 光标类型cursor也可以算是定位中的一个知识点

B. 绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度

image

C. 为某个div的子div加z-index是否起效？（与49个知识点中的第9个知识点不一致：层叠上下文：小辈就是小辈，再厉害也只是个小辈）

<html>
    <head>
        <style>
            div {
                /**
                该position注释掉后，
                下面第一个div的子元素在最上层；
                
                若该注释放开，则子div会在第二个div的下面
                但为子div加上z-index后还是可以使其在上层
                
                */
                /**position: relative; */
                width: 100px;
                height: 100px;
                background-color: aqua;
                border: 1px solid black;
            }
            .div2 {
                margin-left: 30px;
                margin-top: -60px;
            }
            .div3 {
                margin-left: 60px;
                margin-top: -60px;
            }
            
            .inner {
                position: relative; /**absolute也一样*/
                left: 25px;
                top: 25px;
                width: 50px;
                height: 50px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="inner"></div>
        </div>
        <div class="div2"></div>
        <div class="div3"></div>
    </body>
</html>

image
样式中div的position:relative放开看效果

image
再为子元素加上z-index:10看看效果

image

【CSS知识点练习】第一篇

01. `shape-outside`：文字环绕效果

02. `margin`负数时

03. 外边距合并

04. 消除浮动的影响之：`flow-root`

05. `flex布局之margin:auto`的神奇用法

06. `flex布局之flex-grow`

07. `input`的宽度

08. 定位`position`

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

【CSS知识点练习】第一篇

01. shape-outside：文字环绕效果

02. margin负数时

03. 外边距合并

04. 消除浮动的影响之：flow-root

05. flex布局之margin:auto的神奇用法

06. flex布局之flex-grow

07. input的宽度

08. 定位position

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

01. `shape-outside`：文字环绕效果

02. `margin`负数时

04. 消除浮动的影响之：`flow-root`

05. `flex布局之margin:auto`的神奇用法

06. `flex布局之flex-grow`

07. `input`的宽度

08. 定位`position`