css(8)

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/weixin_45734493/article/details/102766647

learning target

Be able to understand what is sprite and advantages (the picture put on a lot of small images, reducing the number of requests to the server, reducing the pressure on the server)

Be able to use the sprite set the background image

Be able to use the font icon

To complete the sliding door case

Able to write common style initialization

BFC several ways to understand and trigger the BFC

。。。。。。

Clear float double dummy elements

Clear pseudo-element floating upgraded version (only solve the Clear float, but also solve the collapse)

The combined method of two pseudo-element clearance method is as follows:

ヾ (1╹◡╹) Techno "pseudo-element clearance method bis

Clear float:

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

margin collapse problem:

.clearfix::before {
    content: '';
    /*触发BFC + 并且转换成块级元素*/
    display: table;
}

Merged:

/* ::before 定义成一个块级的表格， 触发 BFC 可以防塌陷 */
.clearfix::before，
.clearfix::after {
    content: "";
    /* BFC + 转化为块级元素 */
    display: table;
}

/* ::after 用于清除浮动 */
.clearfix::after {
    clear: both;
}
/* 兼容 IE 67 */
.clearfix {
    *zoom: 1;
}

Check the large web page style ( millet, Taobao, JD ), usually with double pseudo-elements

ヾ (1╹◡╹) Techno "Check pages

<!--  塌陷和清除浮动问题并存  -->
<!-- 双伪元素清除浮动 -->

<div class="father clearfix">
	<div class="son"></div>
</div>

/* 切换测试 */
/* 浮动 */
float: left;
/* 塌陷 */
margin-top: 50px;

Sprite (use)

The small picture on a big picture (css sprite), such as Taobao, or Jingdong

ヾ (1╹◡╹) Techno "Paint understand at the front end and back-end interaction

Benefits (to know):

将很多的小图片放在一张大图片，最终只要请求一次就行了，可以减少对服务器的请求次数，减轻服务器的压力

Elves use map (will be)

On a big picture, there are many small pictures, then how will this little picture out of it?

step:

1. Create a box
2. Take a small amount of PS by image size, the small image corresponding to the width and height of the box disposed directly
3. The sprite set box background image
4. The coordinates of the small picture of a negative value added to thebackground-position：x y;
   • Let the background image to move up, y-axis coordinate is negative
   • Let the background image moves to the left, x-axis coordinate is negative

note:

• By way of background sprite positioning, so that all the small images can be displayed
• Box the same size and small picture
• In ps by slicing, corresponding to the amount of coordinate, direct access assignment (negative) to

ヾ (1╹◡╹) Techno "spell his name

Font icons (use)

Some display as an icon text

Scene: the page has a lot of icons (left and right arrows, shopping cart, user, etc.), how the finished result pages? ?

Pictures Disadvantages:

1. Adds a lot of extra "http request" greatly reduce the performance of the page
2. Pictures can not be good, "Zoom", as zoom in and out distorted (Mosaic) Pictures

In many cases we want to minimize http requests (web speed), the icon is scaled (vector)

Fonts icon (iconfont) can solve these problems! !

** Pros: ** nature is text, you can arbitrarily change the color, size, without distortion

Ali iconfont font

http://www.iconfont.cn/ Ali, a character font icon

Use steps (use)

1. Log Ali iconfont font, the icon you want Add to Cart

2. Click the shopping cart icon, download the code

3. New fonts in the project directory folder, all files within the package to copy the font file icon into the fonts folder

4. Incorporated in the project file css font (font file package demo_fontclass.html of description)

   <link rel="stylesheet" href="fonts/iconfont.css">
   href：写的是iconfont.css文件的路径
   

5. By using the class name (font file specification for the package demo_fontclass.html)

   <i class="iconfont icon-refresh"></i>
   

note:

• When you set the font style icon, attention stacked problem! ! (I find iconfont label by class name)
• You can not change the font icon font-family

Sliding doors

We have learned the use of technology, according to the text, so that the background adaptation. Can achieve some special effects (QQ chat bubbles)

** Paint demonstration: ** QQ chat bubbles

Sliding steps:

1. Left: left background positioning
2. Intermediate: x-axis direction Tile
3. Right: the right background positioning

expand

Elements and special inline floating (understand)

Float: can not cover the text, images and lines within the block (Inline elements generally only contain text, it is generally not covered by the floating element inline elements: Graphic Surround), these elements will pushed aside, but the level is still high according to a half level memory can (without contradiction).

To put it plainly, the float generally only covers the block-level elements (special phenomenon, know you can)

ヾ (1╹◡╹) Techno "special case of floating elements and inline

1.浮动的元素可以覆盖标准流中的块级元素
2.浮动的元素不能覆盖行内块元素
3.浮动元素不能覆盖图片
4.浮动元素不能覆盖行内元素
5.图文环绕-》浮动的元素不能覆盖文字

BFC block-level formatting context (Learn)

Block Formatting Context: means separate containers a separate block-level rendering area, a page on the isolated

To put it plainly, the father of the child elements inside the box no matter how badly, will not affect the parent box original layout

For the foundation of our class, this little understood only need to know two BFC's role can be.

BFC's role:

1. BFC triggers the box, became a separate container isolated on the page, the box on the parent or the original layout, does not affect the layout of the parent because the child elements of the box

   塌陷问题 :  子盒子设置margin-top影响到父盒子的塌陷（触发BFC后为了不影响父盒子的布局，所以消除了塌陷的影响）
   浮动问题 :  子盒子设置浮动，，影响到了父盒子的高度（触发BFC后为了不影响父盒子的布局，所以清除浮动）
   

   ** Application: ** collapse solve the problem, clear float

   ヾ (1╹◡╹) Techno "to solve the problem of collapse and floating issues

2. BFC triggered ordinary box does not overlap with the floating element

   ** Application: ** Holy Grail layout (employment class mobile terminal layout will be used)

   ヾ (1╹◡╹) Techno "margin method and the Holy Grail layout method BFC

How to trigger BFC (test collapse) (understand)

To the parent box set:

• The value of the float is not none
• The value of the overflow is not visible.
• display value table, table-cell, inline-block
• The value of position is not relative and static
• and many more…

Millet practice

1. top

   • The method of the border and many can be |, span, border, pseudo-elements (pseudo-elements can extract a common class),

2. Navigation section

   • The height of the navigation section, which may be a small picture height (height above the logo below the bottom bracelet), disposed above and below the margin,
   • Height can also be set to the overall height and then let inside the text and pictures centered vertically