HTML+CSS Knowledge Points-Week 2.md

1. Status pseudo-class (link) a label

   a:link{  // 链接未访问状态
       color: aqua; 
   }
   a:visited{  // 链接访问过后
       color: brown;
   }
   a:hover{  // 链接悬停状态
       color:yellow;
   }
   a:active{ // 链接的激活状态（鼠标按下）
       color: pink;
   }
   
hover不仅可以表示链接的悬停，其他的标签也可以使用

Second, the box model

• In css, each label is regarded as a box, with a four-layer structure, namely content, inner margin (inner padding), border, and outer margin.

   1.content 尺寸=width+height
   2.padding 盒子的边缘和内容之间的距离,这段距离会显示背景，不会显示内容
   3.border 边框是指盒子边缘的线条
   4.margin 是指盒子和相邻元素或者父元素之间的距离

   padding-top/bottom/left/right
   boder-top/bottom/left/right
   margin-top/bottom/left/right

   margin:0 auto;  /*块元素水平居中*/

边框简写属性 border:border-width border-style border-color
   border:30px solid black;      
   border-right: 0;   /*去掉边框两种写法*/
   border-left: none;

内边距：
       padding:10px;   上下左右四个方向内边距相同
       padding:10px 20px;  上下     左右
       padding:10px 20px 30px;  上   左右   下
       padding:10px 20px 30px 40px;  上   右  下   左
边框：
       border-width:2px;  设置边框宽度
       border-style:solid;设置边框风格  
           solid/dashed/dotted/double 实/虚/点/双实线  
       border-color:red;  设置边框颜色

       border-top-width: 2px;  设置上边框的宽度
       border-top-style: solid;  设置上边框的风格
       border-top-color: yellow;  设置上边框的颜色

       bottom、left、right三个方向和top同理
外边距：
       margin:10px;   上下左右四个方向外边距相同
       margin:10px 20px;  上下     左右
       margin:10px 20px 30px;  上   左右   下
       margin:10px 20px 30px 40px;  上   右  下   左

       margin:0 auto;  水平居中

   * margin可以设置负值，可以通过负值减少元素的占位，比如margin-top为负值（-50px），元素垂直方向会往上移动，并且减少50px的占位       

Third, the vertical margin merge problem

1. Vertical margin-top transfer problem (parent-child relationship)

   当父元素没有padding\border\float\position\overflow时，给子元素设置margin-top会把父元素一块儿带下来即父元素也会有margin-top
 解决: 
    1. 给父元素添加1px的上padding或者border,子元素margin-top少1px
    2. 可以用父元素的padding-top实现同样式的效果

2. The margins of adjacent elements are merged (sibling relationship)

   两同级标签，上一个设置margin-bottom:40px,下一个设置margin-top:60px，最后两者之间的外边距会合并为数值较大的那个值(60px)，不是数值相加(100px)

Four, box type conversion

   display:block;  设置成块级标签
   display:inline;  设置成行内标签
   display:inline-block;  设置成行内块级标签
   display:none;  隐藏元素,页面上不显示也不占位

5. The blank distance between the blocks in the row and the extra blank below (there is blank in the horizontal and vertical directions)

   解决方案：
      1. 给父元素设置font-size:0;line-height:0;  
      2. 给子元素重新设置font-size和line-height

Six, three major features of CSS

1. Stackability

• A browser's ability to handle style conflicts
• Style does not conflict and does not cascade, style conflicts, subject to the last definition (principle of proximity)

2. Inheritance

• The child element can use certain styles of the parent element, such as text and font related, as long as the parent is set, the default value of the child element is the same as the parent
• Proper use of inheritance can reduce the complexity of the code

   以下属性默认继承：
   
        text-align
        text-indent
        text-decoration
        color
        font-size
        font-family
        font-style
        font-weight
        line-height 
        letter-spacing
        word-spacing
        
   其他属性通过inherit这个值可以实现手动继承
    
        width:inherit;
        border:inherit;
    
   注意： 块级元素width不是默认继承，背景颜色background-color默认是透明也不是继承
   注意： a标签的颜色和文本修饰默认不会继承，需要选中a标签才能修改

3. Priority

• Inline styles have the highest priority
• The weight of the basic selector, the greater the weight, the higher the priority

Selector	Weight
* (Wildcard)	0
tagName (tag selector)	1
.class (class selector)\pseudo class	10
#id (ID selector)	100
Inline style	1000

• In most cases, the weights of the composite selector are added to the weights of the basic selectors that make up the composite selector (special case: the group selector is a single calculation and does not overlap)
• The selector weights are the same, and the later definition takes effect

   后代   .box div  (10 + 1 = 11)
   子代   .box>div  (10 + 1 = 11)
   群组   h1,.box  不会相加，单个计算 h1 1   .box 10
   交集   div.box  (1 + 10 = 11)
   
特殊情况：!important 命令可以把样式优先级提升最高，比行内样式优先级更大，不推荐使用加入到代码中。

Seven, vertical alignment

   vertical-align
           baseline  默认值，基线对齐
           middle  中线对齐
           top  顶部对齐
           bottom 底部对齐

1. Align the center line of the picture and the text, and set vertical-align:middle for the picture;

   css:
        .box img{
            width:150px;
            vertical-align: middle;
        }

   html:

   <div class="box">
        文字pgP 
        <img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png" alt="">
   </div>

2. Align the middle line of the elements in the line, set vertical-align:middle for the two elements in the line;

   css：
        .span1,.span2{
            background-color: red; 
            vertical-align: middle;
        }
        .span1{
            font-size: 30px;
        }
   html:
   <span class="span1">span1</span>
   <span class="span2">span2</span>

3. Align the center line of the inline block elements, and set vertical-align:middle for both inline blocks;

   css：
        .span3,.span4{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: yellow;
            vertical-align: middle;
        }
   html:
   <span class="span3">span3</span>
   <span class="span4">span4 <br> span44</span>

8. Floating

• Layout mode: document flow, floating layout, layer layout (positioning layout)
• Document flow: The elements are arranged on the page according to their own attributes, with blocks from top to bottom and lines from left to right

1. Floating left and right flaot: left/right

Float: left	Right float: right
The left-floating element will go as far as possible to the left until it hits the edge of the parent element or the adjacent floating element.	The right-floating element will go as far to the right as possible until it hits the edge of the parent element or the adjacent floating element.
Get out of the document flow without occupying a place	Get out of the document flow without occupying a place
Multiple left-floating elements are arranged in order from left to right	Multiple right-floating elements are arranged in order from right to left

2. Cancel floating float: none

• Back to the document flow placeholder

• Supplement: After floating elements leave the document flow, they can overwrite the elements in the document flow, but text, pictures and form elements will not be overwritten and will be arranged around the floating elements

Nine, clear floating

• Solve the problem that the height of the parent cannot be supported after the floating element leaves the document flow

Solutions (4 types)
Setting the height attribute to the parent element, the code has poor scalability (inconvenient to maintain)
Set overflow: hidden; for the parent element because overflow: hidden; itself has the effect of hiding the overflow part of the element, so it cannot be used in some cases
Extra tag method: Add a non-floating element after all floating elements, and add the clear:both attribute to it. Will increase the redundant code in the structure.
Add tags by means of pseudo-elements (the same principle as the extra tag method), usage: predefine the .clearfix class in the style sheet, and add it to the tag that needs to be cleared (the parent of all floating elements) clearfix class name

样式表中预先定义好.clearfix类--推荐使用

   .clearfix::after{
            content: '';
            display: block;
            clear: both;
    }
   .clearfix{
            *zoom:1;
   }

Ten, overflow specifies how to display element content overflow

   overflow:visible; 溢出显示（默认值）
            hidden;  溢出隐藏，多出的部分被直接截断
            scroll;  始终显示滚动条区域
            auto;    内容溢出显示滚动条，内容不溢出就不显示滚动条

11. Pseudo-elements

Usage scenario: Generally used to add some style processing to the part

• ::after adds a pseudo element at the end (inside) of the element
• ::before adds a pseudo element at the beginning (inside) of the element

12. Background attributes

1. Shorthand for background attributes

• background:color image repeat positon;
• The order of each value in the abbreviated attribute can be adjusted, and attributes that do not need to be set can be omitted

   background:blue url("logo.png") no-repeat center;

   背景颜色
   background-color:#000;
   background-color:transparent; 透明

   背景图片
   background-image:url("...");

   背景重复
   background-repeat: repeat     默认值，水平和垂直都铺满
                      repeat-x   水平重复
                      repeat-y   垂直重复
                      no-repeat  不重复 

   背景定位
   background-position: 水平  垂直;
        left/center/right top/center/bottom
        x-length  y-length  ,设px, X正右移负左移， y正数下移负上移
        x-%  y-%  ,设%,X 0%-最左边,100%-最右边,50%表-中间，Y 0%-顶部，100%-底部，50%-中间
     
背景定位属性值，如果只设置一个方向，表示另一个方向默认位center

2. The difference between webpage pictures and background pictures

Webpage image	Background picture
Related to web content, more important pictures must be added using img tags	It has nothing to do with the content, use a background image as a decorative pattern on the web page
Such as advertising images, product images, logo images...	For example, textures, small decorative icons... The background image cannot hold the size of the element