Advanced CSS (4) - Extended Content

This series of notes is based on [Duyi Education] Mr. Yuan Jin's html+css basic course and is only used for personal records and reading.

Floating Details Rules

1. Left-floated boxes line up and left
2. Right-floated boxes line up and to the right
3. The top edge of a floating box must not be higher than the top edge of the previous box
4. If the remaining space cannot fit the floating box, the box moves down until there is enough space to accommodate the box, and then moves left or right

The value of row height

line-height

1. px, pixel value

2. number without unit

3. em unit

4. percentage

body background

Canvas canvas : an area

特点：1. 最小宽度为视口宽度 2. 最小高度为视口高度

HTML element's background : overlay canvas

The background of the BODY element :

1. 如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）
2. 如果HTML元素没有背景，BODY元素的背景覆盖画布

About Canvas Background Images

1. 背景图的宽度百分比，相对于视口
2. 背景图的高度百分比，相对于网页高度（html高度）
3. 背景图的横向位置百分比、预设值，相对于视口
4. 背景图的纵向位置百分比、预设值，相对于网页高度

Vertical alignment of line boxes

Vertical alignment of multiple line boxes

Set the vertical-align attribute for unaligned elements, write default values, values, percentages

top/bottom/middle/super/sub/text-top/text-bottom
10px/…

white border at the bottom of the image

When it happens: When the parent element of the image is a block box, if the block box height is automatic, there will often be a gap between the bottom of the image and the bottom edge of the parent element.

1. Set the font size of the parent element to 0
   side effects: other words in the parent element cannot be displayed
2. set img as block box

Guidelines - Deep Understanding of Fonts

font-size line-height vertical-align font-family

letter

The text is produced by text production software, such as fontforge

When making text, there will be several reference lines. The reference lines of different texts may be different, but the reference lines of the same text are the same.

Five reference lines:
text-top, ascent, top line
super, upper baseline
baseline, baseline
sub, lower baseline
text-bottom, descent, bottom line

font-size

Font size, set the relative size of the font

Relative size of text: 1000/2048/1024

The actual size of the text is the distance from the top line of the text to the bottom line (content-area content area)

The background of the line box, covering the content-area

line height

The space where the top line extends upwards and the space where the bottom line extends downwards are equal. This space is called a gap.

gap by default, determined by the designer

• top to bottom (see the PPT diagram), called virtual-area (virtual area)

• The line height is the virtual area

• line-height: normal, the default value is the default gap of text

Text must appear in the middle of a line X
content-area must appear in the middle of virtual-area√

vertival-align

Factors that determine the reference line: font-size font-family line-height

If a line box appears in a child element of an element, a reference line will also be generated inside the element

baseline: The baseline of the element is aligned with the baseline of the parent element
super: The baseline of the element is aligned with the upper baseline of the parent element
sub: The baseline of the element is aligned with the lower baseline of the parent element

text-top: The top edge of the virtual-area of ​​the element, aligned to the text-top of the parent element text
-bottom: The bottom edge of the virtual-area of ​​the element, aligned to the text-bottom of the parent element

top: The top edge of the virtual-area of ​​the element, aligned with the top edge of the line-box
bottom: The bottom edge of the virtual-area of ​​the element, aligned with the bottom edge of the line-box

middle: The middle line of the element (half of the content-area), aligned with half the height of the X letter of the parent element

行盒组合起来，可以形成多行，每一行的区域叫做line-box
line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边。

Actually, the actual occupied height of an element (height is automatic), and the height is calculated by line-box.

Line box: inline-box
Line box: line-box

vertical-align can also use numerical values: relative to the offset of the baseline, up is a positive number, and down is a negative number.

vertical-align can also use percentages: the offset relative to the baseline, the percentage is the height relative to its own virtual-area

Line-box is a necessary condition for carrying text content. Line boxes are not generated in the following cases:

1. An element does not have any line boxes inside it
2. The font size of an element is 0

Baselines for replaceable elements and line block boxes

Image: The baseline position is at the bottom margin of the image.

Form elements: baseline position at the bottom of the content

Line block box:

1. The last line of the line block box has a line-box, and the baseline of the last line is used as the baseline of the entire line block box.
2. If there is no line box inside the line block box, use the bottom margin as the baseline

stacking context

Stack context (stack context), it is an area, this area is created by a certain element, it specifies the order of the content in this area on the Z axis.

Elements that create a stacking context

1. html (root element)
2. A positioned element with a z-index value (not auto) set

Arrangement of elements on the z-axis in the same stacking context

Arrangement order from back to front (Z axis direction):

1. The background and border of the element that creates the stacking context
2. A stacking context with a negative stack level (z-index, stack level)
3. Regular stream non-positioned (position:static;) block boxes
4. non-positioned floating box
5. Regular flow non-positioned line boxes
6. Any positioned child elements with a z-index of auto, and stacking contexts with a z-index of 0
7. A stacking context with a positive stack level

Each stacking context is independent of other stacking contexts, and they cannot be interspersed with each other.

If they appear in the same stacking context area and have the same z-index value, the ones that appear later will overwrite the ones that appeared earlier

svg

svg: scalable vector graphics, scalable vector graphics

1. This image is written using code
2. Zoom without distortion
3. light content

how to use

svg can be embedded in the browser, or it can be a separate file

xml language, svg uses this language definition

Instructions:

1. Embed the svg code directly in the body (test1.html)
2. External reference (test2.html)
   img
   p is used as the background image of the p tag to import
   embed
   object
   iframe. It is not very easy to set up and change the size of the svg itself

Write svg code

Rectangle: rect

<rect x="10" y="10" width="100" height="100"  fill="red" stroke="#000" stroke-width="5" />
<!-- x、y坐标，原点在svg区域左上角；fill填充颜色；stroke、stroke-width边框颜色及宽度 -->

Circle: circle

<circle cx="150" cy="160" r="50" fill="pink" stroke="#000" stroke-width="5"/>
<!-- cx、cy、r坐标及半径 -->

Ellipse: ellipse

<ellipse rx="80" ry="30" cx="240" cy="240" fill="transparent" stroke="#f00" stroke-width="5"/>
<!-- rx、ry椭圆长短半径 -->

line: line

<line x1="320" x2="380" y1="360" y2="400"  stroke="#fcc" stroke-width="1"/>
<!-- 两点坐标 -->

Polyline: polyline

<polyline points="300,100,350,100,350,150,400,150,400,200" fill="red" stroke="#000" stroke-width="3"/>
    <!-- 折线 -->

Polygon: polygon

<polygon points="300,300, 400, 400, 300, 500" fill="none" stroke="#000" stroke-width="3" /> 
<!-- 多边形 -->

Path: path

<!-- <path d="M150 600 L300 600 L300 800 L150 800 Z" fill="red" style="stroke:#000; stroke-width:5" /> -->
<path d="M300 300 A150 150 0 0 0 450 150" fill="none" style="stroke:#000; stroke-width:3" />

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
    A半径1 半径2  顺时针旋转角度 小弧（0）或大弧（1） 顺时针（1）逆时针（0）

Z = closepath

example

draw tai chi diagram

data link

data url

how to write

Data link: write the data of the target file directly to the path location

Syntax: data:MIME, data

significance

advantage:

1. Reduced requests in the browser

ask

response

Reduced time wasted in requests

2. Facilitates dynamic data generation

shortcoming:

1. Increased resource size

This leads to an increase in the content of the transmission, which increases the transmission time of a single resource

2. Bad for browser caching

Browsers usually cache image files, css files, and js files.

3. Will increase the volume of the original resource to 4/3 of the original

Application scenario:

1. When the request for a single image is small in size, and the image is not suitable for making a sprite image due to various reasons, data links can be used.

2. The picture is dynamically generated by other codes, and the picture is small, and data link can be used.

base64

a way of encoding

Usually used to represent some binary data with a writable string.

References

1. [Duyi Education] Teacher Yuan Jin's html+css basic course
2. [Duyi Education] Teacher Yuan Jin's related course source code