Front-end HTML/CSS (15)

Front-end HTML/CSS (15)

Transition when not to use autothis value.

display: noneIt is not easy to use the transition immediately afterwards, because it will be treated as if there is no start state, and it will go directly to the end state.

Border collapse only exists in block elements. When the border is collapsed, the element can also be converted to inline block elements to solve the problem.

Animation

Transition is to change the value of an attribute from the value set in one rule to the value set in another rule when the state changes. This change is done over a period of time, not an instant change.

The transition needs to be triggered (such as after the hover goes up) to change, but the animation does not need it.

The similarity between CSS animations and transitions is that they both change over a period of time. The difference is that animations have greater control over the way they change.

How to repeat the animation and control the entire animation process more deeply.

Definition steps:

1. Define keyframes
2. Use animation on elements.
3. Define the duration of the entire animation.

Simple implementation

• Define keyframes

If you want to add animation effects to elements, you need to have a rule, and the rule must have a name. With these rules, you can use the name to reuse the animation.

@keyframes 规则名{
    
}

The whole rule should have one or more key frame blocks (that is, the state of one by one in the rule), and the effect of an animation composed of multiple key frame blocks.

@keyframes myTest{
    0%{
        property1:value1;
    }
    100%{
        property1:value2;
    }
}

• 0% It means what the value of the attribute of an element is expected at the beginning of the animation.
• 100% means that the attribute value of an element is expected at the end of the animation.
• 75%, what to change at 75%.

• Use animation on elements

  animation-name:value

  The value of value is the name of the previously defined rule.

• Set the duration of the animation

  As long as the animation is applied to the element, it is not enough to make the animation appear. If there is no duration, the animation can be played but ends in an instant. So it must last for a certain period of time.

  animation-duration:value

  The time is the same as s or ms

  • If 0% or 100% is not specified, the browser will automatically create 0% and 100% using the original value of the attribute to be animated.
  • If you want to specify 0% and 100%, you can also use the from and to keywords. from means 0%, and to means 100%.
  • The key frame percentages do not have to be arranged in ascending order.
  • If the properties listed in the animation key frame do not support animation, they will be ignored.

  Set up multiple animations

  format:animation-name:value

  The value of value 规则1,规则2....can use multiple rule names.

  If multiple rule names are used, you can set the duration for each animation separately, using commas to separate the values.

  When using multiple rule names, if the rule name in animation-name does not exist, others will still be executed, but the animation that does not exist will be ignored.

  Delayed playback

  animation-delay, By default, the animation attached to the element starts immediately without delay. You can use it to set the delay.

  The unit is also s or ms

  Number of iterations of the animation

  The default time value is played once.

  format:animation-iteration-count

  • 1, the default value.
  • Can write any number
  • infinite, infinite.

  Set the playback direction of the animation

  animation-direction

  • normal, the default value, each iteration of the animation is from 0% to 100%.
  • reverse, play in reverse order. From 100% to 0%
  • Alternate, the animation is played forward at odd times 1\3\5 and reverse at even times 2\4\6.
  • Alternate-reverse, the animation is played in reverse at 1\3\5 at odd times and forward at 2\4\6 at even times.

  animation-timing-function, change the internal timing

  The change sequence of and transition is the same.

  • ease, slow-"fast-"slow.
  • linear, uniform speed.
  • ease-in, slow->fast

  Note: The animation-timing-function attribute definition is the rhythm of the CSS animation executed in each key frame.

Keyframe animation

Animation-timing-function can use steps (number of steps).

The number of steps must be a positive integer, dividing the animation duration into segments corresponding to the number of steps.

When using steps, the attributes are not transitional but directly reach a certain state.

Introduction to Responsiveness

Responsive design and coding is one way. The website can be easily browsed and used on any type of device and any size screen.

The development of web design

• Fixed width design The
  website style is designed to have a fixed width, so as to fit the most common size desktops and note screens. 2000年The width of the screen designed 800像素at 2005年this point in time is , and the width of the screen designed at this point in time is 1024像素wide. Even with 800and 1024pixel width of the screen, but there are also larger screen. At this time, the design style of the webpage is to leave extra blanks on both sides for filling.

• Mobile web browsing

  20世纪90年代中期( 1990~1999), mobile phone access to the Internet does not have the ability to display the actual website, only explicit text data (using the most basic HTML format to display weather forecasts, stock reports, competition scores).

  2005年On the more advanced smart phone devices, mobile browsers can explicitly use CSS2 and JavaScript technologies "真正网页".

  07Released in the year iphone(first generation Iphone), it can take advantage of all the web技术explicit web pages at that time . But the websites at the time were all 960像素wider or wider, but the iPhone’s screen was only 320像素wider. Apple's solution is to automatically shrink web pages to fit the viewing area of ​​the screen. Then allow the user to zoom any area of ​​the page by double-clicking or pinching gestures, but only a small part of the page can be browsed at a time, which cannot produce a better user experience.

  For iphonedesigners, they are still accustomed to making fixed-width webpages and making a iphoneseparate mobile version of the website (fixed page width, adapted to a 320-pixel wide screen). If the user is using a mobile phone, they will usually be automatically redirected to the mobile website (mobile websites usually use msubdomains, such as normal websites www.baidu.comand mobile websites m.badidu.com).

  In order to better expand the market, many mobile phone manufacturers have launched corresponding smart phones to cope with Apple's Iphone. But these new smart phones do not have the same size. Some are 320像素wider and some are 320像素narrower, so 320像素the width of the mobile site does not fit those screens well.

  In 2010, Apple announced iPadthat the mobile version of the website was too small to make full use of the iPadlarger screen space, and the fixed-width desktop website iPadseemed too large for viewing in portrait mode .

  In essence, the above question is: without creating multiple separate sites, how to make a website display in a single column on a narrow screen and display in multiple columns on a large screen. How to request the browser to change the layout of the web page according to the characteristics of the device that browses the website. That's why there is a responsive layout.

Responsive design process

• Think about website goals

  A website is a tool used to solve problems in reality. It should be clear from the beginning what the goal of the website or project is, but this goal is obtained from the client or the project manager.

  In the process of creating a website, a lot of creative decisions must be made, from the content to be included in the website, to the placement of these content, and the path for users to enter the website. If the goal of the website is clarified, better decisions will be made during the design process.

• The content of the website

  The user visits the website for content, not for the page or the development technology used. He doesn't care whether the website is responsive or the screen width, he only cares whether the device he uses can easily get relevant content.

  So for a responsive website, the first thing to consider is the content to ensure that the content has a good display effect on the small screen (that is, put the content on the small screen first, because the existing content in the fixed-width website , It will be difficult to squeeze it into a smaller screen).

  The so-called content includes not only text, but also other forms of information, such as images, videos, and audio. What you should think about when considering content is what the web page achieves and what you want them to do.

  Two rules of content planning:

1. When determining what content is on the website, you can make a list of content.

2. Figure out what content is needed to consider where they are placed, and how to write specific content.

   1. 倒金字塔Ways can be used to ensure that important series appear first, followed by secondary details that users may or may not see.
      

   2. Hierarchical headings, if the content of the page exceeds two or three paragraphs, divide it into small pieces. This allows users to more easily understand the page structure and better recognize the type of page content.

A good title can divide the content of the webpage into multiple parts according to different key points.

Linear design: Read all the content on the webpage from beginning to end. For small mobile devices, all content is basically displayed in a single column, so users always read the content in a linear order.

Content component

We have to decide which content components will appear on the page, such as website logo, search box, main navigation bar, text, etc.

In the design process at this stage, these components need to be considered as separate content blocks, so that their positions can be moved on the page when the prototype is created.

When most of the content that needs to appear on the new website is organized, a simplified high-level outline of the content area is first created and reflected in the main navigation of the website.

Draw sketches, wireframes

You can draw small sketches with only a few details, and quickly try a variety of ideas.

The sketching starts by thinking about how the website will be displayed on screens of various sizes (from small mobile phones to large screens). At this stage, only simple graphics and lines are needed, even if the lines are skewed, it does not matter.

Why go from a small mobile phone to a big screen: Imagine that you live in a small house of 16 square meters, and then you bought a house of 200 square meters. At this time, the furniture you have in the 16-square-meter small house can easily be placed in the 200-square-meter house. But the reverse is not possible.

Draw a prototype

The prototype drawing is close to the design drawing of the final product, that is, high fidelity. But it is just a model.

In the high-fidelity prototype stage, you can add colors, text layout styles and some content about the website's brand.

Rapid website prototyping tools:http://axure.intertechnology.cn/

If your page needs to support several different resolutions at the same time. Then the order of writing pages is from low resolution to high resolution.

Media inquiries

In order to solve the problem that a set of websites display different effects on different screens, there is a media query.

Because the emergence of the media query mechanism can restrict style sheets, only apply style sheets to specific media and media that meet specified conditions.

media type

• all, all media capable of presenting content.
• print, print preview of printer or document.
• screen, the screen media capable of presenting documents.

Basic media query

• Method 1: Use the media attribute directly in the HTML tag for media query.

<link rel="stylesheet" href="./screen.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="./print.css" type="text/css" media="print"/>
<style media='print'>
    h1 {
     
     
        color: red;
    }
</style>
<style media='screen'>
    h1 {
     
     
        color: blue;
    }
</style>

The value of the media attribute can have one or more than one value.

• Method 2: Use the @media block in style. This syntax can be used to define styles for multiple media in the same style sheet.

Query according to the characteristics of the media

We can not only use the media type to query, but also apply styles based on the characteristics of the media, such as display size, color depth, and so on.

You can use and to match multiple characteristics of the media.

<link href="print.css" type="text/css" rel="stylesheet" media="print and (color),screen and (color)"/>

The above print.csscode is used to match (the printing device is in color) or (the display device is in color) as long as it can match any of the above codes.

Every data such as screen and (color) is called a media descriptor. Each media descriptor consists of a media type and one or more media characteristics, and the media characteristics should be placed in parentheses.

<link href="xxx.css" type="text/css" rel="stylesheet" media="screen and (min-width:600px) and (max-width:800px)"/>

This means that xxx.css will only be introduced when the screen settings are matched and its minimum width is 600px, and the maximum width is 800px.

<link href="xxx.css" type="text/css" rel="stylesheet" media="(min-width:600px) and (max-width:800px)"/>This way of writing omits the media type, and the default is all after omitting it.<link href="xxx.css" type="text/css" rel="stylesheet" media="all and (min-width:600px) and (max-width:800px)"/>

The overall format:media=媒体类型 逻辑关键字 (媒体特性)

Logical keywords

• and, Used to chain two or more media features at once, and each feature must match.

• not, Reverse, reverse the result of the entire query, can only be written at the beginning of the media query.media="not screen and (min-width:600px) and (max-width:800px)"

• ,, orKeywords cannot be used in media queries , commas play the role of or

  media="print , not screen and (min-width:600px) and (max-width:800px)"

Media features in media queries

• min-width: The width of the viewport is greater than the specified width (minimum width, only if it is greater than or equal to).

• max-width: The width of the viewport is less than the specified width (the maximum width is less than or equal to).

• orientation: Specify whether the device is in a horizontal or vertical screen. It is judged by height and width. If the height is greater than or equal to width, it returns to the portrait state (portrait), and if the width is greater than or equal to the height, it returns to the landscape state (landscape).

• color, Whether to support color.

@media all and (color){/*能够显示颜色就应用这个样式表*/
    
}

Commonly used media queries in the web

/*超小屏幕设备，屏幕小于768px的设备*/
@media (max-width:768px){
    
}
/*小屏幕设备， 大于等于768并且小于等于992px的设备*/
@media (min-width:768px) and (max-width:992px){
    
}
/*中等屏幕设备，大于等于992px，小于等于1200的设备*/
@media (min-width:992px) and (max-width:1200px){
    	
}
/*大屏幕设备，大于等于1200的设备*/
@media (min-width:1200px){
    
}

The 768, 992, and 1200 set here are the set breakpoints.

Set breakpoint: A breakpoint is a point set in a media query, and it can use media queries to change the layout design at the breakpoint.

The design range is the screen size range covered between two breakpoints. There can be different design styles between each range.

• xs, super small screen
• sm, small screen
• md, medium screen
• lg, big screen

Grid layout: It comes from a flat design, which means it is composed of multiple columns of the same width, with the same spacing between the columns, and all content on the page is based on these columns.

The most commonly used 12-column grid layout is because of its flexibility 2, 3, 4, 6

Flexible box layout

Also called: flexible layout, flexible box, flex layout, flexible layout, flexible box.

It is a simple and powerful layout method. The flexible box can specify the space allocation method, the alignment of the content, and the visual order of the elements (and is not limited by the order of the source code). The flexible box is most suitable for arranging content in one direction.

The biggest feature makes the element ready to adapt to different display devices with different screen sizes.

Flexible layout is the relationship between parent elements and child elements.

Parent element: flexible space or flexible container.

Child element: flex item or flex element.

Flexible container

There are many properties of elastic containers, and the ones that are frequently used are also set for elastic containers.

Declare on the element display:flex(you get a block-level element), which activates the flexible box layout. This element becomes an elastic container, and the elastic container is responsible for the built-in sub-elements of the space, and controls the layout of the sub-elements.

When the parent element is set, the display: flexchild elements are arranged horizontally. If the width of the parent element is less than the total width of 6 boxes, it will automatically stretch.

Elastic element

The child elements of the flex container are called flex elements (only the direct child elements are counted as the content in the flex box layout, and the descendant elements are not affected.)

Elastic elements include child elements and generated content in the elastic container

In the elastic container, each elastic element is arranged on the main axis. The main axis can be horizontal or vertical.

• Main axis: The content flows along this axis, indicating the direction of flow of elastic elements. The default main axis is horizontal, starting on the left and ending on the right.
• Vertical axis: (cross axis, side axis, auxiliary axis), the elastic elements are stacked along this axis, and the direction in which new elastic element rows are placed (the vertical axis is always perpendicular to the main axis). By default, the vertical axis starts from the top and ends at the bottom .

Set the spindle direction

flex-directionSpecify how to place the elastic elements in the elastic container and define the direction of the main axis.

• row, The starting edge of the main axis is on the left side of the elastic container, and the end is on the right side of the elastic container. (Defaults)
• row-reverse, The starting edge of the main axis is on the right side of the elastic container, and the end is on the left side of the elastic container. (Similar to float: right)
• column, The starting side of the main axis is on the upper side of the elastic container, and the ending side is on the lower side. The vertical axis becomes horizontal, starting on the left and ending on the right.
• column-reverse, The starting edge of the main axis is below the elastic container, and the ending edge is above the elastic container.

Wrap

When the elastic element cannot be placed on the main axis of the elastic container, the elastic element will not wrap by default.

You can use flex-wrap to control.

• nowrap, No line break

• wrap, To wrap along the vertical axis.

When the height is not set: When the
height is set: (The extra content is divided evenly after the line break)

How the elastic elements are distributed on the main axis

By default, the blank space left by all the elastic elements placed in the elastic container always appears in the direction of the end of the main axis and the end of the vertical axis.

You can also use justify-contentattributes to set how to distribute the elastic elements in each row on the main axis of the elastic container (how do you divide the extra space).

• flex-start,Defaults. Close to the starting edge of the spindle.

• flex-end, close to the end of the spindle.

• center, the elastic element as a whole is displayed in the center of the main axis.

• space-between, Put the first elastic element of each row on the starting edge of the main axis, the last elastic element of each row on the end edge of the main axis, and then put an equal amount of blank space between each remaining pair of adjacent elastic elements .

• space-around, Divide the remaining space by the number of elastic elements in the row, and then get the space that each elastic element should get, and then divide this space by two, one for each on the left and right.

• space-evenly, Calculate the number of elastic elements, and add +1 on this basis to divide the extra space into so many pieces, place one space every other elastic element in a row, and place the last one after the last elastic element.

  For example, the width is 810, a total of 6 divs, each 100px, the final calculation is(810-600)/7 = 30

  Even if a line cannot fit, the justify-content layout method will be executed on the newly opened line.

The arrangement of flex-end is equivalent to the arrangement of text-align: right.

not, no!

and，与 ， &&

or，或 ，||