首页 > 其他分享> 文章详细

css快速入门（下）

2022-02-17 23:31:50 阅读：194 来源： 互联网

标签：入门 solid 快速 height 1px margin 20px border css

css快速入门（下）

七、盒子模型

1、什么是盒子模型

margin：外边距；
padding：内边框；
border：边框；

2、边框

border：粗细样式颜色
- 边框的粗细
- 边框的样式
- 边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子</title>
    <style>
        /*body总有一个默认的外边距为0*/
        /*h1,ul,li,a,body{*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    text-decoration: none;*/
        /*}*/
        /*border：粗细 样式 颜色*/
        #box{
            width: 300px;
            border: 1px solid peru;
        }
        h2{
            font-size: 16px;
            background-color: #aabdd1;
            line-height: 30px;
            margin: 0;
            color: #ffffff;

        }
        form{
            background: #92f0eb;
        }
        div:nth-of-type(1) input{
            border: 3px solid seagreen;
        }
        div:nth-of-type(2) input{
            border: 3px dashed gray;
        }
        div:nth-of-type(3) input{
            border: 2px solid royalblue;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;会员登陆</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密&emsp;码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮&emsp;箱:</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

3、外边距

妙用：居中

margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下 .

margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

#box{
        width: 300px;
        border: 1px solid peru;
        margin: 0 auto;
     }

盒子的计算方式：
margin+border+padding+内容的大小

总结：
body总有一个默认的外边距 margin:0
常见操作：初始化
margin:0;
padding:0;
text-decoration:none;

4、圆角边框

border-radius有四个参数（顺时针），左上开始
圆圈：圆角=半径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid mediumpurple;
            /* 一个border-radius只管一个圆的1/4 */
            border-radius: 50px 20px 20px 30px;
            /* 左上 右上 右下 左下 ,顺时针方向 */
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>

5、盒子阴影

box-shodow:10px 10px 1px black;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid mediumpurple;
            /* 一个border-radius只管一个圆的1/4 */
            border-radius: 50px 20px 20px 30px;
            /* 左上 右上 右下 左下 ,顺时针方向 */
        }
        #box{
            box-shadow: 10px 10px 1px black;
        }
    </style>
</head>
<body>

<div id="box"></div>

</body>
</html>

八、浮动

1、标准文档流

块级元素：独占一行 h1~h6 、p、div、列表…
行内元素：不独占一行 span、a、img、strong

注：行内元素可以包含在块级元素中，反之则不可以。

2、display（重要）

block：块元素
inline：行内元素
inline-block：是块元素，但是可以内联，在一行

这也是一种实现行内元素排列的方式，但是我们很多情况用float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dispaly</title>
    <style>
        /*
        block: 块元素
        inline: 行内元素
        inline-block: 块元素，但是可以内联
        none: 隐藏
        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid darkorange;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid darkorange;
            display: inline-block;
        }
    </style>
</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>

</body>
</html>

3、float:left/right

clear: both

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="father">
    <div class="layer01"><img src="img/1.png" alt=""></div>
    <div class="layer02"><img src="img/2.png" alt=""></div>
    <div class="layer03"><img src="img/3.png" alt=""></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，知道他的外边缘碰到包含框或另一个浮动盒子为止。
    </div>
</div>

</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    clear: both;
}

4、父级边框塌陷的问题

clear：
- right：右侧不允许有浮动元素；
- left：左侧不允许有浮动元素；
- both：两侧不允许有浮动元素；
- none：无;

解决塌陷问题方案：

方案一：增加父级元素的高度

#father{
    border:1px #000 solid;
    height:800px;
}

方案二：增加一个空的div标签，清除浮动。

<div class = "clear"></div>

<style>
    .clear{
        clear:both;
        margin:0;
        padding:0;
    }
</style>

方案三：在父级元素中增加一个overflow属性。

    overflow:hidden; /* 隐藏超出部分 */
    overflow:scroll; /* 滚动 */

方案四：父类添加一个伪类:after。

#father:after{
    content:'';
    display:block;
    clear:both;
}

小结：

浮动元素增加空div----> 简单、代码尽量避免空div；
设置父元素的高度-----> 简单，但是元素假设有了固定的高度，可能就会超出范围；
overflow----> 简单，下拉的一些场景避免使用；
父类添加一个伪类:after（推荐）----> 写法稍微复杂，但是没有副作用，推荐使用；

display与float对比：

display：方向不可以控制；
float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

九、定位

1、相对定位

相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留。

top:-20px; /* 向上偏移20px */
left:20px; /* 向右偏移20px */
bottom:10px; /* 向上偏移10px */
right:20px; /* 向左偏移20px */

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路径</title>
    <style>
        /* 相对路径: 相对于自己原来的位置进行偏移 */
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: #6646f3 1px solid;
            padding: 0;
        }
        #first{
            border: #ff38f5 1px solid;
            background-color: #e83970;
            position: relative; /* 相对定位：上下左右*/
            top: -20px; /* 向上偏移20px */
            left: 20px; /* 向右偏移20px */
        }
        #second{
            border: #3ad518 1px solid;
            background-color: #08e0fc;
        }
        #third{
            background-color: #5075f8;
            border: #fcb346 1px solid;
            position: relative;
            bottom: 10px;   /* 向上偏移10px */
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
        #box{
            height: 300px;
            width: 300px;
            border: 2px red solid;
            padding: 10px;
        }
        a{
            height: 100px;
            width: 100px;
            background-color: #ee73b7;
            color: white;
            text-align: center;
            text-decoration: none;
            line-height: 100px; /* 设置行距100px */
            display: block; /* 设置方块 */
        }
        a:hover{
            background: #4158D0;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>

<div id="box">
    <div class="a1"><a href="#">连接1</a></div>
    <div class="a2"><a href="#">连接2</a></div>
    <div class="a3"><a href="#">连接3</a></div>
    <div class="a4"><a href="#">连接4</a></div>
    <div class="a5"><a href="#">连接5</a></div>
</div>

</body>
</html>

2、绝对定位与固定定位

定位：基于xxx定位，上下左右；
1. 没有父级元素定位的前提下，相对于浏览器定位；
2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移；
3. 在父级元素范围内移动。
总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 600px;
            height: 600px;
            background-color: #4a77d4;
            position: absolute; /* absolute 绝对定位 */
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 400px;
            height: 400px;
            background-color: #fcb346;
            position: fixed; /* fixed 固定定位 */
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

3、z-index及透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <style>

    </style>
</head>
<body>

<div id="content">
    <ul>
        <li><img src="img/1.png" alt=""></li>
        <li class="tipText">Java后端学习</li>
        <li class="tipBg"></li>
        <li>时间:1222-02-17</li>
        <li>地点:水星基地核心仓</li>
    </ul>
</div>

</body>
</html>

#content{
    width: 450px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #1079f6;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/* 父级元素相对定位 */
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 452px;
    height: 25px;
    top:384px
}
.tipText{
    color: #ffffff;
    z-index: 999;
}
.tipBg{
    background: #33f13d;
    opacity: 0.5; /* 背景透明度 */
    filter: alpha(opacity=50);
}

十、网页动画

css做动画过于繁琐，已有很多工具间接性做出；
百度搜索canvas动画、卡巴斯基监控站（仅作了解）。

标签：入门,solid,快速,height,1px,margin,20px,border,css
来源： https://www.cnblogs.com/JHoves/p/15906863.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css快速入门（下）

css快速入门（下）

七、盒子模型

1、什么是盒子模型

2、边框

3、外边距

4、圆角边框

5、盒子阴影

八、浮动

1、标准文档流

2、display（重要）

3、float:left/right

4、父级边框塌陷的问题

九、定位

1、相对定位

2、绝对定位与固定定位

3、z-index及透明度

十、网页动画