HTML&CSS experience

Tags (separated by Spaces) : HTML and CSS

Line height

When no height is set, the row height affects the height of the container

The row height does not affect the container height

The inline label newline is resolved between the gaps

  • The parentfont-size: 0;
  • Remove the blank space
< div id = "box" > < a href = "" > blood < / a > < a href =" "> the < / a > < a href =" "> fever < / a > < / div >Copy the code
  • Margin is not an appropriate method to use
  • With HTML comments, etc
<div id="box"> <a href=""> </a><! -- --><a href=""> </a><! -- --><a href=""> </a><! -- --><a href="">Copy the code

Clear float

1. Add height or display: inline-block to the parent;

2. After pseudo-class clear float

.clearfix:after{
	content: "";
	display: block;
	clear: both;
}
Copy the code

3. Float to float

transparency

  • Opacity0 ~1 opacity descendants are affected
  • IE filter:
filter:alpha(opacity=0~100); 100 opaque 0 fully transparentCopy the code

When transparency is set, all descendant elements are affected

form

< table border = "1" cellspacing = "" cellpadding =" "> < thead > < th > Monday < / th > < thead > < tbody > < tr > < td > 1 < / td > < / tr > < / tbody > </table>Copy the code
  • Tr setting border has no effect
  • th,td{padding:0; } resets the cell’s default population
  • table{border-collapse:collapse; } Cell gap merge
  • The colSPAN property specifies the number of columns that a cell can span.<td colspan="2"></td>Only set between lines is valid
  • The RowSPAN property specifies the number of rows that a cell can span.<td rowspan="2"></td>

All form elements must be placed inside the form

< input type = "..." Name ="" Value ="" /> Text Text box Password Radio Radio checkbox check submit Submit Reset Button button image Image file Upload Hidden HiddenCopy the code
  • Name is the name of the form element (field passed to the back end)
  • Value is the value of a form element (passed to you at the back end), usually typed by the user
  • [Fixed] Height support for the select/option drop-down box is not compatible
  • The default scroll bar display for textarea text field is incompatible across browsers
  • The label tag defines the annotation for the input element

Some questions about margin-top passing

Margin-top is passed only by block elements, such as display:inline-block; Top passing is not triggered

Clear default styles

<style> body, h1, h2, h3, h4, h5, h6, hr, p, dl, dd{ margin: 0; } ul, ol{ margin: 0; padding: 0; list-style: none; } a{ /* color: #333; */ text-decoration: none; } img{ vertical-align: top; border: none; } table{// table border-collapse:collapse; } th,td{ padding: 0; } </style>Copy the code

Vertical center method for box model

  1. The parentdisplay: flex;The childmargin: auto;

dl dt dd

<style> dl dd{ margin: 0; } dl{ width: 300px; } dt{ height: 22px; /* overflow: hidden; */ } dt div{ float: left; line-height: 30px; } < / style > < dl > < dt > < div > test problems < / div > < / dt > < dd > text overflow < / dd > < / dl >Copy the code

Overflow: Hidden when the content size is larger than the parent size

other

Similar: when li left float margin-right: 20px; Margin-right: -20px; Don’t add margin to the last li

<ul>
	<li></li>
	<li></li>
</ul>
Copy the code

1 Inline elements do not support up and down paddingmargin height nor does it change the size of the container, only the width of the contents

2 text align: center; ‘The text is not centered up or down

3 position: absolute; The subset is positioned relative to the parent’s padding+ content area and contains no border

The front-end specification

1. All writing is in lower case in English half corner;

Id, class must start with a letter. 3. All labels must be closed; 4. Indent HTML tags with TAB key; 5. Attribute values must be quoted; HTML 7, /* CSS annotation */ 8, ul,li/ OL, LI /dl,dt,dd have parent-child relationship tags; 9. P,dt, H tags cannot nest block attribute tags; 10, A tag can not nest a; 11. Inline labels cannot nest block labels