自学内容网 自学内容网
自学内容网 > 正文

Css基础二

🕗 发布于 2024-11-21 00:15 html  css  

一.浮动

默认情况下，块级元素纵向有序排列，行内块元素横向有序排列(这样的排列称为：标准流)。

但在很多情况下，需要块级元素横向排列，除了之前提到的转换成行内块元素外，主要用到的方法是设置浮动(float)的元素。

格式：float:left  或者 right

引入一个案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:0 ;
}
.red,.green,.blue{
width: 200px;
height: 200px;
}
.red{
background: red;
float:left;
}
.green{
background: green;
float:left;
}
.blue{
background: blue;
float:right;

}
span{
float: left;
background: pink;
width:100px;
height: 200px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<span></span>
</body>
</html>

浮动的特点：

1.浮动只影响后面的元素；

2.浮动以元素顶部为基准对齐；

3.浮动可实现模式转换；

二、清除浮动

有四种方法：

1：给父容器设置高度（限制使用）

2：通过设置clear:left | right  | both 

3：给父容器设置 overflow:hidden

4：通过伪元素  （.clearfix:after 表示在.clearfix后面插入标签）

（clearfix只是一个元素名，也可以自定义其他）

     .clearfix:after{

           content:"";

           height:0; line-height:0;

           visibily:hidden;

           clear:both;

           display:block;

      }

    .clearfix{

       zoom:1    　　　为了兼容IE浏览器

     }

案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .header,

        .main,

        .footer {

            width: 500px;
        }

        .header,

        .footer {

            height: 100px;

            background: #000;
        }

        .content {

            width: 300px;

            height: 300px;

            background: orange;

            float: left;
        }

        .sidebar {

            width: 190px;

            height: 300px;

            background: green;

            float: right;
        }

        .main {

            background: #eee;

            margin: 10px 0;

            /*overflow: hidden;*/

        }


        .clearfix:after {

            /* 不显示内容 */

            content: ".";

            display: block;

            height: 0;

            line-height: 0;

            visibility: hidden;

            clear: both;
        }

        /*兼容ie浏览器*/

        .clearfix {

            zoom: 1;
        }

    </style>

</head>

<body>

    <div class="header"></div>

    <div class="main clearfix">

        <div class=" content "></div>

        <div class="sidebar"></div>

        <!-- 额外标签法 -->

        <!-- <div style="clear:both;"></div> -->

    </div>

    <div class="footer"></div>

</body>

</html>

三、CSS初始化

为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。

body{
margin: 0;
padding: 0;
}

四、定位盒子居中

利用"父相子绝"的原理，可以使子元素不按照标准流的格式位于顶部，而可以通过调整位置，在其他方位。但是，没办法使其居中在父元素底部。需要先利用父盒子：position: relative; 子盒子：position: aboslute; left:50%  然后，在子盒子中设置：margin-left: -居中元素宽度的一半。相当于将需要居中元素左移其的一半。

五、CSS可见案例

overflow: hidden; 将超过设定盒子的元素裁掉，溢出隐藏。

visibility:hidden;  隐藏元素，但依旧占据原来位置。

display:none;      隐藏元素，隐藏后不占据原来位置。

display:block;     元素可见

display: none; 和 display:block；常常结合用在js中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1,
        .block1,
        .block2,
        .block3 {
            width: 500px;
            height: 500px;
        }

        .box1 {
            /* 将超过box1大小的裁掉。 */
            overflow: hidden;
        }

        .block1 {
            background: tomato;
        }

        .block2 {
            background: #333;
        }

        .block3 {
            background: rgb(1, 10, 102);
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#block1">div1</a>
        <a href="#block2">div2</a>
        <a href="#block3">div3</a>
    </div>

    <div class="box1">
        <div class="block1" id="block1"></div>
        <div class="block2" id="block2"></div>
        <div class="block3" id="block3"></div>

    </div>
</body>

</html>

六、css之内容移除(网页优化)

text-indent: -5000px;
或者

height:0;padding-top:100px;overflow:hidden;

七、CSS精灵图

将页面涉及到的所有零星背景图片集合到一张大图中。然后通过图像大小以及在精灵图中的位置移动到原点。

background: url() x y;

八、滑动门

功能：用两个元素，分别放在不同的盒子中，合并在一起，放入文字等。

其他：padding是内边距，对左右下有左右。会以盒子内边距为参考，把盒子撑开。
行元素、块元素、行内块元素，若不设置内容，就没有宽度，所以需要padding撑开。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
            float: left;
            height: 35px;

        }

        ul li a {
            display: inline-block;
            text-decoration: none;
            background: url("../04-案例/bg_r1_c1.png") no-repeat;
            height: 35px;
            padding-left: 7px;
        }

        ul li a span {
            display: inline-block;
            height: 35px;
            line-height: 35px;
            background: url("../04-案例/bg_r1_c2.png") right;
            padding-right: 30px;
        }

        a:hover {
            background: url(../04-案例/blue_r1_c1.png) no-repeat;
        }

        a span:hover {
            background: url(../04-案例/blue_r1_c2.png) right;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#"><span>百度</span></a></li>
        <li><a href="#"><span>百度，你好吗？</span></a></li>
        <li><a href="#"><span>每天正能量满满，gogogo!</span></a></li>
    </ul>
</body>

</html>

emmet用法（VS Code）：

.header>(.logo>img[src="logo.jpg"])+(.search>input[type="text"]+input[type="button"])

括号可以区分等级。

效果如下：

<div class="header">
    <div class="logo"><img src="logo.jpg" alt=""></div>
    <div class="search"><input type="text"><input type="button"></div>
</div>


VScode自动换行：
File>Perference>Setting>输入editor:WordWrap 将第一个改成on


原文地址：https://blog.csdn.net/crazy_cz/article/details/108343641

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024