11.06 CSS的基础应用2

最新推荐文章于 2023-02-22 19:21:49 发布

紫色枫韵

最新推荐文章于 2023-02-22 19:21:49 发布

阅读量202

点赞数

本文链接：https://blog.csdn.net/cw1249801974/article/details/78463366

版权

CSS布局

1.1盒子模型内外边距和边框介绍

当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成，分别是Margin，Border，Padding，Content。

1.边框

用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位），样式，还有颜色。
你也可以通过设置样式为 none 或 hidden 来明确地移除边框。
如果一次只指定某一个方向的边框，就用属性：border-top，border-right， border-bottom，border-left。

2.外边距和内边距

使用外边距和内边距调整元素的位置，并在其周围创建空间。用margin属性或者 padding 属性分别设置外边距和内边距的宽度。

如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。
如果你指定两个宽度，第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。
你也可以按照顺序指定四个宽度：上、右、下、左。

注意：
1.外边距margin可以为负，内边距不可以为负。
2. 行内元素设置上下边距不影响行高。
3.边框是可见的，边距是不可见的，只能看到对其他元素的影响。

3.简写属性

我们可以根据规定顺序，简写属性：
- 设置两个属性值，那么第一个值表示上下边框的属性，第二个值表示左右边框的属性。
- 设置三个属性值，第一个值表示上边框属性，第二个值表示左右边框属性，第三个值表示下边框属性。
- 设置四个值，一次表示上右下左边框的属性。

4.行内元素的盒子模型

行内元素的盒子模型只能得到一行高度的空间，行高由line-height属性决定，没有设置该属性则为内容默认高度。

如果设置上下边框或者边距，会导致盒子高度超过行高，盒子上下部分将会与其他元素重叠。这就是行内元素不可设置上下边距的原因。

综上所述，不推荐对行内元素设置盒子属性，一般先用display属性设置内联元素为块级元素显示，再设置盒子属性。

5.元素盒子属性的默认值

大多HTML元素的盒子属性默认值都为0。
少部分HTML元素盒子属性存在默认值，如：body,p,ul,li,form标签等，因此我们在需要的时候可以先初始化他们的属性为0。

1.2 display属性和实例

1.元素的显示和隐藏

使用display:none将元素隐藏起来，此时元素不占用页面空间。
使用visibility:hidden也可以隐藏元素，此时元素占用空间。

2.通过display改变内联元素或块级元素

(1)display:block就是将元素显示为块级元素.

block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度默认是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

(2)display:inline就是将元素显示为行内元素.

inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底外边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

3.display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

1.3 浮动和清除浮动

1.什么是浮动
我们可以用一句话描述浮动的元素的特点：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

div{float：left/right};

浮动会脱离文档流
脱离文档，也就是说浮动不会影响普通元素的布局。我们可以直接理解成，浮动的元素在普通文档流的上面一层，更靠近屏幕的上层。

默认三个设置了宽高的block元素，本来会格子独占一行；
如果框1设置了float:right，他会忽略框2和框3，直到碰到父元素；
如果，框1设置成float:left，就会覆盖住处在普通文档流中的框2。(框1浮动后，框1原本在普通文档流中的位置被框2顶替，而框1向左浮动后，由于处在普通文档流的上层，就会盖住框2)。

浮动可以内联排列

浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这样可以使区块元素在一行显示。
当三个区块都浮动，而一行的空间不够了，会引起元素换行。
但是如果每个元素的高度不一致，会出现“卡住”的情况。

然而，浮动也会导致一些我们不希望看见的事情发生。

浮动会导致父元素高度坍塌
浮动会脱离文档流，这个问题对整个页面布局有很大的影响。

2.如何清除浮动

清除浮动
清除浮动的底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。
要注意了，我们是通过在别的元素上清除浮动来实现撑开高度的，而不是在浮动元素上。

清除浮动的最佳实践

.clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

1)display:block使生成的元素以块级元素显示,占满剩余空间。
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互。
4)通过content:”.”生成内容作为最后一个元素，至于content里面是点还是其他都是可以的。
5)zoom：1触发IE hasLayout。
通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容。

触发BFC
BFC全称是块状格式化上下文，它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。

BFC的主要特征
1. BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
2. BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。

其中，BFC清除浮动就是用的“包含浮动”这条特性。

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断，比较局限。所以以上的BFC触发方法都可以用来解决浮动问题，但是要选择合适的使用场景。

3.总结
有很多方法可以进行清除浮动这样的操作，归根到底，从原理上讲其实分为两种。

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性。（after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素）；

其二，使父元素触发BFC。（通过设置父元素 overflow 或者display：table 属性来闭合浮动）

1.4 CSS position属性

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
position属性设置元素定位类型，可以通过top,bottom,right,left属性，控制元素的定位位置。
position属性值有static，relative，absolute，fixed四个值。

1.static静态定位

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

2.fixed固定定位

脱离标准流，在页面中不占位置。
不管页面有多大，永远相对于浏览器的边框来定位。

*{
    margin: 0;
    padding: 0;
}
.c1{
    width: 100px;
    height: 100px;
    background-color: brown;
}

.c2{
    width: 100px;
    height: 100px;
    background-color: blue;
}

.c3{
    width: 100px;
    height: 100px;
    background-color: black;
    position: fixed;/*固定定位，不占位置，永远相对于浏览器来定位，不管窗口上下拉动，都不会消失（如广告位）*/
    left:20px;
    top:20px;
}

<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>...
</body>

3.relative 相对定位

不脱离标准流，在页面中占位置。
相对于自己原来的位置来进行定位。

*{
    margin: 0;
    padding: 0;
}
.c1{
    width: 100px;
    height: 100px;
    background-color: brown;
    }

.c2{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;/*相对定位，占位置，相对于自己原来的位置定位*/
    left: 20px;
    top:20px;
}

.c3{
    width: 100px;
    height: 100px;
    background-color: black;
    }

<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>

4.absolute绝对定位

脱离标准流，在页面中不占位置（浮起来）。
如果没有父元素，则相对于body定位；如果有父元素，但父元素没有定位，那么还是相对于body定位；如果父元素有定位，那么相对于父元素来定位。

*{
    margin: 0;
    padding: 0;
}
.c1{
    width: 100px;
    height: 100px;
    background-color: brown;
    position: absolute;/*绝对定位，不占位置，无父级定位则相对于body来定位*/
    left:20px;
    top:20px;
}
.c2{
    width: 100px;
    height: 100px;
    background-color: blue;
}
.c3{
    width: 100px;
    height: 100px;
    background-color: black;
}

<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>

5.定位元素的重叠

z-index属性控制定位元素的重叠顺序，属性值是z轴上的值。
Z-index只能在绝对定位元素上奏效（position:absolute）。
Z-index的值是设置一个定位元素沿Z轴的位置，其值越大，离用户越近，所以若两个定位元素，Z-index值越大的将会覆盖值越小的定位元素。

默认值是0，可以是正负数。
下面首先不设置z-index。

.c1{
    width: 100px;
    height: 100px;
    background-color: black;
    position: absolute;
    left:20px;
    top:20px;
}

.c2{
    width: 50px;
    height: 50px;
    background-color:blue;
    position: absolute;
}

效果是：蓝色定位元素在黑色定位元素上面
加Z-index，使得黑色定位元素在蓝色上面。

c1{
    width: 100px;
    height: 100px;
    background-color: black;
    position: absolute;
    left:20px;
    top:20px;
    z-index: 1;/*值只要比另一个定位元素的值大，就会在另一个定位元素之上*/
}

.c2{
    width: 50px;
    height: 50px;
    background-color:blue;
    position: absolute;
    z-index: 0;
}

作业

1.添加广告

CSS

    .c{
        width: 100px;
        height: 70px;
        background-color: orange;
        position: fixed;
        left:20px;
        top:500px;
    }

原代码

<html>
 <head>
  <meta charset="UTF-8">
  <title>欢迎光临Coding Coffee </title>
  <link href="E:\学习\随堂笔记\CSS\main.css" rel="stylesheet" type="text/css"></link>
  <style>
    ul{
        list-style-type:none;
        margin:0;
        padding: 0;
        background-color: brown;
    }
    li a{
        text-decoration: none;
        display: block;
        padding:15px 18px;
        color: #ffffff;
    }
    li{
        float:left
    }
    li:hover{
        background-color: #ccc;
    }
    .c{
        width: 100px;
        height: 70px;
        background-color: orange;
        position: fixed;
        left:20px;
        top:500px;
    }
  </style>
 </head>
 <body>
    <div class="a">
        <ul>
            <li><a href="咖啡.html">产品列表</a></li>
            <li><a href="分店.html">分店列表</a></li>
            <li><a href="joinUs.html">加入我们</a></li>
            <li><a href="onlineOrder.html">网上订购</a></li>
            <div style="clear:both"></div>
        </ul>
    </div>
    <div class="b">
        <h1>欢迎光临Coding Coffee </h1>
        <img src="../咖啡图片/c9.jpg">
        <p>
            敬请关注我们定期的<a href="咖啡.html">产品列表</a>
            CODING COFFEE是一家只对程序员开放的<em>互联网咖啡馆。</em>
        </p>
        <p>
            请查看我们的<a href="分店.html">分店列表</a>
        </p>
        <p>
            如果您想<a href="joinUs.html">加入我们</a>，请查看我们的招聘列表。
        </p>
        <p>
            <a href="onlineOrder.html">网上订购</a>，天天赢好礼！
        </p>
    </div>
    <div class="c">
        <p><b>双十一预热<br>第二杯半价！</b></p>
    </div>
 </body>
</html>

2.百度首页

<html>
 <head>
    <title> New Document </title>
    <meta charset="UTF-8">
    <style>
        .clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }
        .clearfix { *zoom:1; }
        .a li{
            float:left;
            text-indent:20px;
            text-decoration:underline;
            list-style-type: none;
            font-size:13px;
        }
        .b{
            font-weight:bold;
        }
        .c{
            background-color:blue;
        }
        .topwrapper{
            position:absolute;
            right:15;
            top:20;
        }
        .bodywrapper{
            font-size:18px;
            position:absolute;
            left:50%;
            transform:translate(-50%);
            top:180px;
            text-align: center;
        }
        .wrapper{
            font-size:13px;
            text-align: center;
            position:absolute;
            left:50%;
            transform:translate(-50%);
            bottom:100px;
        }
        .downwrapper{
            position:absolute;
            left:50%;
            transform:translate(-50%);
            bottom:60px;
        }
        .bottomrapper{
            font-size:13px;
            position:absolute;
            left:50%;
            transform:translate(-50%);
            bottom:20px;
        }
    </style>
 </head>
 <body>
    <div class="topwrapper clearfix">
        <ul class="a">
            <li class="b">新闻</li>
            <li class="b">hao123</li>
            <li class="b">地图</li>
            <li class="b">视频</li>
            <li class="b">贴吧</li>
            <li class="b">学术</li>
            <li>登录</li>
            <li>设置</li>
            <li class="c">更多产品</li>
        </ul>
    </div>
    <div class="bodywrapper clearfix">
        <img src="baidu.png"><br>
            <p><input type="text" style="width:540px;
                                    height:36px;
                                    padding:0.6px 9px;
                                    border:1px solid #adadad;" >
            百度一下</p>
    </div>
    <div class="wrapper clearfix">
        <img src="erweima.jpg"><br>
        <p><b>手机百度</b></p>
    </div>
    <div class="downwrapper clearfix">
        <ul class="a">
            <li>把百度设为主页</li>
            <li>关于百度</li>
            <li>About Baidu</li>
            <li>百度推广</li>
        </ul>
    </div>
    <div class="bottomrapper clearfix">
        <p>@2017 BaiDu 使用百度前必读 意见返馈 京ICP证030173 京公网安备11000002000001号</p>
    </div>
 </body>
</html>

紫色枫韵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11.06 CSS的基础应用2

CSS布局1.1盒子模型内外边距和边框介绍当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成，分别是Margin，Border，Padding，Content。1.边框用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位），样式，还有颜色。你也可以通过设置样式为 none 或 hidden 来明确地移除边框。如
复制链接

扫一扫