html基础3

最新推荐文章于 2023-06-08 22:12:06 发布

营养快线121号

最新推荐文章于 2023-06-08 22:12:06 发布

阅读量216

点赞数

分类专栏：前端知识文章标签： html基础

本文链接：https://blog.csdn.net/TDFSFSF/article/details/102457586

版权

前端知识专栏收录该内容

7 篇文章 0 订阅

订阅专栏

18、盒子模型
css的三大模块：盒子模型浮动定位
盒子模型：边框、内边距、外边距

border:宽度样式颜色
border-style:none|直线solid|点线dotted|双实线double|虚线dashed

表格的细线边框
table{border-collapse:collapse;}
表格边框合并在一起
圆角边框 border-radius
内边距padding
设置边框与内容之间的距离

        padding-left左内边距
        padding-bottom下内边距
        padding-top上内边距
        padding-right右内边距

        padding:1px;表示上下左右的距离都是1px
        padding:1px 3px;表示上下1px，左右5px
        padding:1px 3px 5px;表示上3px，下5px，左右是3px
        padding:1px 3px 5px 7px;上右下左分别是1px 3px 5px 7px

外边距margin
设置外边距会在元素之间创建空白

margin-top上外边距
margin-right右外边距
margin-bottom下外边距
margin-left左外边距
margin:margin-top margin-right margin-bottom margin-left

    外边距实现盒子居中
        必须是块元素
        盒子必须指定宽度

    文字盒子居中图片和背景区别
        文字居中是text-align:center
        盒子居中是 margin:0 auto

    外边距合并：使用margin定义块元素的垂直外边距，可能会出现外边距合并

    圆角边框
        border-radius:50%;可以让一个正方形变成圆圈
    盒子阴影
        box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
        h-shadow：水平阴影的位置，允许是负值
        v-shadow：垂直阴影的位置，允许是负值
        blur：模糊距离
        spread：阴影尺寸
        color：阴影颜色
        inset：将外部阴影改为内部阴影

浮动
    元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
    float:left/right/none;

    清楚浮动clear:left/right/both
        overflow:hidden/auto/scroll

课堂练习
    1、关于盒子宽度下列说法正确的是D
    A 盒子宽就是width的大小
    B 盒子宽padding-left+width+border-right
    C 盒子宽border-left+width+border-right
    D 盒子宽border-left+padding-left+width+padding-right+border-right
    2、关于盒子高度下列正确的是D
    A 盒子高就是height的大小
    B 盒子高padding-top+height+padding-bottom
    C 盒子高border-top+height+border-bottom
    D 盒子高padding-top+border-top+height+padding-bottom+border-bottom

3、新闻列表案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>新闻列表</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .article{
        width:410px;
        height:283px;
        border:1px solid #cccccc;
        margin:100px;
        padding:20px 15px 0;
    }
    .article h4{
        color:#202026;
        font-size: 20px;
        border-bottom: 1px solid #ccc;
        padding-bottom:5px;
    }
    .article ul{
        padding-top: 12px;
    }
    .article ul li{
        height:38px;
        line-height: 38px;
        border-bottom:1px dashed #ccc;
    }
    li{
        list-style:none;
    }
    a{
        text-decoration: none;
        color: #ccc;
        font-size: 12px;
    }
</style>
<body>
    <div class="article">
        <h4>最新文章New articles</h4>
        <ul>
            <li><a href="#">北京2招聘网页设计</a></li>
            <li><a href="#">体验JavaScript的魅力</a></li>
            <li><a href="#">jQuery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jQuery中的链式编程是什么</a></li>
        </ul>
    </div>
</body>
</html>

4、圆角练习

       <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>圆角练习</title>
</head>
<style type="text/css">
    body{
        background:#ccc;
    }
    div a{
        width:172px;
        height:172px;
        background-color: #fff;
        display:inline-block;
        margin:30px;
        border-radius: 50%;
        text-align: center;
        text-decoration: none;
        line-height: 172px;
        color:red;
        font-weight: 700;
    }
    div a:hover{
        background-color: red;
        color:#fff;
    }
</style>
<body>
    <div>
        <a href="#">文字内容</a>
        <a href="#">文字内容</a>
        <a href="#">文字内容</a>
        <a href="#">文字内容</a>
    </div>
</body>
</html>

5、用css模拟手机图片

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>iphone 5s</title>
    </head>
    <style type="text/css">
        body{
            background-color: #ccc;
        }
        .iphone5s{
            width:300px;
            height:600px;
            margin:50px auto;
            border-radius: 55px;
            background-color: #2e2e2e;
            border:10px solid #3b3b3b;
            position:relative;
            box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5);
        }
        .iphone5s:before{
            content:"";
            position:absolute;
            width:66px;
            height:6px;
            background-color: #2e2e2e;
            right:60px;
            top:-16px;
            border-radius: 3px 3px 0 0;
        }
        .iphone5s:after{
            content:"";
            position:absolute;
            height:45px;
            width:6px;
            background-color: #2e2e2e;
            left:-16px;
            top:100px;
        }
        .listen{
            height:6px;
            width:6px;
            background-color: #1a1a1a;
            border:3px solid #4a4a4a;
            position:absolute;
            top:30px;
            left:50%;
            margin-left:-8px;
            border-radius: 50px;
            box-shadow:2px 2px 2px rgba(0,0,0,0.5);
        }
        .speaker{
            width:60px;
            height:5px;
            border:5px solid #4a4a4a;
            background-color: #1a1a1a;
            position:absolute;
            left:50%;
            margin-left: -35px;
            top: 50px;
            border-radius: 10px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
        }
        .content{
            width:250px;
            height:450px;
            background-color: #0a0a0a;
            margin:80px auto 0;
            font:35px/450px "微软雅黑";
            text-align: center;
            color:white;
            border:4px solid #1a1a1a;
            position:relative;
        }
        .content:before{
            content:"";
            width:250px;
            height:450px;
            position: absolute;
            top: 0;
            left: 0;
            background:-webkit-linear-gradient(top left,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0) 80%);
        }
        .home{
            width:50px;
            height:50px;
            background-color:#1a1a1a;
            border-radius: 50%;
            margin:5px auto 0;
            position:relative;
            box-shadow:2px 2px 2px rgba(0, 0, 0, 0.2);
        }
        .home:before{
            content:"";
            width:20px;
            height:20px;
            border:2px solid rgba(255, 255, 255, 0.7);
            position:absolute;
            top: 13px;
            left:13px;
            border-radius: 3px;
        }
    </style>
    <body>
        <div class="iphone5s">
            <div class="listen"></div>
            <div class="speaker"></div>
            <div class="content">iphone 5s</div>
            <div class="home"></div>
        </div>
    </body>
</html>

19、定位position：绝对定位、相对定位

元素的定位属性
    边偏移
        top 顶端偏移量，定位元素相对于父元素上边线的距离 
        bottom 底部偏移量，定位元素相对于父元素下边线的距离 
        left 左侧偏移量，定位元素相对于父元素左边线的距离 
        right 右侧偏移量，定位元素相对于父元素右边线的距离
    定位模式
        static自动定位
        relative相对定位，相对于其原文档流的位置进行定位
        absolute绝对定位，相对于其上一个已经定位的父元素进行定位
        fixed固定定位，相对于浏览器窗口进行定位

    静态定位static：所有元素的默认定位，无法通过边偏移属性来改变元素的位置
    相对定位relative：可以通过边偏移属性改变元素的位置
        注意：
            相对定位可以通过边偏移移动定位，但是原来所占的位置继续占有
            每次移动的位置，是以自己的左上角为基点移动
    绝对定位absolute：   可以通过边偏移移动位置，但完全脱标，不占据位置
        父元素没有定位
            以浏览器为准对齐
        父级有定位
            绝对定位是将元素依据最近的已经定位的父元素进行定位
        子绝父相：子级是绝对定位，父级是相对定位
    固定定位fixed：当元素设定固定定位后，就会脱离标准文档流的控制，始终依据浏览器显示自己的位置，不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置
        固定定位的元素和父元素没有任何关系，只认浏览器
        固定定位完全脱标，不占有位置，不随着滚动条滚动

    叠放次序z-index
        当对多个元素同时设置定位时，定位元素之间有可能出现重叠
        注意：
            z-index的默认属性值时0，取值越大，定位元素就会层叠元素中越居上
            如果取值相同，则根据书写顺序，后来居上
            后买你的熟悉不一定能加单位
            只有相对定位，绝对定位，固定定位有此属性，其余标准流、浮动，静态定位都无此属性

z-index的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>练习</title>
</head>
<style type="text/css">
    div{
        width:250px;
        height:400px;
        border:1px solid #ccc;
        float: left;
        margin-left: -1px;
        position: relative;
        z-index: 0;
    }
    div:hover{
        border:1px solid #f40;
        z-index: 1;
    }
</style>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>