web前端5

最新推荐文章于 2023-09-04 15:24:24 发布

Bescheidenheit

最新推荐文章于 2023-09-04 15:24:24 发布

阅读量108

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Bescheidenheit/article/details/103466800

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>笔记5</title>
    <style>
        /*样式初始化*/
        body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
            margin: 0;
            padding: 0;
        }
        ul,ol{
            list-style: none;
        }
        /*样式初始的原因是：由于浏览器内核的不同，对标签默认
           样式的解析不同，导致页面呈现的样式也不同
        */
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 40px 30px 20px 50px;/*规则为   上 右 下 左*/
            border: 10px solid blue;/*边框粗细和样式是必须有的，颜色不是必须有  solid为实线    dashed为虚线*/
            margin:0 auto;  /*水平居中*/
            box-sizing: border-box; /*border-box 为ie盒模型    content-box为标准盒模型 */
            /*ie盒模型同标准盒模型的区别在于标准模型里面开始加上所有宽度
                ie盒模型是从外开始，向里面减去设定的大小
            */
        }
    </style>
</head>
<body>
    <div class="box">
        你好
    </div>
    <span>我在你后面</span>


    盒模型：
        组成部分：  外边距+边框+内边距+内容

    IE盒模型和标准盒模型切换：
        box-sizing:border-box;
    

    元素分类
        块级元素   
            1.每个块级元素都从新一行开始，并且其后的元素也另起一行<br/>
            2.元素的高度，宽度，行高以及顶部和底边距都可由设置<br/>
            3.元素宽度在不设置的情况下，默认是父容器的宽度
            <!--
            <div><p><h1>--<h6>
            <ol><ul><dl>
            <address><blockquote><form>
                -->
        行内元素
            1.和其他元素在一行上;<br/>
            2.元素的高度，宽度，行高以及顶部和底边距不可以设置<br/>
            3.元素的宽度就是它包含文字或者图片的宽度，不可以改变。
            <!--
                <a><span><br/>
            <i><em><strong><label>
            -->
        行内块状元素
            1.和其他元素在一行上；<br/>
            2.元素的高度，宽度，行高以及顶部和底边距都可由设置。
               <!-- 
                   <img><input><select>
                <textarea><button><iframe>
                    -->
    元素分类转换
        display
            block:将元素转化为块级元素
            inline:将元素转换为行级元素
            inline-block:将元素转换为内联块元素
            none：将元素隐藏
</body>
</html>