编程知识 cdmana.com

Basic knowledge of HTML and CSS in web front end

HTML(HyperText Markup Language) It's hypertext markup Language ." Hypertext " It means that the page can contain non text elements , Such as : picture 、 link 、 Music and so on .

​ It's a language for creating web files , By means of a tokenized instruction (Tag), Image 、 voice 、 picture 、 Text and other links are displayed . This markup language is the main language of web pages on the Internet .

​ HTML Web files can use Notepad 、 Writing board 、HBuilder、Sublime Wait for editing tools to write , With .htm or .html Save for file suffix . take HTML Web page file is opened and displayed by browser , If the test is OK, it can be put on the server (Server) On , Release information to the public .

Basic grammar

label

​ HTML The mark is made by "<“ and ”>" The enclosed instruction mark , Used to send marking instructions to the browser .

​ It is mainly divided into : Single label instruction 、 Double label instruction ( from "< Start mark >“+ Content +”</ End mark >" constitute ).

​ HTML Language uses the method of marking pairs to write documents , It's simple and convenient . It usually uses "< Logo name > Content </ Logo name >" To indicate the beginning and end of a sign , So in HTML In the document, such mark pairs must be used in pairs .

​ For the sake of understanding , take HTML Markup languages are roughly divided into : Basic markers 、 Format mark 、 Text mark 、 Image markers 、 Table Tags 、 Link tags 、 Form tags, frame tags, etc .

Single label

Single label , Do not set property values .

Such as :

<br/>、<hr/> 
Single tag attribute

Single label ( It's also called the empty element ), Setting property values . Such as :

<hr width="800" /> 
Double label

Double label , Do not set property values . Such as :

<title>…</title> 
Double label attribute

Double label , Setting property values . Such as :

<body bgcolor="red">…</body>
<font size="7">…</font> 
The overall structure

​ HTML The content of is made up of one-to-one tags , Labels can't be confused , The page has the overall structure and rules of the page , There is a need for proper nesting between labels and labels .

​ Usually a HTML The web file contains 3 Parts of : Mark head area …、 Content area … And the web area ….

<html>
<head></head>
<body></body>
</html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML The basic structure of the document </title>
        <script></script>
        <link rel="stylesheet" type="text/css" href=""/>
    </head>
    <body>
    </body>
</html> 
html

​ The sign is used for HTML The front of the document , Used to identify HTML The beginning of the document . And the sign is on HTML The last side of the document , Used to identify HTML End of document , The two signs must be used together .

head

​ And make up HTML The beginning of the document . The content between the and logo pairs is not displayed in the browser's box , The two signs must be used together .

​ You can use between this pair of symbols 、、、 Such as tag .

​ : Used to provide information about documents , The starting property is :charset=“utf8”. It tells the browser what encoding to use for the page , Generally speaking, we use utf8. Of course , When the file is saved, it's also utf8, And the browser also sets up utf8 It can display Chinese correctly .

​ : To introduce css file

title

​ Be careful :

body

​ In general, the content displayed on most browsers , All put in body in . But it doesn't rule out that other labels can't be used body, such as frameset Frame tags .

​ And is HTML The main body of the document , Between this pair of symbols can contain

、、


=


So many signs . The text they define 、 The image will be displayed in the browser's box .

Common properties

attribute

value

describe

bgcolor

xxxxxx: Hexadecimal number ,00-ff

colorname:Red、Green…
rgb(x,x,x):red、green、blue,x:0-255

Specify the background color of the document , You can replace it with a style later

text

rgb(x,x,x) #xxxxxx colorname

Specify the color of all text in the document , You can replace it with a style later

DOCTYPE

​ Document Type HyperText Mark-up Language, Types of hypertext markup languages in documents , Can tell the browser how to parse the document .

​ Due to the use of the scene or version of the replacement ,HTML The standards used are different , So the browser needs to parse according to different standards HTML Text content , This requires the browser to be informed of my current HTML The page is written in that way . There is no such statement , It will be you HTML The beginning of the nightmare .

Commonly used labels

​ HTML The page is made up of tags , Different tag browsers render different styles and contents , We need to remember the common tags . It can be roughly divided into the following categories : title 、 Level 、 The paragraph 、 Line break 、 picture 、 form 、 Hyperlinks 、 list 、 Forms 、 The drop-down list 、div and span etc. .

Titles and horizontal lines
title

-

The tag defines the title , The titles decrease in order , because h Elements have exact semantics , So be careful to choose the appropriate tag level to structure the document . Please do not use the title label to change the font size in the same line . contrary , We should use cascading style sheet definitions to achieve beautiful display effect .

​ Such labels don't make mistakes , But it doesn't have the Title Effect .

​ h1 Tags can be obtained for search engines , It is easy to retrieve when the page is searched , But it's best to have only one page h1 label , Otherwise, you may enter the blacklist of search engines .

<h1></h1> 
Level


Tag in HTML Create a horizontal line in the page (horizontal rule) You can visually separate the document into parts . stay HTML in ,


The tag has no end tag .

<hr /> 

Common properties

attribute

value

describe

align

CenterLeftright

Regulations hr Alignment of elements , You can replace it with a style later

size

pixels

Regulations hr Height of element ( The thickness of the ), You can replace it with a style

width

Pixels%

Regulations hr Width of element , You can replace it with a style

Paragraphs and line breaks
The paragraph

Label definition paragraph .p The element automatically creates some white space before and after it . The browser will automatically add these spaces , You can also specify .

​ understand : There will be a big gap between paragraphs in Chinese textbooks .

<p></p> 

Common properties

attribute

value

describe

align

left、right、center、justify

Specifies the alignment of text in a paragraph , You can replace it with a style later

Line break

​ br The label is a newline symbol ,
The label is empty ( Means it doesn't have an end tag , So it's wrong :
).

​ Be careful :
Tags simply start a new line , And when the browser encounters

When labeling , Usually, some vertical space is inserted between adjacent paragraphs . Please use
To enter a blank line , Not a paragraph .

<br/> 
list
Unordered list
 from <ul></ul> and <li></li> Label composition . 
<ul>
    <li></li>
    <li></li>
    ......
</ul>

<ul>
    <li> study hard </li>
    <li> Day day up </li>
</ul> 

Common properties

attribute

value

describe

type

disc
circle
square

Specifies the type of bullet in the list . You can use styles instead of .
dise: Solid round ( Default )
circle: The hollow circle
square: square

Ordered list

​ from

and

Label composition .

<ol>
    <li></li>
    <li></li>
    ......
</ol>

<ol>
    <li> study hard </li>
    <li> Day day up </li>
</ol> 

Common properties

attribute

value

describe

type

1
a
A
i
I

Specifies the type of tag used in the list .
1: Express the serial number in numerical form ( Default )
a: Use lowercase letters for serial numbers
A: Use capital letters to indicate serial numbers
i: Use lowercase Roman numerals for serial numbers
I( Capitalization i): Use capital Roman numerals for serial numbers

div and span
div

Is a block level element , Usually with css In combination with , For layout .

Tags can separate documents into separate 、 Different parts . It can be used as a rigorous organizing tool , And it doesn't use any format associated with it .

Is a block level element . This means that its content automatically starts a new line . actually , Newline is

Inherent unique format representation . Can pass

Of class or id Apply extra styles .

<div>content</div> 

Common properties

attribute

value

describe

align

left、right、center

Regulations div The alignment of the content in the element , You can replace it with a style later

span

​ Tags are used to combine inline elements in a document ,span There is no fixed format to express . When you apply styles to it , It's going to make a visual change .

<span>content</span> 
Format label
font

​ Specify the font of the text 、 Font size 、 The font color

pre

​ Define pre formatted text . Surrounded by pre The text in the element usually retains spaces and line breaks . And the text will also appear as an equal width font

Text label
**<b>**( Thick text )、**<i>**( Italic text )、**<u>**( Underline text )、 

< del >( Underlined text )、( Subscript text )、( Superscript text )

a label

​ Tags define hyperlinks , Used to link from one page to another .

​ The most important attribute of an element is href attribute , It indicates the target location to link to , At the same time, there is no href attribute a There is no difference between the content in the tag and the normal text , You lose the function of hyperlinks .

​ If you want to jump to the current page , that href The value of is #. The linked page is usually displayed in the current browser window , Unless you set another goal (target attribute ).

<a href="http://www.baidu.com"> Baidu </a> 

Common properties

attribute

value

describe

href

URL

Connect the position you want to jump to , It could be another or the current page .

target

_blank
_parent
self
top
Framename As an anchor a Labeled name value

Specify where to open linked documents .
_blank: Open new page display page ;
_self: The current page shows jump to page , The default value is .
_top: Used to have frameset Layout page , Want to cover the entire page display .
Framename: here framename Different from the value above , I think frame What kind of name is used , This value indicates that the page to be connected will be displayed in the frame with the corresponding name after it jumps .

The implementation of anchor point

​ utilize a Labeled name attribute :

<a name="top"></a> 

​ Generally labeled id attribute :div id=""、a id="" etc. :

<div id="top"></div>、<a id="top"></a> 

​ Anchor positioning

<a href="#top"> Back to the first </a> 
picture

​ img Element embeds an image into a web page .

​ Be careful : Technically speaking , Tags don't insert images into web pages , It's about linking images from a web page . The label creates the space occupied by the referenced image .

<img src="" alt="" > 

Must attribute

attribute

value

describe

alt

text

Specify alternate text for images , Generally, the space occupying text cannot be displayed normally in the picture .

src

URL

Specify the URL.

Common properties

attribute

value

describe

align

top、bottom、middle、left、right

Specifies how images are arranged according to the surrounding text

border

pixels

Define the border around the image

height

pixels、%

Define the height of the image .

width

pixels、%

Define the width of the image .

title

Text

The text displayed when the mouse is over the picture

form

Tag definition HTML form .

​ Tags define the rows of the table .tr Element contains one or more th or td Elements

​ Tag definition HTML Standard cells in the table .

​ Define the header cells in the table .th The text inside the element is usually rendered as centered bold text , and td The text within the element is usually left aligned plain text .

​ ordinary HTML Form by table Elements and one or more tr、th、 or td Element composition .

​ understand :table It's like the outline of a table ,tr For the line ,td For a single cell ,th For cells with header effect ,th At the same time, the content in has a bold effect .

Common properties

attribute

value

describe

align

right、center、left

Table alignment

border

px

Specify the width of the table border

width

% 、px

Specify the width of the table

tr Common properties

attribute

value

describe

align

right、left、center

Define the content alignment of table rows .

bgcolor

rgb(x,x,x)、#xxxxxx、colorname

Specify the background color of the table rows , You can replace it with a style later

valign

top、middle、bottom

Specifies the vertical alignment of the contents of the table rows , You can replace it with a style later

​ Of colspan and rowspan Specify the number of columns and rows that the cell spans

Forms
form

​ Tags are used to create... For user input HTML Forms .

​ Forms can contain input Elements , For example, text field 、 Check box 、 Radio buttons 、 Submit button, etc . You can also include textarea Equal elements .

​ Forms are used to transfer data to the server .form Elements are block level elements , Before and after it will be folded .

Common properties

attribute

value

describe

action

URL

Specify where to send form data when the form is submitted

method

get、post

Specified for sending form-data Of HTTP Method

name

Form_name

Specify the name of the form

target

blank _self parent _top framename

Specify where to open action URL

method: Form submission method :get、post

​ get: Default , Active access , The data is in url On , The capacity of data is limited , Poor safety , With cache

​ post: The data is placed in the request entity , There is no theoretical limit to the amount of data , A relatively safe , There is no cache

input

​ Tags are used to collect user information .

​ According to type Property value , There are many forms of input fields . The input field can be a text field 、 Check box 、 Radio button 、 Buttons, etc .

Common properties

attribute

value

describe

alt

text

Define alternative text for image input .

checked

checked

It is stipulated that input The element should be selected when it is first loaded .

disabled

disabled

When input This element is disabled when the element is loaded .

readonly

readonly

Specifies that the input field is read-only .

maxlength

number

Specifies the maximum length of characters in the input field .

value

value

Regulations input The value of the element .

type

button
checkbox
file
hidden
image
password
radio
reset
submit
text

Regulations input Type of element . Button check box file hidden field image shape button password radio box reset button submit button text

If you upload a file , The request method is post, And add an attribute to the form :enctype="multipart/form-data"

Be careful :

​ 1. No, name Properties of properties cannot be submitted to the background !!!!

​ 2. Radio Radio button to name The same is a group .

​ 3. Checkbox Check the button to name The same is a group .

textarea

​ This tag defines a multiline text input control . The text area can hold an unlimited number of text , Can pass cols and rows Attribute to define textarea The size of the .cols Specifies the visible width within the text area .rows Specifies the number of visible lines in the text area .

<textarea>content</textarea> 
label

​ The label is input Element definition annotation ( Mark ).

​ label Elements don't have any special effects .

​ label Labeled for Attributes should be associated with the id Same attribute , Click here label The tag will automatically focus the element

<label for="username"> user name :</label>
<input type="text" id="username" name="username"/> 
button
<button> Button </button> 

Common properties

attribute

value

describe

disabled

disabled

Disable the button .

type

button、submit、reset

Specify the type of button .

value

text

Specify the initial value of the button .

name

button_name

Specify the name of the button .

select

​ Used to define a drop-down list

<select name="color" >
    <option value="red"> Red </option>
    <option value="green"> green </option>
    <option value="blue"> Blue </option>
</select> 

select Common properties

attribute

value

describe

disabled

disabled

Disable the drop-down box .

multiple

multiple

Specifies that multiple options can be selected .

name

name

Specify the name of the drop-down list .

size

number

Specifies the number of visible options in the drop-down list .

option Common properties

attribute

value

describe

disabled

disabled

Disable the drop-down box .

selected

selected

Specify options ( When it first appears in the list ) The performance is selected .

value

text

Define the option values sent to the server .

Common character entity

​ stay HTML in , Some characters are reserved .

​ stay HTML The less than sign cannot be used in (<) And the greater (>), This is because browsers mistakenly think of them as tags .

​ If you want to display reserved characters correctly , We have to HTML Character entities are used in the source code (character entities).

​ Entity names are case sensitive !

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-ZjI7JwQh-1608793191431)(/1579341520148.png)]

Classification of labels

​ HTML There are three different types of tag elements in : Blocky element , Inline elements , Blocky elements in the line .

Block-level elements

​ Elements start with a new line , And then there's a new line of elements ; Height of element 、 Width 、 Row height and top and bottom margins can be set ; The element width is not set , It's its own parent container 100%( Same width as parent element ), Unless a width is set .

Inline elements

​ On the same line as other elements ; Height of element 、 Width and top and bottom margins cannot be set ; The width of an element is the width of the text or picture it contains , It can't be changed .

Blocky elements in the line

​ On the same line as other elements ; Height of element 、 Width 、 Row height and top and bottom margins can be set .

CSS

​ CSS( English full name :Cascading Style Sheets) Cascading style sheets , It's a form of expression HTML( An application of Standard General Markup Language ) or XML( A subset of Standard General Markup Language ) Etc. File style computer language .

​ CSS The latest version is CSS3, It is a style design language that can truly separate web page performance and content . Relative to tradition HTML In terms of performance ,CSS It can accurately control the position of the objects in the web page at the pixel level , Supports almost all font size styles , Ability to edit web object and model styles , And be able to conduct preliminary interaction design , It is the best performance design language based on text presentation .CSS It can be based on the understanding ability of different users , Simplify or optimize writing , For all kinds of people , It is easy to read .

CSS It's used to beautify web pages , Without a web page CSS useless , therefore CSS Need to rely on HTML Show its function .

​ [ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-ZjxcgngL-1608793191436)(/ picture 1.png)]

CSS Basic use of

CSS Basic grammar

​ CSS A style consists of a selector and one or more style statements separated by semicolons . The style of each Declaration contains a CSS Properties and attribute values . [ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-UTWoBo4l-1608793191440)(/QQ Screenshot 20200205160701.png)]

 Selector name  {
     attribute  :  Property value ;
    ......
} 
div {
    background-color : red;
} 

Be careful :

  1. css The statement should be made with a semicolon ; end , Statement to {} Cover up
  2. It is recommended to write an attribute on a line
  3. If the value is several words , Then quote the value , Such as font-family: “agency fb”;
notes

Multiline comment :

/*  The content here is the annotation  */ 
CSS Use

1. Inline

​ In line styles define styles in specific html Elemental style Properties of the . It's written in line CSS High coupling degree , Only for the current element , It is often used to set the style of an element .

<p style="color:red;font-size:50px;"> This is a text </p> 

Use... In the current element style How properties are declared .

​ style Is the in line style property ;

​ color It's a color attribute ;red Is the color attribute value ;

​ font-size It's the font size attribute ;50px Is the font size attribute value

2. The embedded

​ Embedded through html Page content opens up a section of css Code area of , It is usually done in < head> Nested in tags

<style type="text/css">p {color: blue;font-size: 40px;}</style> 

3. Introduce an external style file

​ In actual development , Most of the time, we use the introduction of external style files , This form can make html Clearer page , And it can achieve better reuse effect .

style.css

p {color: green;font-size: 30px;} 

test.html

<link rel="stylesheet" type="text/css" href="style.css"> 

​ rel:rel Property specifies the relationship between the current document and the linked document .

​ stylesheet: External style sheets for documents .

​ A lot of times , a large number of HTML The page uses the same CSS. So you can put these CSS Styles are saved in a separate .css In file , And then introduce it through elements .

Be careful : When there are multiple styles , Remember the premise rule , The more accurate, the more priority .

CSS Selectors

​ stay CSS in , Selector is a mode , Used to select elements to add styles to .

​ CSS There are many selectors , Master the commonly used ones ;

Basic selector
Universal selector

Select all *

* {
    ......
} 
* {
    color: orange;
} 
Element selector

Select the specified label

 The element name  {
    ......
} 
p {
    color: red;
    font-size: 20px;
} 
ID Selectors

Select set to specify id Element of attribute value #

#id Property value  {
    ......
} 
#p1 {
    font-weight: bold;
} 
Class selectors

Select set to specify class Element of attribute value .

.class Property value  {
    ......
} 
.hidden {
    display: none;
} 
Group selector

​ When several element style attributes are the same , You can call a declaration together , The elements are separated by commas

 Selectors 1, Selectors 2,... {
    ......
} 
h2 , #pre1 {
    color: orange;
    font-style: italic;
} 

​ CSS The priority of the style , It's based on the accuracy of the selector / It's a matter of weight , Common weights are as follows , The greater the weight , The higher the priority

​ Element selector :1

​ Class selectors :10

​ id Selectors :100

​ inline style :1000

Combination selector

​ CSS The combination selector illustrates the direct relationship between the two selectors . CSS The combination selector includes various combinations of simple selectors .

​ stay CSS There are four ways to combine : Descendant picker ( Space off ), Child Selector ( Separated by a greater than sign ), Adjacent Sibling Selectors ( Separated by a plus sign ), Common brother selector ( Separated by wavy lines ).

Descendant selector ( descendent selector )

​ Used to select the descendant element under the specified label element , Space off

 Selectors 1  Selectors 2 {
    ......
} 
.food  li {
    border: 1px solid red;
} 
<h1> food </h1>
<ul class="food">
    <li> Fruits 
        <ul>
            <li> Banana </li>
            <li> Apple </li>
            <li> pear </li>
        </ul>
    </li>
    <li> vegetables 
        <ul>
            <li> Chinese cabbage </li>
            <li> rapeseed </li>
            <li> Cabbage </li>
        </ul>
    </li>
</ul> 
Child Selector

​ Used to select all the first generation child elements of the specified tag element , Separated by a greater than sign

 Selectors 1 +  Selectors 2 {
    ......
} 
#d + div {
    border: 1px solid red;
} 
html Same code as above  
Adjacent Sibling Selectors

​ You can choose the element immediately after another element , And they have the same parent element . Separated by a plus sign

 Selectors 1 +  Selectors 2 {
    ......
} 
#d + div {
    border: 1px solid red;
} 
<div id="d">
     Adjacent Sibling Selectors 1
    <ul>
        <li> Happy twist </li>
        <li> Jia Ling </li>
        <li> Song Xiaobao </li>
    </ul>
</div>
<div>
     Adjacent Sibling Selectors 2
</div> 
Common brother selector

​ Select all elements immediately after another element , And they have the same parent element , Separated by wavy lines

 Selectors 1 ~  Selectors 2 {
    ......
} 
li ~ li {
    background-color : yellow;
} 
<div>
     Common brother selector 1
    <ul>
        <li> Happy twist </li>
        <li> Jia Ling </li>
        <li> Song Xiaobao </li>
        <li> Shen Tang </li>
        <li> Wang Ning </li>
    </ul>
</div> 

CSS Common property settings

background

​ CSS Background properties are used to define HTML The background effect of the element

background-color

​ Set the background color of the element

body {
    background-color:#ff0000;
} 
background-image

​ Set the background image of the element , By default , The background image is tiled and displayed repeatedly , To cover the entire element entity .

body {
    background-image:url('paper.gif');
} 
background-repeat

​ Set whether and how to repeat the background image

body {
    background-image: url(img/logo.jpg);    
    background-repeat: no-repeat;
} 

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-5sQG6dLs-1608793191444)(/QQ Screenshot 20200205171029.png)]

Text
color
body {
    color:blue;
} 
h1 {
    color:#00ff00;
} 
h2 {
    color:rgb(255,0,0);
} 
text-align

​ Set text alignment ,center( In the middle ),left( Align left ),right( Right alignment )

body {
    text-align:center;
}    
h1 {
    text-align:right;
} 
h2 {
    text-align:right;
} 
text-decoration

​ Specifies the modifiers that are added to the text , Property value :none、underline、overline、line-through

1)underline

​ Underline the text , And HTML Of u The elements are the same .

2)overline

​ Add a dash to the text .

3)line-through

​ Add middle dash to text , And HTML Medium s and strike The elements are the same .

4)none

​ Turn off all decorations originally applied to the element .

h3 {
    text-decoration:underline;
} 
text-indent

​ Set the first line of text to indent

p.ident2 {
    text-indent: 2em;
} 

​ em A relative value , For example, the text size of the page is 17px, be 2em for 17px*2

typeface
font-family

​ Text Fonts , This property sets the font of the text .

​ font-family Attribute should set several font names as one of " backup " Mechanism , If the browser doesn't support the first font , He will try the next font , So try to put the uncommon fonts at the front , Put the most common font at the end of , As a substitute .

Be careful :

​ 1) Only if the font name contains spaces or #、$ When a symbol like this ( Such as New York), It needs to be in font-family Quote the declaration :

body {
    font-family: "arial black";
} 

​ 2) Multiple font families are indicated by a comma

/*  The font at the front is effective  */
p{
   font-family:  Microsoft YaHei , In black ,"agency fb";
} 
font-size

​ Text size

body {
    font-size: 50px;  /* font size 50px*/
}
#span1 {
    font-size: 25px;  /* font size 25px*/
} 
font-style

​ The font style , This attribute is most commonly used to specify italicized text . Property value :normal、italic、oblique

​ 1)normal: Text is displayed normally ;

​ 2)italic: Text in italics ;

​ 3)oblique: Text tilt ,oblique Is to force the text to tilt .

​ explain : In general , The font is bold 、 Italics 、 Underline 、 Delete line and many other properties , But not all fonts have these properties , Some of the less commonly used fonts may only have normal fonts , If you use italic Attributes have no effect , So we need to oblique Attribute force skew .

font-weight

​ Bold font , This property sets the thickness of the text .

​ bold: You can set the text to bold .

​ 100 ~ 900: The font is assigned 9 Grade bold . If a font has these bold levels built in , Then these numbers map directly to predefined levels .

​ 100 Corresponding to the thinnest font deformation ;

​ 900 Corresponding to the coarsest font deformation ;

​ 400 Equivalent to normal;

​ 700 Equivalent to bold.

Alignment mode
text-align

​ Specifies the horizontal alignment of the text in the element . The property values are as follows :[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-TXwrW9Im-1608793191446)(/QQ%E6%88%AA%E5%9B%BE20200205180655.png)]

Be careful :

​ value justify You can align both ends of the text . In justified text , The left and right ends of the text line are placed on the inner boundary of the parent element . then , Adjust the spacing between words and letters , Make the lines exactly equal in length . It doesn't work on the last line .

display attribute

​ display Property specifies the type of box the element should generate . This attribute is used to define the display box type generated by the element when the layout is created .[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-xGEB8KJH-1608793191448)(/QQ%E6%88%AA%E5%9B%BE20200205181007.png)]

float

​ float The property values for are none、left、right.

1.  Only horizontal float , No vertical float .

2.  The display Property changed to block.

3.  The next element of a floating element surrounds the floating element ( Typical use is text around pictures )

4.  The previous element of a floating element is not affected ( If you want two blocky elements to display side by side , You must have both blocky elements applied float). 
Box model

​ border、padding、margin Three attributes make up the box model . [ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-gBCwXoLq-1608793191450)(/QQ Screenshot 20200205174125.png)]

border

​ Set all border properties .

​ 1) The width of the border can be set at the same time 、 style 、 Color

table, th, td { 
    border: 1px solid black; 
}
table { 
    width:100%; height:50px; 
} 

​ 2) Use border-width、border-style、border-color Set separately

table,td {
   border-width: 1px;
   border-style: dotted;
   border-color: green;
} 

​ 3)border-style Properties of

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-hjrQg4ym-1608793191452)(/QQ Screenshot 20200205174509.png)]

​ 4)border-collapse

​ Sets whether to collapse the table border to a single border .

​ Property value :separate( Default , Cell borders are independent )、collapse( Cell border merge )

table { 
    border-collapse : collapse; 
} 
padding

​ Sets the width of all inner margins of an element , Or set the width of the inner margin on each side .

​ If you control the inner margin of the text to the border in the table content , Use td and th The filling properties of the element :

td { 
    padding:15px;
} 

​ Set the inner margin of each side separately :padding-top、padding-left、padding-bottom、padding-right

​ By default, it is set in the order of top, right, bottom and left

td .test1 {
    padding: 1.5cm
}        
td .test2 {
    padding: 0.5cm 2.5cm
} 
<table border="1">
    <tr>
        <td class="test1">
             Each edge of this table cell has an equal inner margin .
        </td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <td class="test2">
         The top and bottom margins of this table cell are 0.5cm, The left and right inner margins are  2.5cm.
        </td>
    </tr>
</table> 

​ Be careful : adopt padding Property sets the inner margin of an element , It will deform the elements . If you don't want to affect the format effect , It can be used margin Attribute to set the element margin .

margin

​ Set the width of all outer margins of an element , Or set the width of the outer margin on each side .

p.margin {
    margin: 2px 4px 3px 4px;
} 

​ Set the outer margin of each side separately :margin-top、margin-left、margin-bottom、margin-right

p.margin{
    margin-top:100px; 
    margin-bottom:100px;
    margin-right:50px; 
    margin-left:50px; 
} 
*{
    margin: auto auto;
} 
*{
    margin: 100px auto;
} 

explain :

​ auto: Automatically , Can be understood as the meaning of the middle . Browsers automatically calculate margins .

​ margin: auto auto: first auto Indicates that the upper and lower outer margins are automatically calculated , the second auto Represents the automatic calculation of left and right margins .

​ But the top and bottom margins don't work when they're automatically calculated , And the left and right margins will work , It is in the middle , The effect is as follows : [ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-bBvubebw-1608793191454)(/ picture 3.png)]

​ To set it to center up, down, left, right , Then we should calculate the outer margin of the upper and lower set by ourselves , The effect is as follows : [ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-spby6Ywv-1608793191455)(/ picture 4.png)]

​ Be careful : At this time to use margin-top Don't take effect . understand

版权声明
本文为[Xu Yuxi]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224152603253S.html

Scroll to Top