HTNML标签总结、CSS总结

详细的标签方法和CSS的在前面几篇文章里，有需自取

标签总结

标签无论名字有任何不同，它最终在界面上渲染出来的都一个矩形盒子，所谓万物皆为盒子

盒子在界面上的分布关系只有2种，自上而下和从左到右

标签的排列主要有3种：
文档中的盒子，在界面中渲染时，其排列方式是由一个CSS属性display决定的，与标签的名称无关。

盒子的display属性值有三种，将盒子分成了三大类
1. block : 块级标签
2. inline-block : 内联级标签
3. inline : 内嵌级标签

display:block块级标签

• 标签独占一行，可以让超文本从上到下排列
• 支持所有的CSS样式设置
• 垂直方向上的margin会重叠
• 在不设置宽度时，width大小为: 自动的情况下块级标签盒子在界面上默认占满父级内容宽度。此时在设置盒子水平方向的margin，border,padding时，都会向内压缩内容空间 (width空间）如果设置了宽度，盒子移动，符合margin,padding 基本移动规律
• 外边距坍塌问题，只出现在父级和子级都是块级标签的情况下

<div class="div11">
    <div class="div1">div1</div>
    <div class="div1">div2</div>
    </div>
    <style>
        .div11{
            border: 1px solid blue;
        }
        .div1{
            width: 200px;
            border-top: 1px solid red;
        }
    </style>
    <hr/>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        div.parent {
             width: 100px;
             height: 100px;
             margin:20px;
             background-color:#eee;
             border: 1px solid red;
         }
         div.child {
              width: 40px;
              height: 40px;
              margin:30px auto;
              text-align:center;
              line-height:40px;
              background-color:red;
         }
   </style>

inline-block

可以让盒子同行排列

• 支持所有的CSS样式设置
• 间隙问题：
  在浏览器上同行排列的盒子，浏览器会将文档中对应标签之间的空白符解 析成一个间隙并且该间隙大小不固定。不同浏览器、浏览器不同版本、相同浏览器在不同系统平台上，该间隙大小不一致，具有危害性，需要消除。

消除方法：为同行排列盒子的父级设置font-size:0；同时由于font-size具有继承性，因此需要给子级恢复字体大小

• 对齐问题，默认情况下同行排列的盒子，是按照盒子内部最后一行文字的底 部对齐，当文字行数不一样时会导致不对齐。通vertical-align属性可以设置 盒子的对齐基线。一般情况常用三个值：top顶对齐、middle居中对齐、bottom底对齐
• 居中问题通过给父级设置text-align:center来实现
• 在不设置宽高大小的时候，由内容撑开宽度和高度

<div class="div2">div1 div1 div1 div1 div1 div1</div>
   <div class="div2">div2</div>
   <style>
       .div2{
           width: 200px;
           vertical-align: top;
           display: inline-block;
           border: 1px solid red;
           font-size: 12pt;
       }
   </style>

inline

• inline标签，只用来放文字
• 不支持宽高设置
• 不支持上下margin设置，因此inline型标签需要从上到下移动， 只能通过其他盒子推着它走，或者父级盒子带着它走
• 水平方向上的margin有效，并且相互叠加
• 其盒子大小只能由内部的文字大小撑开
• 最长用的inline型标签 span
• 同样具有间隙问题，解决方法与inline-block一致
• 水平居中：给父级设置text-align：center

<div class="div3">div1111</div>
   <div class="div3">div2222</div>
   <style>
       .div3{
           display: inline;
           border: 1px solid blue;
           width: 300px;
           height: 300px;
       }
   </style>

总结CSS

总结CSS

Cascading Style Sheets层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

为什么使用CSS

• 简化html文档
• 提高html代码维护性及展示性

CSS引入的三种方式

行内样式
通过style标签嵌入
通过link标签引入，注意关于@import

行内样式

<div style="color:red">显示内容</div>

通过style标签嵌入

<div style="color:red" class="div1">显示内容</div>
    <style>
        .div1 {
            /*行内样式 > 嵌入样式*/
            color: blue;
            background-color: yellow;
        }
    </style>

引入样式文件

样式是一个后缀为.css的独立文件，可以在不同的html页面文件中进行引入，以达到统一显示风格的目的。

<!--
           语法规则:
       <link href="CSSurl路径" rel="stylesheet" type="text/css" />
       例如：<link rel="stylesheet" href="http://www.yan.com/style.css" >
           优化手段CDN

       <style type="text/css">
       @import url(CSS文件路径地址);
       </style>
           例如
           <style>
           @import url(http://www.yan.com/style.css)
       </style>
       -->

link和import的区别

首页link和import语法结构不同，前者是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要style type ="text/css"标签，同时可以直接“@import url(CSS文件路径地址);”放入css文件或css代码里引入其它css文件。

本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。

css样式表的优先级

基本规则：就近原则
最近的祖先样式比其他祖先样式优先级高
"直接样式"比"祖先样式"优先级高
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器【常见的7种选择器】