How to query related documents
Recommended website: http://devdocs.io/
First line of code
div {
width: 500px;
height: 500px;
background-color: red;
}
<!-- A cube background color of 500 in length and height is defined, red -->
<div>I am div</div>Inheritance of css Style
body {
color: blue;
}If you do not add additional font colors to the label, all text colors on the page will be set to blue
Examples of CSS common properties
| attribute | describe |
|---|---|
| width | Set length unit px |
| height | Set height unit px |
| float | float: left / right/ none; float elements for layout |
| position | absolute/relative/fixed element positioning |
| font | Font format |
| background | Background color / background image / background repeat / background attachment / background location |
| border | width /style /color border style |
| list-style | List style |
| margin | Margin |
| padding | padding |
| cursor | cursor style |
css float property
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
}
<div class="left"></div>
<div class="right"></div>The div itself is a block level label. When two divs are at the same level, the two divs will be closely adjacent to each other. After using the floating attribute, you can find that the two divs are coincident
Here we can think that the first div floats up, and the one close to it occupies the first div position when it finds that the previous div is missing
Some problems caused by using float
.box{
width: 800px;
border: 4px red solid;
margin: 50px auto;
}
.left{
width: 200px;
height: 200px;
background: blue;
float: left;
}
.right{
width: 200px;
height: 200px;
background: gold;
float: right;
}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>There are two child divs in a parent divs. The parent does not set the height. Two child divs use left float and floating respectively. This will cause the height collapse of the parent
resolvent:
Use clear: both;
After adding a div < div style = "clear: both;" > and < / div > it will return to normal
form sheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<!-- Line feed -->
<!-- <br/> -->
<!-- action Server interface for form submission -->
<!-- methid The default method of form submission is GET General use POST -->
<form id="first" action="" method="">
<!-- Input box placeholder Placeholders prompt users value Final value to send to server
name Sent to server-->
<label for="name">User name: </label>
<input id="name" type="text" placeholder="enter one user name" name="username" value="">
<br/>
<input type="password" placeholder="Please input a password">
<br/>
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="radio" name="gender" value="3">
<br/>
<input type="checkbox" name="inster" value="work">
<input type="checkbox" name="inster" value="play">
<input type="checkbox" name="inster" value="watch">
<br/>
<!-- multiple Upload multiple files -->
<input type="file" multiple>
<br/>
<input type="email" >
<br/>
<input type="date" >
<br/>
<input type="search" >
<br/>
<input type="button" value="Do not press">
<br/>
<!-- Hidden properties collect information that users don't need to fill in-->
<input type="hidden" name="type" value="Mac">
<br/>
<input type="submit" value="register">
<br/>
<textarea></textarea>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!-- empty -->
<br/>
</form>
<!-- If submit button/Reset button on form The external click button is invalid. It can be associated by attributes -->
<input form="first" type="reset">
</body>
</html>Table style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
/* collapse Merge borders
separate Do not merge borders
*/
border-collapse: collapse;
border: 1px blue solid;
/*Blank cells can be hidden without merging borders*/
/*empty-cells: hide;*/
text-align: center;
}
tbody{
/*Change the vertical center of the table*/
vertical-align: top;
}
</style>
</head>
<body>
<!-- There border and css Different in cellspacing Cell spacing cellpadding Cell inner margin-->
<table border="1" width="200" height="100" cellspacing="0" cellpadding="10">
<!-- Title -->
<!-- <caption></caption> -->
<!-- <thead></thead> -->
<!-- tbody It can be omitted. -->
<!-- <tbody> -->
<tr>
<th width="100" height="200">1</th>
<th width="250">2</th>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
<!-- </tbody> -->
</table>
<table border="1" width="280" height="280">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<!-- <td>1</td> -->
<td colspan="2">2</td>
<!-- <td>3</td> -->
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td colspan="2" rowspan="2">3</td>
<!-- <td>4</td> -->
</tr>
<tr>
<td>1</td>
<td>2</td>
<!-- <td colspan="2">3</td> -->
<!-- <td>4</td> -->
</tr>
</table>
</body>
</html>