布局

实例：规范的命名和编排

<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. sqlserver数据库镜像运行模式

    运行模式: 从大层面来说,SQL Server镜像只有两种模式:高安全模式和高性能模式.两种模式的主要区别在于在事务提交后的操作.可以从图1-1中查看运行模式. 在高性能模式下,主体服务器不需要等待镜 ...

  2. SHFileOperation 解决double-null terminated

    void rubyTools::funStrToWstr(string str, wstring& strw) { const char* pData = str.c_str(); int l ...

  3. TCP的三次握手与四次挥手理解及面试题（很全面）

    序列号seq:占4个字节,用来标记数据段的顺序,TCP把连接中发送的所有数据字节都编上一个序号,第一个字节的编号由本地随机产生:给字节编上序号后,就给每一个报文段指派一个序号:序列号seq就是这个报文 ...

  4. SpringCloud系列三：SpringSecurity 安全访问（配置安全验证、服务消费端处理、无状态 Session 配置、定义公共安全配置程序类）

    1.概念:SpringSecurity 安全访问 2.具体内容 所有的 Rest 服务最终都是暴露在公网上的,也就是说如果你的 Rest 服务属于一些你自己公司的私人业务,这样的结果会直接 导致你信息 ...

  5. leetcode76

    class Solution: def minWindow(self, s: str, t: str) -> str: n = len(s) if n==0: return "&quo ...

  6. String、StringBuffer、StringBuilder区别

    String.StringBuffer.StringBuilder区别 StringBuffer.StringBuilder和String一样,也用来代表字符串.String类是不可变类,任何对Str ...

  7. 简单的TSQL基础编程格式，存储过程，视图

    这里简单整理一下数据库简单的编程,变量定义,赋值,分支语句和循环(这里以Sqlserver),以及存储过程格式 首先是变量定义,赋值,分支语句 --======TSQL数据库基础编程,定义变量,赋值, ...

  8. python 读取excel数据

    import xlrd book = xlrd.open_workbook(file_path)#打开文件 sheet = book.sheet_by_index(0) #获取第一个工作簿 print ...

  9. DB2 公共表表达式（WITH语句的使用）

    ----start 说起WITH 语句,除了那些第一次听说WITH语句的人,大部分人都觉得它是用来做递归查询的.其实那只是它的一个用途而已,它的本名正如我们标题写的那样,叫做:公共表表达式(Commo ...

  10. 突然发现用PHP做多条件模糊查询很简单

    原文:http://blog.csdn.net/suleil1/article/details/49471099 所使用的方法:$sqlArr=array();array_push();implode ...