[Front-end learning diary] positioning & element display or hiding & sprite map & font icon & user interface style & common layout skills

1. Positioning

1. Positioning composition

Positioning: Set the box at a certain position, so positioning is also to place the box, and move the box according to the positioning method

positioning = positioning mode + edge offset

The positioning mode is used to specify how an element is positioned in the document, and the edge offset determines the final position of the element

1.1 Positioning Mode

Set by position attribute

value	Semantics
staitic	static positioning
relative	relative positioning
absolute	absolute positioning
fixed	fixed positioning

1.2 Edge Offset

Attributes	describe
top	top offset
bottom	bottom offset
left	left offset
right	right offset

2. Positioning method

1.3 Static positioning static

selector{position:static}

1. Static positioning is placed according to standard flow characteristics, without edge offset
2. Static positioning is rarely used in layout

1.4 relative positioning relative

1. It moves relative to its position
2. The original position in the standard stream continues to be occupied, and the following boxes still treat it in the standard stream mode (the original position will not be lost, and the label will not be removed)

1.5 absolute positioning absolute

1. If there is no parent element or the parent element is not positioned, the browser shall prevail
2. If the parent element has positioning, the closest parent element with positioning is used as the reference point
3. Absolute positioning takes no position

1.6 Fixed positioning fixed

The position of the element does not change when the browser page is scrolled

1. Moves the element using the browser's viewport as a reference point

• has nothing to do with the parent element
• don't scroll with scrollbar

2. Fixed positioning is no longer occupying the previous position
3. Fixed positioning is also off-label. In fact, fixed positioning can also be regarded as a special absolute positioning.

Special fixed positioning: fixed on the right side of the plate center
Small algorithm:

1. Let the fixed positioning box left: 50%, go to half of the browser's visible area
2. Let the fixed positioning box margin-left half the distance of the heart width

1.7 Sticky positioning stickly

1. Moves the element using the browser's viewport as a reference point
2. Occupy the original position
3. You must add top, etc. to be valid

3. Parenthood

Absolute positioning is used for the child, and relative positioning is required for the parent

• Absolute positioning of the child will not occupy a position, and can be placed anywhere in the parent box without affecting other sibling boxes.
• The parent box needs to be positioned to restrict the display of the child box in the parent box

Relative positioning is often used as the parent of absolute positioning
because the parent needs to occupy a position, so it is relative positioning, and the child box does not need to occupy a position, it is absolute positioning

4. Positioning stacking order z-index

selector {z-index:1}

• The value can be a positive integer, a negative number or 0, the larger the value, the higher the box
• If the attribute values ​​are the same, they will be written in order of precedence
• Numbers cannot add units
• Only positioned boxes have the z-index property

5. Expansion of Positioning

5.1 Absolutely positioned boxes are centered

A box with absolute positioning cannot be centered horizontally through margin:0 auto, but it can be centered horizontally and vertically by the following calculation method

1. left:50%: Let the left side of the box move to the horizontal center of the parent element
2. margin-left: -100px, let the box move to the left by half of its own width

5.2 Special features of positioning

Absolute positioning and fixed positioning are also similar to floating

1. Add absolute positioning or fixed positioning to inline elements, and you can directly set the width and height
2. Add absolute or fixed to block-level elements. If width and height are not given, the default size is the size of the content

5.3 Absolute positioning will completely suppress the box

• Floating elements are different, they will only suppress the box of the standard flow below, but will not suppress the text in the box of the standard flow below, but absolute positioning will suppress all the contents of the standard flow below. The purpose of
  floating is to make the text surround effect

2. Show and hide elements

Essence: Let an element be hidden or displayed on the page

1. display attribute

• none: hidden objects
• block: converted to a block-level element and
  does not occupy a position after the display element is hidden

2. visibility visibility

• visible: the element is visible
• hidden:
  keep the position after the element is hidden

3.overflow overflow

Show or hide overflowing elements

• visible: does not cut the content and does not add scroll bars
• hidden: Do not display content exceeding the size of the object, and the excess part is hidden
• scoll: Display elements and always display scroll bars

• auto: show the element but only show the scrollbar when needed
  

3. Sprite map

In order to effectively reduce the number of requests received and sent by the server and improve the loading speed of the page, the
core principle: integrate some small background images in the web page into a large image, so that the server needs one request

1. Mainly for the use of background images
2. Large images are also called sprites or sprites
3. To move the position of the background image, you can use background-position
4. The moving distance is the xy coordinate of the target image
5. In general, it moves up and to the left, so the value is a negative value

shortcoming:

1. Image file size is large
2. It will be distorted when zooming in and out
3. Replacing pictures is complicated

4. Font icons

What is displayed is an icon, which is essentially a font

• Lightweight: An icon font is smaller than a series of images. Once the font is loaded, the icon will be rendered immediately, reducing server requests
• Flexibility: the essence is text, you can change the color arbitrarily, transparent rotation, etc.
• Compatibility: supports almost all browsers

It cannot completely replace the sprite map, it is only used for some simple small icons

Small icon download website:
icomoon font: http://icomoon.io
Ali iconfont font: http://www.iconfont.cn/

Five, CSS production triangle

Principle: In the case of not setting the height and width but only setting the border,
set the other three corners to be transparent as follows

<style>
        .box {
      
      
            height: 0px;
            width: 0px;
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-right: 100px solid transparent;
            border-left: 100px solid rgb(255, 252, 159);
            margin: 100px auto;
        }
    </style>

6. User interface style

• Change the user's mouse style
• form outline
• Prevent form fields from dragging

1. Mouse style

li{cursor:pointer}

attribute value	describe
default	noob
pointer	tiny hand
move	move
text	text
not-allowed	prohibit

2. outline outline

After adding the outline 0 or outline:none style to the form, you can remove the default blue border

3. Prevent drag and drop text field resize

textarea{resize:none；}

7. Inline blocks and text are vertically centered

vertical-align

value	describe
baseline	default. The element is placed on the baseline of the parent element
top	Aligns the top of the element with the top of the tallest element in the row
middle	Prevent this element in the middle of the parent element
bottom	Align the top of the element with the top of the lowest element in Hanzhong

Solve the problem of the default blank gap in the picture

1. Add vertical-align:middle to the picture, etc.
2. Convert images to block-level elements

Eight, overflow text ellipsis display

1. Single-line text overflows and displays ellipsis

<!-- 1.先强制一行内显示文本 -->
white-space:nowrap;
<!-- 超出部分隐藏 -->
overflow:hidden;
<!-- 文字省略号替代超出部分 -->
text-overflow:ellipsis;

2. Multi-line text overflows and displays ellipsis

overflow:hidden;
text-overflow:ellipsis;
<!-- 弹性伸缩盒子模型显示 -->
display:-wedkit-box;
<!-- 限制在一个块元素显示的文本的行数 -->
-wedkit-line-clamp:2;
<!-- 设置或检索伸缩盒对象的子元素的排列方式 -->
-wedkit-box-orient:vertical;

Nine, common layout skills

1. The use of negative margin values
2. Text around floated elements
3. Clever Use of Inline Blocks
4. css triangle reinforcement

the case

1. Taobao focus map

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }

        li {
      
      
            list-style: none;
        }

        .promo {
      
      
            position: relative;
            width: 846px;
            height: 472px;
            background-color: palegoldenrod;
            margin: 100px auto;
        }

        .promo img {
      
      
            width: 846px;
            height: 472px;
        }

        .prev,
        .next {
      
      
            position: absolute;
            top: 50%;
            margin-top: -15px;
            width: 40px;
            height: 50px;
            background: rgba(0, 0, 0, 0.3);
            text-align: center;
            line-height: 50px;
            color: aliceblue;
            text-decoration: none;
        }

        .prev {
      
      
            left: 0;
            border-radius: 0 25px 25px 0;
        }

        .next {
      
      
            right: 0;
            border-radius: 25px 0 0 25px;
        }

        .promo-nav {
      
      
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -70px;
            width: 140px;
            height: 26px;
            background-color: rgba(255, 255, 255, .3);
            border-radius: 13px;

        }

        .promo-nav li {
      
      
            float: left;
            width: 16px;
            height: 16px;
            background-color: aliceblue;
            border-radius: 50%;
            margin: 6px 6px;
        }

        .promo-nav .selected {
      
      
            background-color: #ff5000;
        }
    </style>
</head>

<body>
    <div class="promo">
        <div class="pic">
            <img src="promo.png" alt="">
            <a href="#" class="prev">&lt;</a>
            <a href="#" class="next">&gt;</a>
            <div class="promo-nav">
                <ul>
                    <li class="selected"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

The effect is as follows:

2. Potato case

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tudou {
      
      
            position: relative;
            width: 183px;
            height: 257px;
            background-color: blue;
            margin: 100px auto;
        }

        .tudou img {
      
      
            width: 100%;
            height: 100%;
        }

        .mask {
      
      
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(背景.png) no-repeat center;
        }

        .tudou:hover .mask {
      
      
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask">

        </div>
        <img src="tudou.jpg" alt="">
    </div>
</body>

</html>

After mouseover: