布局

实例：规范的命名和编排

<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. Vue 折叠面板Collapse在标题上添加组件后，阻止面板冒泡的用法

    iView组件中,折叠面板Collapse点击面板标题部分,会出现面板收起或展开的效果.那么在面板标题后面再添加下拉框之类的组件时,会出现跟面板点击一样的效果,这时候就需要阻止冒泡的用法了.具体代码: ...

  2. MySQL 存储修改

    真的坑.

  3. java.io.UnsupportedEncodingException

    启动项目抛错: java.io.UnsupportedEncodingException: 1 at java.lang.StringCoding.decode(StringCoding.java:1 ...

  4. leetcode448

    public class Solution { public IList<int> FindDisappearedNumbers(int[] nums) { Dictionary<i ...

  5. linux使用privoxy将55转为http代理

    =============================================== 2018/3/21_第3次修改                       ccb_warlock 更新 ...

  6. django 开发之前后端分离开发模式

    1. 什么是前后端分离开发的概念: 前端页面运行前端服务器上,负责页面的渲染(静态文件的加载)与跳转 后端代码运行在后端服务器上, 负责数据的处理(提供数据请求的接口) 2. 前后端分离开发碰到的问题 ...

  7. This iPhone 6s is running iOS 11.3.1 (15E302), which may not be supported by this version of Xcode.

    This iPhone 6s is running iOS 11.3.1 (15E302), which may not be supported by this version of Xcode.

  8. Linux下修改Tomcat默认端口

    假设tomcat所在目录为/usr/local/apache-tomcat/ 1.打开tomcat配置文件#vi /usr/local/apache-tomcat/conf/server.xml 2. ...

  9. XSLT 创建CDATA节点

    创建文本结点 (1)直接写入文本: text1 (2)通过<xsl:text>创建文本结点: <xsl:text>text2</xsl:text> (3)通过< ...

  10. 合并数组，改变原数组apply与不改变原数组

    一看见合并数组,可能第一反应就是concat,concat确实具有我们想要的行为,但它实际上并不附加到现有数组,而是创建并返回一个新数组. 同样你也许会想到ES6的扩展运算符...         但 ...