CSS face questions 1

Write what you know Block Elements (Block-level Elements), inline Elements, Replaced Elements / Empty Elements

CSS element type in

Alternatively and irreplaceable element

Characteristics of the element itself, and it can be divided into non-replaceable element replacement

Alternatively elements Replaced Element / Empty Elements

The browser is replaced elements and attributes of the element tag, to determine the specific contents of the display element. For example, <img>the value of the property scr tag to read information of the image and display it, but if you view the html code, then look at the actual content of less than picture; it will be listed as determined display the entry box or radio buttons according to the type attribute of input .

The html <img> <input> <select> <textarea> <select> <video>are replaceable elements.

Irreplaceable element

html in most of the elements are not replaceable elements, namely showing its content directly.

Block-level elements

By default, block-level elements will be a new line. Laterally and fill the content area of ​​its parent element.

Common block level elements

<address> <div> <article> <aside> <audio> <canvas> <section> <header> <p> <form> <h1>To <h6>etc.

Features:

• Always a new line.
• Height, top and bottom lines, and high margin can be controlled.
• The default is 100% of the width of its container unless a set width.

Compared with inline elements

• Elements may comprise inline and block elements

Row element

Features:

• And other elements on one line
• High, line height and the top and bottom margin immutable
• Width is the width of his writings or pictures, can not be changed

Compared with the block-level elements:

• Only numbers, and other inline elements under normal circumstances.
• By default, inline elements will not be a new line.

<span> <i> <strong> <br> <a>

Almost all of replaceable elements are inline elements.

display

In fact, to display the properties of investigation, because diplay can be changed, so form elements are often switched.

The inline-block elements are rendered inline element, but the content of the object as a block-level element.

Then, the same level of discharge element as inline elements on one line space allowed.

How to achieve the IE block elements display: inline-block effect?

There are two ways: 1. First use display: inline-block property trigger block element, then define the display: inline, let block elements rendered as inline objects (two display to have placed two CSS declarations will be effective this is a classic bug IE, and if the first definition of the display: inline-block, and then set back to display inline or block, layout will not disappear). Code is as follows (... other attribute of the content omitted):

div{display:inline-block;...}
div {display:inline;}
复制代码

2, a block element is set directly to inline objects presenting (set property display: inline), then trigger the layout of block elements (eg: zoom: 1, etc.). code show as below:

div{display:inline; zoom:1;...}
复制代码

alt and title attributes img tag What is the difference?

alt tag content is to demonstrate after img src attribute of the content acquisition failure

is the title of the picture when the mouse is moved to the display

What is BFC How to trigger?

BFC is formatted block-level context (block fromatting context) in accordance with a block-level layout box. Block-level formatting creates context contains all the content of its internal elements, and vertically arranged boxes in the current block level format context. But the BFC does not contain sub-elements child element of the BFC.

BFC is formed by:

• The root element or other element that contains it.
• float is not none
• Or the absolute value of position is fixed.
• Value display is inline-block, table-cell, flex, table-captio, grid or inline-flex
• overflow value is not visible.

In other words, when you see these properties when, on behalf of the current element has created a BFC.

Positioning and floating remove floating very important. BFC will only be applied to elements within the same time positioning and floating remove floating. Floating will not affect the layout of other elements of the BFC, clear floating elements can only be cleared within the same BFC. Folding margins (margin collapsing) will only occur between the same block-level element BFC.

The main problem:

Browser processing contents spill: if there is no height or a height of a child element of the cassette auto floating element, the height of the box will not be softened, and can be created by the parent to the BFC contains a floating element, then the height of the parent to calculate the height of the floating element.

Create a new BFC to avoid outside div distance between adjacent merger.

Avoid text wrapping problem.

• Processing content overflow

<style>
  .box{
    background-color: #888; // 灰色
  }
  .float{
        background: #73DE80;    /* 绿色 */
        opacity: 0.5;
        border: 3px solid #F31264;
        width: 200px;
        height: 200px;
        float: left;
    }
    .static{                        /* 粉色 */
        background: #EF5BE2;
        opacity: 0.5;
        border: 3px solid #F31264;
        width:400px;
        min-height: 100px;
    }
  </style>
复制代码

<div class='box'>
    <div class='float'></div>
    <div class='static'></div>
</div>
复制代码

Add box overflow: hidden attribute formed BFC

• Two elements to solve the problem from the outside BFC adjacent folds

.box{
    background-color: #888;
    overflow: hidden;
  }
  .float{
        background: #73DE80;    /* 绿色 */
        opacity: 0.5;
        border: 3px solid #F31264;
        width: 200px;
        height: 200px;
    }
    .static{                        /* 粉色 */
        background: #EF5BE2;
        opacity: 0.5;
        border: 3px solid #F31264;
        width:400px;
        min-height: 100px;
    }
    .m-1{
      margin: 10px 0;
    }
复制代码

<div class='box'>
    <div class='float m-1'> </div>
    <div class='static m-1'> </div>
</div>
复制代码

The actual outside the box from two elements only 10px. Let one form BFC can solve this problem.

• Avoid text wrapping

.box{
    background-color: #888;
    overflow: hidden;
  }
  .float{
        background: #73DE80;    /* 绿色 */
        opacity: 0.5;
        border: 3px solid #F31264;
        width: 100px;
        height: 20px;
        float: left;
    }
复制代码

<div class='box'>
    <div class='float'> </div>
    <p>BFC 是 块级格式化上下文 （block fromatting context）是按照块级盒子布局的。 块级格式化上下文包含创建它的元素内部的所有内容，并且在当前块级格式化上下文中盒子竖着排列。但是 BFC 不包含子元素 BFC 的子元素</p>
</div>
复制代码

The p tag becomes the new BFC can be resolved

padding-top setting is based on what percentage of the calculated

When using padding percentages are based on the width of the parent element content calculated

Percent of css

• Referring to the parent element width elements: padding margin width text-indent
• Referring to the parent element height element: height
• Referring to the parent element attributes of elements: font-size line-height Special: relative positioning time, top (bottom) left (right ) refer to the parent element content area height and width , and the absolute positioning , the reference to the latest positioning element comprises Padding the height and width.

The aspect ratio fixed at 4 by implementing the picture CSS: 3 (width of the image of the filled container, but the container is not fixed width)

Or: In the picture adaptation process, the picture aspect ratio to remain unchanged.

Use picture placeholder container to achieve. padding block elements is provided as a percentage of the time, according to the width of the content is the parent element of the set, then we can set in proportion to the width of the container (padding-top padding-bottom /), absolute positioning is used to image displayed in the lower container.

<div class="img">
    <img src="">
</div>
复制代码

.img{
    width:100%;
    position:relative;
    height:0;
    overflow:hidden;
    padding-bottom: 75%; // 4:3
}
.img img{
    positon: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
复制代码

.Img also need to ask the parent element is also block elements.

postion values

postion:

• relative: generating element relative positioning, positioning relative to its normal position. left and so effective.
• absolute: generating absolute positioning element relative to the first parent element is positioned outside the static positioning.
• fixed: generating element absolute positioning, relative to the browser window positioning.
• static: not located, elements that appear in the normal flow (ignoring top, bottom, left, right or z-index statement).
• inherit: the provisions should inherit the value of the position property from the parent element.

Reproduced in: https: //juejin.im/post/5cfd275d6fb9a07eb94f7f1e