荣人生

当今荣耀排位赛,充分说明,只有同佳的丁于合,你才能够达标划分。

1.电脑中之公文

  • 仲进制文件
  • 文件文件
    分:使用windows记事本打开是否出现乱码

设若如果惦记和出色的丁打排位,你而默默的由匹配中持续的就学成才。

2.网页做

超文本标记语言(英语:HyperText Markup
Language,简称:HTML)是一律种用于创造网页的规范号语言。

网页一般由下3片段构成

  • HTML(HyperText Markup Language) —— 网页具体内容和结构
  • CSS(Cascading Style Sheets) —— 网页的体(网页美化的重要性模块)
  • JavaScript —— 网页的竞相作用,比如对用户鼠标事件做出响应

1.HTML发展史

HTML发展历史

  • HTML概念版——概念,没有执行
  • IETF组织保护HTML——HTML2.0
  • W3C组织:新的HTML标准
  • HTML4.01专业出现(里程碑)
  • HTML 5正规(移动端的盛)

2.理解

  • 超文本标记语言(标记语言不是编程语言)
  • 超文本——核心:文本文件;扩展:可以间接的表示图片、音频、视频等二进制数据
  • 继缀名称:.html .htm
  • 网页文档:开发网页,让其他人可以透过浏览器来做客我们的多寡

HTML 5优势

  • 跨平台 利用HTML 5编辑的行使几乎可于其它浏览器平台运行使用
  • 付出进度快 易用多效可以随便就
  • 视频与韵律支持且倒

当手机浏览器完全支持HTML5那么开活动类以会见及设计更粗的触摸显示平简单。这里发生无数的meta标签允许而优化移动:

  • viewport: 允许你定义viewport宽度与缩放设置;
  • 全屏浏览器: ISO指定的数值允许Apple设备全屏模式显示;
  • Home screen icons:
    就如桌面收藏,这些图标可以用来补充加收藏及IOS和Android移动设备的首页。

3.HTML语法条条框框

  • 文档声明:html网页的首先实行:<!doctype html>代表声明这是一个网页文档,可以透过浏览器进行亮
  • 网页内容:网页中享有的多少勾勒以片<html></html>标签中
  • 开标签 <html>
  • 截止标签 </html>
  • 网页属性:用于安装网页的编码、网页的标题等等情节
  • 写于网页中之<head></head>标签中
  • <meta charset=”utf-8”>宣称网页遭到的字符编码是UTF-8编码
  • <title>网页标题</title>扬言网页的来得标题部分的始末
  • 网页显示数据:打开的浏览器网页遭到,要翻看的富有数据
  • 描绘于网页遭到之<body></body>标签中
  • 网页内容区域:页头、页面主体、页脚

<header></header> <section></section> <footer></footer>

科普的标签

  • 题目标签:在网页遭到,通过加大字号,加粗文本来表示的文件
    <h1></h1> ~ <h6></h6>
  • 段标签:网页中标签一段落文本数据的竹签
    <p>段落内容</p>
  • 分隔线标签:是于网页遭到,增加一个品位的直线,将不同的始末分别
    <hr/>
  • 换行标签:用于在网页遭到,将文件数据还是其他数增长一个换行
    <br />
  • 视频播放标签:用于将点名的视频内容,在网页遭到开展播报
    <video src=”” controls></video> 视频播放标签
  • src属性:指定要播的视频的路径、目录、文件夹/文件
  • controls属性:用于展示播放器的控制台(播放、暂停、声音、全屏)
  • autoplay属性:是否自动播放
    = 音频播放标签:用于将点名的节拍内容,在网页遭到进行广播
    <audio src=””></audio> 音频播放标签
  • autoplay属性设置自动播放
  • 图片标签:用于展示指定位置的图形
    <img
    src=””/>展示指定位置的图纸,网页中常用之图后缀名有三单
    .jpg .gif .png

扩充标签

  • <b>签:文本加粗
  • <i>标签:文本斜体显示
  • <em></em>签:文本斜体显示
    效果: 文本斜体显示
  • <u>签:文本添加下划线
  • <del>标签:文本添加删除线
    效果:文本添加删除线

报表标签:之所以来在网页遭到,通过表格的款型显得内容之

<table></table>表格
<tr></tr>报表中如果显示的标题
<td></td> 表格中若显得的数码

集合单元格

横向联合单元格:colspan[跨列]
纵向合并单元格:rowspan[跨行]

活动换行及上方对合

表自动换行:<table style=”word-break:break-all;
word-wrap:break-all;”>
表上对共同:valign=”top”

<small>标签

<small> 标签将其余注 (side comments)
呈现为小型文本,即吃文本缩小20%拓展亮。
免责声明、注意事项、法律范围或版权声明的特点通常都是微型文本。小型文本有时也用于新闻来源、许可要求。
对此由于 em 元素强调了的要由于 strong 元素标记为重大之文书,small
元素不会见吊销针对文件的强调,也未会见降低这些文件的重要。

HTML用各种标签/标记,来号内容的
标记好情节后,要针对情节进行修饰【尺寸、位置、大小、颜色】

网页一:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网上转账电子账单</title>

    </head>
    <body>
        <h1>工商银行电子汇款单</h1>
        <table border="1" cellpadding="10" cellspacing="0" >
        <tr>
            <td colspan='2'><b>回单类型</b></td>
            <td>网上转账汇款</td>
            <td colspan="2"><b>指令序号</b></td>
            <td>HQH0000000000000013878172</td>
        </tr>
        <tr>
            <td rowspan="4"><b>收<br/>款<br/>人</b></td>
            <td>户名</td>
            <td>小许</td>
            <td rowspan="4" width="10"><b>付<br/>款<br/>人</b></td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <td><b>卡号</b></td>
            <td>000000000001</td>
            <td><b>卡号</b></td>
            <td>000000000002</td>
        </tr>
        <tr>
            <td>地区</td>
            <td>南京</td>
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr>
            <td><b>网点</b></td>
            <td>工商江苏南京业务处理中心</td>
            <td><b>网点</b></td>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <td colspan="2"><b>币种</b></td>
            <td>人民币</td>
            <td colspan="2"><b>钞汇标志</b></td>
            <td>钞票</td>
            </tr>
        <tr>
            <td colspan="2"><b>金额</b></th>
            <td>1.00元</td>
            <td colspan="2"><b>手续费</b></td>
            <td>0.57元</td>
        </tr>
        <tr>
            <td colspan="2"><b>合计</b></td>
            <td colspan="4">人民币(大写):壹圆整</td>
        </tr>
        <tr>
            <td colspan="2"><b>交易时间</b></td>
            <td><i>2017年6月1日</i></td>
            <td colspan="2"><b>时间戳</b></td>
            <td><i>2017-06-01-13.00.00.00000</i></td>
        </tr>

        </table>
        <p>票据打印时间:2017-06-01 15:00:12</p>
        <p><del>票据打印单位:江苏徐州业务中心</del></p>
        <p>操作员:大曾</p>
    </body>

</html>

网上转发电子账单

网页二:

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
            <title>豆瓣电影</title>
    </head>
    <body>
        <h2>热门电影板块</h2>
        <hr/>
        <table width="800">
            <tr>
                <td><b>最近热门电影</b></td>
                <td>热门</td>
                <td>最新</td>
                <td>豆瓣评分</td>
                <td>冷门佳片</td>
                <td>华语</td>
                <td>欧美</td>
                <td>韩国</td>
                <td>日本</td>
                <td width="100"></td>
                <td>更多>></td>

            </tr>
        </table>
        <hr/>
        <table >
            <tr>
                <td>![](豆瓣电影/movie1.jpg)</td>
                <td>![](豆瓣电影/movie2.jpg)</td>
                <td>![](豆瓣电影/movie3.jpg)</td>
                <td>![](豆瓣电影/movie4.jpg)</td>


            </tr>
            <tr>
                <td>猜火车4.1</td>
                <td>贝尔科实验6.0</td>
                <td>加州公路巡警6.8</td>
                <td>歌儿不绝6.3</td>

            </tr>
            <tr>
                <td>![](豆瓣电影/movie5.jpg)</td>
                <td>![](豆瓣电影/movie6.jpg)</td>
                <td>![](豆瓣电影/movie7.jpg)</td>
                <td>![](豆瓣电影/movie8.jpg)</td>
            </tr>
            <tr>
                <td>明日的我与昨日的我</td>
                <td>速度与激情8</td>
                <td>激素特工</td>
                <td>金刚狼3:殊死一战</td>
            </tr>

        </table>

    </body>
</html>

4.HTML基础操作

1.大标签

div标签:块标签
ul标签:无序列表标签
ol标签:有序列表标签
dl标签:图文混排列表标签

大概样式:

list-style:none;失掉丢列表标签前面的序号
list-style-image:url(“abc.png”);使指定的图形替换列表的序号

form表单标签:表单标签在页面及从来不其它显示,专门就此来进行数量提交的

2.表单元素标签

  • 表单标签而配合表单元素标签一起下
  • 发明单元素标签主要为此同:文本输入框、密码输入框、单选按钮、复选框、下拉列表框、文件选择框各种框框

label用来形容输入框的提示信息,
for属性:表示马上是孰标签的提示信息,for的值是其余一个标签的id值

>文本输入框:`<input type=”text”..`
密码输入框:`<input type=”password”..`
提交按钮:`<input type=”submit”..`

##3.API文档
- API文档:application program interface(应用程序开发接口)
- API文档:对应用程序开发接口的描述文档——说明书
【编程语言:教程文档,向导文档,操作文档,API文档】

**HTML API文档:**
- HTML没有官方的API文档,而是很多开发人员组织起来编写的较为详细API说明文档
- 通常比较常用的一个文档:DHTML文档(包含了HTML标签描述、CSS样式描述等等)

你可以在编程的过程中,通过API查询自己想要的标签的方法。

通过写一个简单的登录和注册页面来理解具体操作
####网页三

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>登录页面</title>
</head>
<body>
<from action = ‘http://www.baidu.com’ method=’post’>
<label for=’username’>账号</label>
<input type=”text” id=’username’ name=”username”
placeholder=”请输入账号”>

<label for=’password’>密码</label>
<input type=”password” id=”password” name=”password”
placeholder=”请输入密码”>

<input type=”submit” value=”登录”>
</from>

</body>
</html>

![login.html](http://upload-images.jianshu.io/upload_images/6078268-609af6d5d43f3bc0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####网页四

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>注册页面</title>
</head>
<body>
<form action=”#”>
<label for=”username”>账号</label>
<input type=”text” id=”username” name=”username”
placeholder=”请输入账号”>

<label for=”password”>密码</label>
<input type=”password” id=”password” name=”passwo”
placeholder=”请输入密码”>

<label for=”gender”>性别</label>
<input type=”radio” id=”gender1″ name=”gender”>男
<input type=”radio” id=”gender2″ name=”gender”>女
<input type=”radio” id=”gender3″ checked=”true”
name=”gender”>待定

<label for=”fav”>爱好</label>
<input type=”checkbox” value=”LOL” checked>英雄联盟
<input type=”checkbox” value=”WZRY”>王者荣耀
<input type=”checkbox” value=”SWXF”>守望先锋
<input type=”checkbox” value=”DOTA”>DOTA2

<label for=”headerImg”>头像</label>
<input type=”file” id=”headerImg”>

<label for=”address”>地址</label>
<select id=”address” name=”address”>
<option value=”SH”>上海</option>
<option value=”BJ”>北京</option>
<option value=”SZ”>深圳</option>
</select>

<label for=”introduction”>自我介绍</label>
<textarea rows=”10″ cols=”80″></textarea>

<input type=”button” value=”普通按钮”>
<button>H5 普通按钮</button>
<input type=”reset” value=”重置”>
<input type=”submit” value=”注册”>
</form>
</body>
</html>

![regist.html](http://upload-images.jianshu.io/upload_images/6078268-4b09ead36dcbafea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##4.超链接标签
`<a href="http://www.baidu.com" style="font-size:32px;">百度</a>`
>`a`超链接标签
`href`属性,表示要打开的网络地址
- 可以指向一个网络地址
- 可以指向一个本地文件

<a href=”http://www.baidu.com”
target=”_blank”>新的打开方式:百度</a>
这里的target属性是_blank,指的凡于新的空白页打开一个网页

>备注:web项目开发时常见的文件名称
        网站首页:`index.html / index.htm / main.html / main.htm / default.html / default.htm`
        登录页面:`login.html / login.htm / signin.html / signin.htm`
        注册页面: `regist.html / register.html / signup.html`

##5.CSS样式操作的三种方法

###1.元素内嵌样式
>`<li style="width:800px;color:orange;font-weight:bold;">
只要我人生的程序不终止,你的名字一直都是我的心事
</li>`
**优点:**操作方便,易于理解;
**缺点:**如果样式内容太多,就会让一个简单的标签变得非常的臃肿,不利于代码的维护。

###2.文档内嵌样式
> 样式写在网页中的`<style>`标签中,将样式代码集中起来进行管理

<head>
<style>
#info{color:blue;font-size:18px;font-weight:bold;border:#069 1px
dashed;}
</style>
</head>
<body>
<ol>
<li id=”info”>
概念一个变量:我们的相爱时

要是要我们中间是的确好

那么从我们相爱的那无异秒起,我们拿无限循环,执子之手,与子偕老</li>
</ol>
</body>

**优点:**将我们的HTML标签和CSS代码进行了分离,方便我们对HTML代码或者CSS样式进行修改;
**缺点:**HTML代码和CSS代码还是在一个文件中

###3.外部引用
> 外部引用样式

同样文件夹里描写一个demo.css文件

desc{font-size:22px;color:red;font-family:”楷体” }

demo文件中代码
<head>
<link rel=”stylesheet” type=”css” href=”demo03.css”>
</head>
<body>
<ol>
<li id=”desc”>遍历整个社会风气,只也找到你。
当自家发觉而是自己之真爱时,

这就是说您就是是自个儿要是找寻之人数。</li>
</ol>
</body>

**三种样式操作:**

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>样式操作</title>
<link rel=”stylesheet” type=”css” href=”demo03.css”>

<style >
    #info{color:blue;font-size:18px;font-weight:bold;border: #069 1px dashed}
</style>

</head>
<body>
<p style=”font-size: 26px”>
<b>程序员的老三履行情诗</b>
</p>


<ol>
<li
style=”width:800px;color:orange;font-weight:bold;”>只要我人生的次不停歇,你的名直还是本身的难言之隐</li>

    <li id="info">定义一个变量:我们的相爱时间<br>如若我们之间是真爱<br>那么从我们相爱的那一秒起,我们将无限循环,执子之手,与子偕老</li>
    <br>

    <li id="desc">遍历整个世界,只为找到你。<br>当我发现你是我的真爱时,<br>
    那么你就是我要找寻的人。</li>


</ol>

</body>
</html>

![三种样式操作](http://upload-images.jianshu.io/upload_images/6078268-3aabafe47f6be095.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##6.CSS标签选择器

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>标签选择器</title>
<style>
/通配符选择器/
{padding: 0;margin:
0;color:green;}/
padding表示内边距,margin表示外边距/
/
class选择器/
.intro{color:blue;font-size: 22px;}
/
标签选择器/
p{color: red;}
/
id选择器*/
#choice{color:orange;font-size: 28px;}
</style>

</head>
<body>
<p>使用标签选择器</p>
<p>标签选择器,可以经标签号来摘取有的拖欠名的标签</p>
<p>直接以css代码中,写标签的名称,用来修饰网页遭到有出奇标签的体</p>
<p>请谨慎使用,选择范围最大</p>


<span id=”choice”>id选择器</span>
<span>id选择器通过当CSS代码中,使用标志”#name”,name指的就算是签的id属性名</span>
<span>id选择器,只见面挑选唯一的一个标签,用来修饰网页中有些签的体</span>


<div class=”intro”>class选择器</div>
<span
class=”intro”>class选择器,通过标志”.name”,name指代的标签class属性值</span>
<b class=”intro”>class表示项目的意</b>


<div>通配符选择器:,可以挑选页面被负有的签</div>
<div>慎重使用,一般情况下,使用
来打消页面被之标签的边距</div>

</body>
</html>

![标签选择器](http://upload-images.jianshu.io/upload_images/6078268-7309791be5e5cd0d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##7.其他选择

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>其他选项器</title>
<style>
/* 1. 其他选择器/
/

群组选择器:可以拿多独着力选择器,使用逗号进行分,然后上加合的体裁/
p,span,div,#choice,.intro{color:red;}
/
子标签选择器:修饰的凡时签的一直子元素,不会见潜移默化孙子元素; /
#list > li{color:orange;font-weight:bold;}
/
包含选择器:修饰当前签中指定的装有给含有的元素/
/
#list li {color:blue;font-weight:bold;} */

    /* 2. 选择器的优先级 */
    /*标签选择器修饰input,样式也是有优先级,如class选择器的优先级就没有id选择器高*/
     input,#username{border:none;border-bottom:solid 2px #888;}
    .username{border-bottom:solid 2px red;} 

    /* 3. 属性选择器 */
    /* 完整属性 */
    /* input[type="password"]{border:solid 1px red;} */
    /* input[type^="pass"]{border:solid 1px blue;} */
    [type^="pass"]{border:solid 1px red;}

    /* 4. 伪类选择器 是在后面添加冒号,然后添加一个关键词,来选择特殊的标签*/
    /* 慎重使用 ,通常情况下,可以通过id/class/标签选择器完全替代*/
    /* #list li:nth-child(2){color:red;} */
    #list li:hover{color:red;} /* 鼠标滑过的时候会高亮*/
</style>

</head>
<body>
<p>使用标签选择器</p>
<p>标签选择器,可以透过标签号来选页面中有的欠名的签</p>
<p>直接在css代码中,写标签的名,然后于背后的大括号被上加样式</p>
<p>慎重使用,选择范围最大</p>


<span id=”choice”>id选择器</span>
<span>id选择器通过当CSS代码中,使用标志“#name”,name指的就是是签的id属性值</span>
<span>id选择器,只会挑唯一的一个签,用来修饰网页遭到有的特殊标签的体</span>


<div class=”intro”>class选择器</div>
<span
class=”intro”>class选择器,通过标记”.name”,name指代的是签的class属性值</span>
<b class=”intro”>class表示项目的意思</b>


<div>通配符选择器:,可以选取页面中颇具的签</div>
<div>慎重使用,一般情况下,使用
来排遣页面被的签的边距</div>

<ul id="list">
    <li>尚未配妥剑</li>
    <li>转眼便是江湖</li>
    <li>愿历尽风帆</li>
    <li>归来仍少年</li>  
    <ul>
        <li>不要停止奔跑</li>
        <li>不要回顾来路</li>
        <li>来路无可眷恋</li>
        <li>值得期待的只有远方</li>
    </ul>
</ul>


<hr/>
<form action="">
    <input id="username" class="username" type="text" placeholder="请输入账号"><br />
    <input type="password" username="password" placeholder="请输入账号"><br />
</form>

</body>
</html>

![其他的标签显示](http://upload-images.jianshu.io/upload_images/6078268-5dea4bc360a2dcb9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##8.其他样式
`text-shadow`是给文本添加阴影效果,`box-shadow`是给元素块添加周边阴影效果。
**语法**:`box-shadow: h-shadow v-shadow blur spread color inset;`
**注释**:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
**box-shadow属性的参数设置取值:**

-阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;

-X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;

- Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;

- 阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

- 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

- 阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色

|值 |       描述                            |
|:-------------:|:-------------------------------------:|
|h-shadow|  必需。水平阴影的位置。允许负值。|   
|v-shadow|  必需。垂直阴影的位置。允许负值。|   
|blur   |可选。模糊距离。|  
|spread |可选。阴影的尺寸。| 
|color  |可选。阴影的颜色。请参阅 CSS 颜色值。|
|inset  |可选。将外部阴影 (outset) 改为内部阴影。|

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>常见样式</title>
<link rel=”stylesheet” href=””>
<style>
{margin:0;padding:0;}
#container{
/
情样式/
color:white;
font-size:40px;
font-family:”楷体”;
font-weight:bolder;
text-align:center;
line-height:300px;
text-shadow: 10px -10px 10px red;
/
尺寸样式*/
width:1050px;
height:300px;
border:solid 2px orange;
border-bottom:10px solid red;
border-radius:10px;
box-shadow:5px 5px 3px #888;

        background:pink;
    }
    #container a{color:white;
        text-decoration:none;
    }
    #th{width:1027px;height:515px;padding:10px;border:solid 10px #888;border-radius:5px;}
    #th img{width:1027px;height:515px;border-radius:5px;}
</style>

</head>
<body>
<div id=”container”>
听说粉色会使得人遐想…<a
href=”http://jandan.net/ooxx"&gt;煎蛋网&lt;/a&gt;
</div>
<div id=”th”>

王者荣耀 1

</div>
</body>
</html>

![常见样式的显示](http://upload-images.jianshu.io/upload_images/6078268-4e140ef9a3cc9703.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##9.block,inline和inline-block概念和区别
###1.概念
block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。


大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):
- 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
- 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。

###2.block,inline和inlinke-block细节对比
- display:block
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
block元素可以设置`width`,`height`属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置`margin`和`padding`属性。

- display:inline
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
inline元素设置`width`,`height`属性无效。
inline元素的`margin`和`padding`属性,水平方向的`padding-left`, `padding-right`, `margin-left`, `margin-right`都产生边距效果;但竖直方向的`padding-top`, `padding-bottom`, `margin-top`, `margin-bottom`不会产生边距效果。

- display:inline-block
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website