段落开头空两格

文本缩进属性是用来指定文本的第一行的缩进。
实例

1
p {text-indent:50px;}

文本的对齐方式

文本可居中，对齐到左或右,两端对齐

1
2
3
h1 {text-align:center;}// 居中
p.date {text-align:right;}// 对齐到右
p.main {text-align:justify;}// 两端对齐

a标签

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

table表格

表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，使用 border-collapse属性。

1
2
table{border-collapse:collapse;}
table,th, td{border: 1px solid black;}

display: hidden、inline、block

隐藏元素 - display:none或visibility:hidden

1
visibility:hidden

可以隐藏某个元素，但仍需占用与未隐藏之前一样的空间，会影响布局。 

1
display:none

可以隐藏某个元素，且隐藏的元素不会占用任何空间。

块元素和内联元素

1
display:inline

把元素显示为内联元素 

1
display:block

把元素显示为块元素 

1
display:inline-block

在同一行内的块级元素，可以设置宽高，也不换行

Position(定位)

Static
默认值，不会受到 top, bottom, left, right影响。
Relative
相对其正常位置。
Fixed
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
Absolute
相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
Sticky
而当页面滚动超出目标区域时，就像 position:fixed;，固定在目标位置。（通讯录）

z-index属性

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序，高的在上面 

1
z-index:-1;

Overflow

用于控制内容溢出元素框时显示的方式

overflow: scroll;
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。`

Float(浮动)

1
2
float:left;
clear:both;

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，周围元素使用 clear 属性。

水平 & 垂直对齐

水平对齐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//元素居中对齐（行内元素需要设置为块元素）
margin: auto;

//文本居中对齐
text-align: center;

//图片居中对齐（img是行内元素）
display: block;margin: auto;


//左右对齐 - 使用定位方式
position: absolute;
right: 0px;//右对齐


//左右对齐 - 使用 float 方式
float: right;

在父元素上添加overflow来解决子元素溢出的问题:

1
overflow: auto;

垂直对齐

1
2
3
4
5
6
7
8
9
10
//使用 padding  
padding: 70px 0;//上下都70px  

//使用 line-height让line-height=height  
line-height: 200px;   height: 200px; 

//使用 position 和 transform，用position将元素的左上角移动到其包含块的中心位置，再用transform将元素向左和向上移动其自身宽度和高度的50%  
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);

表单

Input、文本框textarea、下拉菜单select、option

1
2
3
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">

input可以当按钮传值

1
2
3
4
5
<input type="radio"  value="男生" />男生<br />//单选按钮
<input type="checkbox" value="跳舞" />跳舞<br />//复选按钮
<input type="email" name="Uemail" />// email类型输入框会提示格式
<input type="url" name="user_url" />// url类型输入框会提示内容
<input type="color" name="select_color" />// color类型能让你选颜色