回忆系列之css eightday

用户1774600246736
236 阅读5分钟

背景

格式：background:image position repeat color

列表

每个列表都会给自己设置内边距（左）和外边距（上、下），缩进列表。

有时候我们不需要默认带的margin和padding所以我们将他都设置为0。

CSS中的每个列表选项是块状元素再加上标记，但是前面的记号不参与文档布局。不管你的列表在哪里它只会依附在列表的一侧（左侧）

每个li都会生成两个盒子（标记盒子、内容盒子）

列表类型

格式： list-style-type:value

  • none，没有标识。

    当有序列表中li被设置为none时不阻断有序列表的计算。

列表图像

可以使用图片作为每个列表项前面的记号，使用list-style-image

  • url()，图片的地址。

设置列表记号的位置

格式：list-style-position:value

  • outside，默认值。将记号放在标记盒子中。
  • inside，将记号放在内容盒子中（标记盒子始终存在，只不过为空）。

列表样式的简写属性

list-style:type image position

列表中如果有列表图片优先显示列表图片不显示系统自带的标记。

背景中如果有背景图片优先显示背景图片，不显示自己设置的background-color。

表格标题

caption-side:value

  • top，放在表格框之上
  • bottom，放在表格框之下

使用在table上面继承下去，或者直接在caption上面使用。

表格的边框

border-collapse:value

  • separate，分离边框，边框之间有距离。
  • collapse，单元格之间没有距离。边框都会被折叠在一起。

文档流和浮动

文档流指的是HTML中元素在计算布局、排版的过程中的机制。文档的源代码在书写时候有正常的顺序，是从上到下从左到右。在解释代码的时候就会从上到下、从左到右，解释的时候行内元素就在一行，块状元素会独占一行。

浮动的出现是为了打破正常的文档流从而实现环绕效果。浮动的本质就是为了实现文字环绕。

格式：float:value

  • none，无浮动。
  • left，元素向左浮动（其他内容包围在浮动元素的右边）
  • right，元素向右浮动（其他内容包围在浮动元素的左边）

利用float形成图片、文字环绕的原理：

  1. 父类高度塌陷，让跟随的内容可以和浮动元素在一个水平线上。
  2. 块状盒子和浮动元素会重叠，但是块状元素中的行框盒子和浮动元素不可重叠。

float属性的规则

  1. 浮动元素的位置，要考虑在它之前的块元素或浮动元素。

    正常元素在浮动元素之前，浮动元素需要新开一行。

    <!DOCTYPE html>
<html>

<head>
    <style>
        div{
            width:100px;
            height:100px;
            border:1px solid green;
        }
        #one{
            background-color: tomato;
        }
        #two{
            float:left;
            background-color:violet;
        }
    </style>
</head>

<body>
    <div id="one"></div>
    <div id="two"></div>
</body>

</html>

    正常元素取值时不考虑在它之前的浮动元素（就相当于他们不存在）

    <!DOCTYPE html>
<html>

<head>
    <style>
        div{
            width:100px;
            height:100px;
            border:1px solid green;
        }
        #one{
            float:left;
            background-color: tomato;
        }
        #two{
            width:110px;
            height:110px;
            background-color:violet;
        }
    </style>
</head>

<body>
    <div id="one"></div>
    <div id="two"></div>
</body>

</html>

  2. 不管什么元素浮动之后都会变成块状元素。

    <!DOCTYPE html>
<html>

<head>
    <style>

        span{
            float:left;
            width:500px;
            height:500px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <span>沛华真英俊?</span>
</body>

</html>

  3. 父元素没有设置具体高度，但是子元素浮动，将会导致父元素高度塌陷。

    <!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 1px solid pink;
        }

        span {
            float: left;
            width: 500px;
            height: 500px;
            border: 1px solid green;
        }
    </style>
</head>

<body>
    <div>
        <span>沛华真英俊?</span>
    </div>

</body>

</html>

  4. 浮动元素的后代也浮动时，将扩大范围，包含浮动的后代元素。

    <!DOCTYPE html>
<html>

<head>
    <style>
        div {
            float:left;
            border: 10px solid pink;
        }

        span {
            float: left;
            width: 500px;
            height: 500px;
            border: 1px solid green;
        }
    </style>
</head>

<body>
    <div>
        <span>沛华真英俊?</span>
    </div>

</body>

</html>

  5. 左浮动元素的边界不能超过容纳块的左内边界。右浮动元素的边界不能超过容纳块的右内边界，浮动元素的顶边不能比父元素的顶边高。

    容纳块：最近的块级祖辈元素。

    <!DOCTYPE html>
<html>

<head>
    <style>
        #f{
            width:300px;
            border:1px solid green;
        }

        #f div{
            width:120px;
            height:120px;
            float:left;
            border:1px solid pink;
        }
    </style>
</head>

<body>
    <div id="f">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

</body>

</html>

  6. 浮动元素四周的外边距不会产生折叠。

    <!DOCTYPE html>
<html>

<head>
    <style>
        #f{
            width:300px;
            border:1px solid green;
        }

        #f div{
            width:120px;
            height:120px;
            float:left;
            border:1px solid pink;

            margin:10px;
        }
    </style>
</head>

<body>
    <div id="f">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

</body>

</html>

  7. 在文档源代码处前面的元素像左浮动，后面的浮动元素的左边界会在前一个元素的右侧。

    <!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            width: 500px;
            height: 500px;
            border: 1px solid green;
        }

        #f div {
            float:left;
            width: 200px;
            height: 100px;
            border:1px solid red;
        }
    </style>
</head>

<body>
    <div id="f">
        <div id="f1">1</div>
        <div id="f2">2</div>
        <div id="f3">3</div>
    </div>

</body>

</html>

    ​

2021-04-02_141502.png

如果后面的浮动元素不与前一个浮动元素在一行，那么另起一行，新行上面的浮动元素的上边界在前一个浮动元素的下边界下面。

2021-04-02_141742.png

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            width: 500px;
            height: 500px;
            border: 1px solid green;
        }

        #f div {
            float:left;
            width: 200px;
            height: 100px;
            border:1px solid red;
        }
        #f #f2{
            height:150px;
        }
        #f #f3{
            width:100px;
        }
    </style>
</head>

<body>
    <div id="f">
        <div id="f1">1</div>
        <div id="f2">2</div>
        <div id="f3">3</div>
    </div>

</body>

</html>

2021-04-02_141920.png

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            width: 500px;
            height: 500px;
            border: 1px solid green;
        }

        #f div {
            float:left;
            width: 200px;
            height: 100px;
            border:1px solid red;
        }
        #f #f2{
            height:90px;
        }
        #f #f3{
            width:100px;
        }
    </style>
</head>

<body>
    <div id="f">
        <div id="f1">1</div>
        <div id="f2">2</div>
        <div id="f3">3</div>
    </div>

</body>

</html>

  1. 浮动元素的顶边不能比前方的浮动元素的顶边高。

    <!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            width: 500px;
            height: 500px;
            border: 1px solid green;
        }

        #f  div{
            width:200px;
            height:200px;
            border:1px solid green;
        }
        #f #f1{
            margin-bottom:30px;
        }
        #f #f2{
            width:255px;
            height:150px;
        }
        #f #f2,#f #f3{
            float:left;
        }
    </style>
</head>

<body>
    <div id="f">
        <div id="f1">1</div>
        <div id="f2">2</div>
        <div id="f3">3</div>
    </div>

</body>

</html>

2021-04-02_142451.png

清除浮动(抗浮动)

clear:value

clear属性用来设置元素自身怎么样，而不是设置的float元素怎么样。

clear是清除浮动是不准确的，浮动依然存在并没有清除。

官方的解释：元素盒子的边不能和前面的浮动元素相邻。

  • none，允许元素向另一个元素的任何一边进行浮动。

  • left，元素左侧抗浮动。

  • right，元素右侧抗浮动。

    向那边浮动你就抗那边。

  • both，两侧抗浮动

我们经常会用clear:both来解决父元素高度塌陷的问题：

<!DOCTYPE html>
<html>

<head>
    <style>
        #f {
            width: 300px;

            border: 3px solid pink;
        }

        #f .z {
            width: 120px;
            height: 120px;
            border: 1px solid red;
            float: left;
            margin:10px;
        }

        .clear{
            width:0px;
            height:0px;
            clear:both;
            border:1px solid blue;
        }
    </style>
</head>

<body>
    <div id="f">
        <div class="z"></div>
        <div class="z"></div>
        <div class="z"></div>
        <div class="z"></div>
        <div class="z"></div>
        <div class="z"></div>
        <div class="z"></div>
        <div class="clear"></div>
    </div>

</body>

</html>

上面的抗浮动方法的原理：

  1. 浮动元素不能超过父元素的顶、左、右。
  2. .clear类型对应的div不允许前面的向左浮动的元素对自己造成影响（你叫我过去我不过去）。还是应该在本身的位置。
  3. 这个时候父元素要把普通文档流中的元素包裹起来，进而导致父元素的高度被撑开了。

实例

项目布局：

  1. 目录结构问题：CSS、JS、img都需要单独放在单个的目录中。

  2. 默认样式问题

    很多元素一般都会有默认样式。所以通常有些人将这些标签的默认样式去掉(reset.css)。

    去掉的原因：

    1. 我们确实不需要。
    2. 有些默认样式在不同浏览器中显示的不一样。

    normalize.css，来处理一些默认的样式，其最大特点：

    1. 保护了有价值一些默认值。如果不同浏览器有不同的样式，它会力求统一样式。
    2. 修复了一些浏览器的bug。

    当用normalize.css的时候尽量放在页面的最前面引入。

页面的版心：PC端的网页一般固定一个宽度水平居中的一个盒子，版心通常用来显示网页中的主要内容。

版心具体多大按照设计稿来，一般在1100以上（1100~1300）

还有一种叫通栏盒子，通栏盒子就是从屏幕最左边到屏幕最右边。

avatar
文章
阅读
粉丝