码迷,mamicode.com
首页 > Web开发 > 详细

学习PHP课程的第七天

时间:2016-11-17 11:03:21      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:display   课程   yellow   元素   七天   

2016年11月16日,星期三


    对今天所学课程的总结:

    一、①块级元素表示:block.

        ②行内元素表示:inline.

        ③行内块级元素表示:inline-block.

     二、

<div></div>属于块级元素,<span></span>属于行内元素,但是文字不换行。

   在样式中display:block;是将行内元素转化为块级元素,但是文字不换行。

 <!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

        div{

            height: 100px;

            width: 200px;

            background-color: yellow;

            display: inline-block;

        }

        span{

            width: 200px;

            height: 100px;

            background-color: red;

            display: block;

        }

</style>

</head>

<body>

<!-- 块级元素 若想变为行内块级元素只需在style中加入display:inline-block属性(特点:具有款及元素的特点,但不能自动换行。)-->

<div></div>

<!-- inline行内元素 不能设置宽高,但可以加入背景色。span不能自动换行,但若想变为div形式的块级元素,可在style中加入display:block属性-->

<span>sss</span>

</body>

<html>




    

    

学习PHP课程的第七天

标签:display   课程   yellow   元素   七天   

原文地址:http://12254251.blog.51cto.com/12244251/1873736

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!