布局

实例：规范的命名和编排

<body>

<div class="page"><!--page开始-->

    <header class="masthead" role="banner"><!--masthead开始-->

        <p class="logo"><a href="#"><img src="logo.png"/>Logo图片</a></p>

        <ul class="socical-sites">

            <li><a herf="#"><img src="pics-01.png"/>图片01</a></li>

            <li><a herf="#"><img src="pics-02.png"/>图片02</a></li>

            <li><a herf="#"><img src="pics-03.png"/>图片03</a></li>

        </ul>

        <nav role="navigation">

            <ul>

                <li><a herf="#">主导航栏01</a></li>

                <li><a herf="#">主导航栏02</a></li>

                <li><a herf="#">主导航栏03</a></li>

            </ul>

        </nav>

    </header><!--masthead结束-->

    <div class="container"><!--container开始-->

        <main role="main"><!--main开始-->

            <h1>主题内容</h1>

            <article>

                <hgroup>

                    <h1>文章主标题</h1>

                    <h2>文章副标题</h2>

                </hgroup>

                <section class="post">

                    <h1>章节内容01</h1>

                    <img src="post01.png" class="post-photo-full"/>

                    <div class="post-blurb">

                        <p>推荐广告</p>

                    </div>

                    <footer class="footer">

                        <ul>

                            <li><a herf="#">章节条目页脚04</a></li>

                            <li><a herf="#">章节条目页脚05</a></li>

                            <li><a herf="#">章节条目页脚06</a></li>

                        </ul>

                    </footer>

                </section>

                <section class="post">

                    <h1>章节内容02</h1>

                    <img src="post02.png" class="post-photo"/>

                    <div class="post-blurb">

                        <p>推荐广告</>

                    </div>

                    <footer class="footer">

                        <ul>

                            <li><a herf="#">章节条目页脚04</a></li>

                            <li><a herf="#">章节条目页脚05</a></li>

                            <li><a herf="#">章节条目页脚06</a></li>

                        </ul>

                    </footer>

                    <nav role="navigation">

                        <ol>

                            <li><a herf="#">章节有序列表07</a></li>

                            <li><a herf="#">章节有序列表08</a></li>

                            <li><a herf="#">章节有序列表09</a></li>

                        </ol>

                    </nav>

                </section>

            </article>

        </main><!--main结束-->

        <div class="sidebar"><!--sidebar开始-->

            <article class="about">

                <h2>About me工具栏</h2>

            </article>

            <aside>

                <h2>侧栏1</h2>

                <ul class="links">

                    <li>侧栏列表01</li>

                    <li>侧栏列表02</li>

                    <li>侧栏列表03</li>

                </ul>

            </aside>

            <aside>

                <h2>侧栏2</h2>

                <ul class="links">

                    <li>侧栏列表04</li>

                    <li>侧栏列表05</li>

                    <li>侧栏列表06</li>

                </ul>

            </aside>

        </div><!--sidebar结束-->

    </div><!--container结束-->

    <footer role="contentinfo" class="footer"><!--footer开始-->

        <p class="legal"><small>&copy;2017 Adeline zhang</small></p>

    </footer><!--footer结束-->

</div><!--page结束-->

</body>

对旧版浏览器为Html5添加样式

HTML5 shiv

Modernizr

对默认样式进行重置或标准化

normalize

盒模型



背景（蓝色区域）：会延伸到边框的后面，通常情况下仅在内边距所延伸到的区域可见，除非边框是透明或者半透明

1.内边距padding：内容区域与边框的距离，背景颜色会填充内容区域和内边距

2.外边距：元素与其他元素之间的空间

css的width：内容区域的宽度

浏览器显示的宽度：内容宽度+左右内边距+左右边框

默认盒模型、box-sizing:border-box盒模型

Html5与Css3知识点拾遗（七）的更多相关文章

  1. Html5与Css3知识点拾遗（二）

    页面title 选择能简要概括文档内容的文字作为title文字,title核心内容放在前60个字符 分级标题 1.创建分级标题时,避免跳过级别,如h3直接跳到h5,但允许从低级别跳到高级别. 2.不用 ...

  2. Html5与Css3知识点拾遗（八）

    css5新增的元素与属性 表单内元素的属性 1. form属性 之前必须书写在表单内部.而在Html5中,可以放在任何位置,为元素指定一个form属性,属性值为该表单的id,就可以声明该元素属于指定表 ...

  3. Html5与Css3知识点拾遗（六）

    web字号 px() 百分比(较常用) em(最常用):一般1em=16px,相对单位.以父元素作参照系,父元素大小是不确定的 body{ font-size:100%; /*父元素默认为16px*/ ...

  4. Html5与Css3知识点拾遗（五）

    css3更新的颜色 RGBA:红.绿.蓝.不透明度 rgba(89,0,127,0.4); HSL和HSLA:色相.饱和度.亮度.不透明度 hsl(282,100%,25%); hsl(282,100 ...

  5. Html5与Css3知识点拾遗（九）

    css布局 控制元素的显示类型和可见性 块级元素 dispaly:block: 行内元素(不能设置宽度) display:inline: 不接受padding设置,但padding-top和paddi ...

  6. Html5与Css3知识点拾遗（四）

    web图像 JPEG:适用于大多数照片,颜色较多,可接受质量损失的图像 PNG-8:适用标识.重复的图案以及其他颜色较少的图像或具有连续颜色的图像 PNG-24:不支持颜色更多的图像,适用与颜色丰富且 ...

  7. Html5与Css3知识点拾遗（三）

    文本 small:包括免责申明.注意事项.法律限制.版权信息,只适用于短于,常包含在页面级的footer里 H5对i和b的重新定义 b:提醒文字.不传达任何额外的语气.文档摘要关键词.评论中的产品名. ...

  8. Html5与Css3知识点拾遗（一）

    1.元素 空元素: 可选的空格空格和斜杠 <img src="x.jpg" width="300" alt="pic" /> & ...

  9. HTML5与CSS3知识点总结

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...

随机推荐

  1. Suricata之outputs（输出选项）

    outputs stats.log(统计数据包信息的日志) 配置文件:默认开启,数据包统计时间间隔默认为8S 日志文件:主要统计规定时间间隔内数据包的总量,各种不同类型数据包的数量以及数据包的大小等信 ...

  2. Spring AOP初级——入门及简单应用

      在上一篇<关于日志打印的几点建议以及非最佳实践>的末尾提到了日志打印更为高级的一种方式——利用Spring AOP.在打印日志时,通常都会在业务逻辑代码中插入日志打印的语句,这实际上是 ...

  3. leetcode79

    class Solution { public boolean exist(char[][] board, String word) { for(int i=0; i<board.length; ...

  4. BBS(第一天)项目之 注册功能实现通过forms验证与 前端ajax请求触发查询数据库判断用户是否存在的功能实现

    1.BBS项目之注册功能通过forms验证 from django import forms from blog.models import User from django.contrib.auth ...

  5. java学习--java源文件

    java源文件以“java”为扩展名.源文件的基本组成部分是类(class) 一个源文件中最多只能有一个public类.其他类(如抽象类,default类即省去修饰符的类,接口)的个数不限. 如果源文 ...

  6. [C语言]进阶|程序结构

    ------------------------------------------------------------------------------------ 全局变量: // main.c ...

  7. Ubuntu下解决MySQL自启动,chkconfig list 全部off 情况

    chkconfig命令是用于RedHat/Fedora发行版的,而对于像Ubuntu之类的Debian发行版,应该使用这个命令: sudo update-rc.d mysql defaults 验证一 ...

  8. 【POJ2778】DNA Sequence 【AC自动机，dp，矩阵快速幂】

    题意 题目给出m(m<=10)个仅仅由A,T,C,G组成的单词(单词长度不超过10),然后给出一个整数n(n<=2000000000),问你用这四个字母组成一个长度为n的长文本,有多少种组 ...

  9. idea编辑项目出现【Information:java: javacTask: 源发行版 7 需要目标发行版 1.7】

    在编译项目时候出现问题: Information:java: javacTask: 源发行版 7 需要目标发行版 1.7 解决方案:按着图片操作,这几个地方设置的一样就可以了

  10. Teemo's tree problem

    题目链接 : https://nanti.jisuanke.com/t/29228 There is an apple tree in Teemo's yard. It contains n node ...