前端-CSS-7-标准文档流&行内元素和块级元素转换

1、什么是标准文档流

<!--  什么是标准文档流
        宏观的将，我们的web页面和ps等设计软件有本质的区别
        web 网页的制作 是个“流”  从上而下 ，像 “织毛衣”
        而设计软件 ，想往哪里画东西 就去哪里画


        标准文档流下 有哪些微观现象？

        1.空白折叠现象
        2.高矮不齐，底边对齐
        3.自动换行，一行写不满，换行写
     -->

2、行内元素和块级元素转换

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

常用的块状元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>


常用的行内元素
<a> <span> <br> <i> <em> <strong> <label> 行内元素在一行显示，设置宽度，高度无效

常用的行内块状元素：

<img>   <input>

-------------------------------------------

<style type="text/css">
        .box1{
            /*将块元素转化成行内元素*/
            display: inline-block;
            width: 200px;
            height: 40px;
            border: 1px solid red;
        }
        .box2{
            margin-top: 20px;
            width: 200px;
            height: 40px;
            font-size: 40px;
            border: 1px solid green;
        }
        span{
            background-color: yellow;
            width: 100px;
            height: 40px;
            /*将行内元素转化成块级元素*/
            display: block;

            /*隐藏当前的标签 不占位置*/
            /*display: none;*/
            
            /*隐藏当前的标签，占位置*/
            visibility: hidden;
        }
        img{
            width: 300px;
            height: 300px;
            /*隐藏当前的标签*/
            /*display: none;*/
        }
    </style>
</head>
<body>
    
    <div class="box1">内容</div>
    <div class="box1">内容</div>
    <div class="box2">内容</div>

    <span>alex</span>
    <span>alex</span>

    <!-- form表单中 input textarea select -->
    <img src="./images/企业1.png" alt="">
    <img src="./images/企业2.png" alt="">



</body>

posted on 2018-10-21 17:34 foremost 阅读(524) 评论(0) 收藏举报