CSS summary (c)

Box size calculation

Factors affecting the size of the box: the border will affect the size of the box , padding will also affect the size of the box

Calculating the size of the box:

盒子的真实宽度 = width + 左右的border + 左右的padding
盒子的真实高度 = height + 上下的border + 上下的padding

Inside and outside the margins initialization

* {
      margin: 0;    /*外边距初始化*/
      padding: 0;  /*内边距初始化*/
    }

Box is centered horizontally

/*水平居中：*/
/*margin: 0 auto;*/

CSS layout

css layout in three mechanisms:

The nature of the page layout: the layout of the page is actually the process of placing the box

It is time for the page layout used to display box (how to put the box)

1.标准流（普通流/文档流）
  遵循HTML的标准文档规范，在页面显示的时候
  从上到下、从左到右的这种方式称为标准流

2.浮动

3.定位

float

Floating original purpose: to achieve the effect of text wrapping pictures

Floating present purpose: to help us achieve fast layout of the page

img {
      /*float: left;*/
      float: right;
    }

Floating features:

1.脱标（脱离标准流），不占原来的位置
2.浮动能改变元素的显示方式（针对行内元素）
3.浮动的元素以顶部对齐
4.如果元素有包含关系，子元素浮动不会占据父元素的padding和border的位置
5.如果多个块级元素，前面不浮动，后面浮动，后面浮动的元素也只能左右浮动，不会和前面标准流的元素在同一行显示
  如果想要多个块级元素在同一行显示，那么这几个块级元素都必须浮动

three common css layout

• Layout version of the heart
• Banner layout
• Columns Layout

Clear float

Clear float: Clear floating nature is actually to eliminate the influence caused by floating

There are general elements include relationship, child elements floating height of the parent element is not set, and the page layout and requires a high degree of parent box, this time we need to clear the floating

Clear float ways:

1. The height of the parent box set

2. Give the parent box set overflow: hidden (triggered BFC)

3. Additional labeling (not recommended to add the label must remove floating elements floating on the back, and only a block-level element)

Clear float two important ways:

Pseudo-elements: not need to write in the HTML structure, only when the browser parses the code, automatically adds the element in the structure

::before    在…………之前
::after     在…………之后

Pseudo-element must be an element in the role of the body.

The first:

/*伪元素清除浮动*/
.clearfix::after {
  content: ".";    /*伪元素必须有content才能有效    这个content中的点是为了解决浏览器之间的兼容*/
  display: block;    /*清除浮动必须使用块级元素，而伪元素是一个行内元素*/
  clear: both;   /*清除浮动的代码*/
  visibility: hidden;  /*隐藏content中的内容*/
  height: 0;  /* 去掉伪元素的高度*/
  line-height: 0;    /*设置行高为0,也是为了解决浏览器的兼容问题*/
}
.clearfix {
  *zoom: 1;    /*为了解决IE6-7的兼容*/
}

The second:

/*双伪元素清除浮动*/
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

Line height

Line Height: = Height + text size, line spacing pitch on the +

When the line height and the height of the box with the same text will be centered vertically

Showing and hiding elements

 隐藏元素：
    visibility: hidden  隐藏元素，占位置
    display：none   隐藏元素，不占位置

  显示元素：
    visibility：visible
    display: block

Mouse style

div {
  /*鼠标样式*/
 /*cursor: pointer;   鼠标手*/
 /*cursor: move;   移动光标*/
 /*cursor: default;*/   /*鼠标会跟随操作系统的鼠标样式*/
 /*cursor: auto; */  /*跟随浏览器的鼠标样式*/
}
a{
 /*cursor: default;*/
 /*cursor: auto;*/
 /*cursor: text;   文本光标*/
 /*cursor: help;*/
 /*cursor: crosshair;*/
}

Prevent drag text field

textarea {
   resize: none;  /* 防止文本域拖拽*/
}

Text overflow handling

A deal

.box {
      width: 300px;
      height: 300px;
      border: 1px solid #f00;

      /*文本溢出处理：*/
      /*overflow:  visible;   默认的，不做任何处理*/
      /*overflow: hidden;   直接隐藏溢出*/
      /*overflow: auto;   有溢出加滚动条，没有溢出不加*/
      overflow: scroll;   /*始终都有滚动条*/
    }

overflow: hidden role of :( overflow hidden, clear float, solve margins collapse, etc.)

Second, instead of using the overflow portion ellipses

.box {
      width: 300px;
      height: 50px;
      border: 1px solid #00f;
      /*如果要使用省略号替代溢出部分*/
      /*隐藏溢出*/
      overflow: hidden;
      /*必须让文本在一行显示*/
      white-space: nowrap;
      /*使用省略号替代*/
      text-overflow: ellipsis;
    }

Outer contour line

Are plotted in a line around the element, located in a peripheral edge of the frame, projecting elements may function

 /*外轮廓线：*/
 /* outline: none;*/  /*去除外轮廓线     常用*/
 /*outline: 5px dashed pink;*/
 /*outline-top: 5px solid red;*/
}
.box {
  width: 200px;
  height: 200px;
  background: blue;
  outline: 5px solid pink;      /* 外轮廓显示不影响盒子大小*/
}

Word-spacing

The distance between the two characters

.box {
      /*letter-spacing: 10px;中文*/
      word-spacing: 10px;/*英文单词*/
    }

Vertical alignment

For vertical alignment, we generally use the inner row are used to set the block elements or the alignment of the text form elements

Vertical Alignment: block-level element is not valid, only the elements for the row or rows within the block-level element

Generally vertical alignment perpendicular to the line elements disposed inline or block-level elements of the text

 <style>
    input {
      /*设置垂直对齐方式*/
      /*vertical-align: middle;    设置和文本的中线对齐*/
      vertical-align: top;  /*设置和文本的行顶线对齐*/
    }
    /*对于垂直对齐方式，我们一般使用的都是用来设置行内块级元素或者是表单元素与文本的对齐方式*/
    .box {
      width: 300px;
      border: 1px solid red;
    }
    img {
      /*设置图片的垂直对齐方式*/
      /*vertical-align: top;*/
      vertical-align: middle; 
    }
    /*图片的默认垂直对齐方式是以文本的基线对齐*/
</style>