1.块元素与行内元素之间的转换：

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。这三者是可以互相转换的，使用display属性能够将三者任意转换：

　　(1)display:inline;转换为行内元素

　　(2)display:block;转换为块状元素

　　(3)display:inline-block;转换为行内块状元素

行内元素

　　行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。

　　行内元素特征：(1)设置宽高无效

　　　　　　　　　(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

　　　　　　　　　(3)不会自动进行换行

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>测试案例</title>

        <style type="text/css">

            span {

                width: 120px;

                height: 120px;

                margin: 1000px 20px;

                padding: 50px 40px;

                background: lightblue;

            }

        </style>

    </head>

    <body>

        <i>不会自动换行</i>

        <span>行内元素</span>

    </body>

块状元素

　　块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。

　　块状元素特征：(1)能够识别宽高

　　　　　　　　　(2)margin和padding的上下左右均对其有效

　　　　　　　　　(3)可以自动换行

　　　　　　　　　(4)多个块状元素标签写在一起，默认排列方式为从上至下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>测试案例</title>

        <style type="text/css">

            div {

                width: 120px;

                height: 120px;

                margin: 50px 50px;

                padding: 50px 40px;

                background: lightblue;

            }

        </style>

    </head>

    <body>

        <i>自动换行</i>

        <div>块状元素</div>

        <div>块状元素</div>

    </body>

</html>

行内块状元素

　　行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

　　行内块状元素特征：(1)不自动换行

　　　　　　　　　　　(2)能够识别宽高

　　　　　　　　　　　(3)默认排列方式为从左到右

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>测试案例</title>

        <style type="text/css">

            div {

                display: inline-block;

                width: 100px;

                height: 50px;

                background: lightblue;

            }

        </style>

    </head>

    <body>

        <div>行内块状元素</div>

        <div>行内块状元素</div>

    </body>

</html>

html、css基础整理的更多相关文章

  1. HTML&&CSS基础知识点整理

    HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...

  2. CSS基础(01)

    1. Css基础 1.1 CSS(层叠样式表 Multiple Styles)   CSS 是 Cascading Style Sheets(层叠样式表)的简称. CSS 语言是一种标记语言,它不需要 ...

  3. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  4. [转帖]nginx基础整理

    nginx基础整理 https://www.cnblogs.com/guigujun/p/6588545.html 目录结构如下: Nginx基础知识 Nginx HTTP服务器的特色及优点 Ngin ...

  5. CSS基础面试题，快来查漏补缺

    本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经. 我对问题进行了分类整理,并给了自己的回答.大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺.虽作 ...

  6. 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏

    [图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...

  7. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  8. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  9. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

随机推荐

  1. MySQL添加用户并授权

    一. 创建用户 命令: CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明: username:你将创建的用户名 host:指定该用户 ...

  2. JSON中的parse和Stringify方法

    JSON.parse(str)  将字符串解析成对象 var str = '{"name":"huangxiaojian","age":&q ...

  3. 记第一次XSS实战

    前两天偶然挖到一个XSS,在我低谷期的时候给了我些动力,遂写下这篇博客记录 随手在一个搜索框中测试,发现有反应 观察一下标签,需要">把前面的闭合,然后<a 把后面的标签闭合 结 ...

  4. 第八周博客作业 <西北师范大学| 周安伟>

    第八周博客作业 助教博客链接https://home.cnblogs.com/u/zaw-315/ 作业要求博客链接https://www.cnblogs.com/nwnu-daizh/p/10687 ...

  5. P1579哥德巴赫猜想

    写来自己学习用~ 题目内容: 1742年6月7日哥德巴赫写信给当时的大数学家欧拉,正式提出了以下的猜想:任何一个大于9的奇数都可以表示成3个质数之和.质数是指除了1和本身之外没有其他约数的数,如2和1 ...

  6. systemd 编写服务管理脚本---学习

    转载:https://www.cnblogs.com/sparkdev/p/8521812.html 我们运行 linux 服务器的主要目的是通过运行程序提供服务,比如 mysql.web serve ...

  7. IIS发布MVC ASP.NET网站

    发布网站后,发现无法访问,最后在配置文件上添加一段: <system.codedom> <compilers> <compiler language="c#;c ...

  8. C#使用CefSharp开源库开发Chrome 浏览器

    一.介绍        这个东西我以前没有接触过,但是公司项目里面有用到这个东西,所以就顺便研究一下.今天只是做了 WinForm 的测试,有时间了在试试 WPF 是如何实现的.刚开始一塌糊涂,有点麻 ...

  9. c#跨线程访问的代码和窗体关闭退出死循环的代码

    一:一段跨线程访问,给页面内的控件赋值的代码找了半天没找到,还得找了以前写的程序. 在这记下来吧 .  这是其他程序内可以跨线程访问的代码 . if (gridControl1.InvokeRequi ...

  10. python基础 (装饰器,内置函数)

    https://docs.python.org/zh-cn/3.7/library/functions.html 1.闭包回顾 在学习装饰器之前,可以先复习一下什么是闭包? 在嵌套函数内部的函数可以使 ...