html css 笔记

cursor其他取值 鼠标移入

auto ：标准光标

default ：标准箭头

pointer ：手形光标

wait ：等待光标

text ：I形光标

vertical-text ：水平I形光标

no-drop ：不可拖动光标

not-allowed ：无效光标

help ：帮助光标

all-scroll ：三角方向标

move ：移动标

crosshair ：十字标

Html5中标签（包括新增常用）：

<div> 块

<span> 区分掩饰

<a rel="nofollow" href="#"> 超链接

<header> 页面头部（板块）

<footer> 页面底部（板块）

<section> 页面中的板块→代替<div>

<nav> 导航

<article> 页面中独立完整的一块内容，可以是一个文章、帖子、博客及回复的内容块:

<aside> 用法一：用来写在<article>中，作为其附属信息

用法二：用来写在页面主体当中，作为整个页面的附属信息

<details>

<summary>今天天气不错</summary>

</details>

类似于隐藏框 当<details open>是<summary>内容显示出来

<dialog> 一个对话框一般隐藏，显示加open

<h1>~<h6> 标题标签

<p> 段落

<mark> 强调标签——加背景色

<strong> 强调标签——字体加粗

<em> 强调标签——字体倾斜

<time> 强调标签——时间

<ul> 无序列表

<ol> 有序列表

<dl> 分为dt dd，dd为dt进行列表的再次分类

<img src=""/> 图片

<form> 表单

<input> 一些框

<textarea> 输入一段文本框

<select> 下拉框 选择为<option>

<table> 表格

<thead> 表格头部

<tbody> 表格内容

块标签(block):

1.独占一行

2.支持所有的样式

3.不设置宽度，撑满父级的空间

内嵌标签(行内/内联)(inline)

1.在一行显示

2.不支持宽高，对上下的margin和padding支持的也有问题

3.代码换行会被解析成一个空格

4.内嵌的宽度，有内容撑开

块:

div,header,footer,nav,article,aside,section,p,h1-h6,ul,ol,li,dl,dt,dd

内嵌:

span,a,strong,em,time,mark

background 背景（集合样式）

background-color 背景颜色

background-image 背景图片（添加路径 url（））

同一个元素可以拥有多个背景，用逗号分开，先写的背景在上面

background-repeat 背景图片平铺方式

no-repeat （不平铺）

repeat （平铺）

repeat-x （水平平铺）

repeat-y （纵向平铺）

background-postion 背景定位

关键字

x：left center right

y：top center bottom

数值

x：10px/20% （像素大小/百分比）

y：10px/20%

background-attachment：fixed 固定图片不动

background-origin 背景图位置

border-box

padding-box （默认）

content-box

background-clip 背景裁切

-webkit-text （文字背景，只限谷歌）

border-box （默认）

padding-box

content-box

background-size 背景图大小（！！！手机端不建议使用）

等比放大：contain（包含）

cover （覆盖）

线性渐变

background-image：linear-gradient（red,blue） （有红色变蓝色 从上到下）

渐变定位（从什么地方开始到什么地方结束）

在（red,blue）中加入位置

如：（red 50px,blue 100px）也可加入百分比

渐变方向 deg

在开是位置加入角度值 （角度默认180deg）

如：background-image：linear-gradient（120deg，red,blue）

斑马线（就是平铺渐变）

background-image：repeating-linear-gradient（）

兼容IE6（方向）

filter：progid:DXTmageTransform.Microsoft.gradient

(starColorstr='red',endColorstr='blue',GradientType='1');或者2

径向渐变

background-image：radial-gradient（起点 形状 大小 点）

起点：可以是关键字（left，top，right，bottom）、具体数值或百分比

形状：ellipse、aircle

大小：具体数值或百分比，也可以是关键字

最近端（closest-side）

最近角（closest-corner）

最远端（farthest-side）

最远角（farthest-side）

包含 contain

覆盖 cover

！！！火狐只支持关键字。

font 文字（集合样式）

color 字体颜色

font-size 文字大小

font-family 字体

font-weight: 字体加粗与否

bold 加粗

normal 正常

font-style: 字体倾斜

italic 倾斜

nomral 正常

line-height 行高

字体语法：

font：font-style font-weight font-size/line-height font-family；

文本:

text-decoration: 文本修饰

line-through 删除线

overline 上划线

underline 下划线

none 没有修饰

text-algin: 文本对齐方式

left 左

center 中

right 右

text-indent 首行缩进

white-space：nowrap 强制不换行（wrap 换行）

word-spacing 单词间距

letter-spacing 字母间距

direction 文字排列方向

rtl 右到左

ltr 左到右

unicode-bidi：bidi-override 改变文字的书写方式（从右到左）

在某一元素内文字超出显示省略号

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

border 边框(复合样式，集合样式)

border-top

border-right

border-bottom

border-left

border-top-width 上

border-right-width 右

border-bottom-width 下

border-left-width 左

border-style 边框样式(solid 实线/dashed 虚线/dotted 点线)

border-top-style

border-right-style

border-bottom-style

bordder-left-style

border-color 边框颜色

关键字

rgb(0-255,0-255,0-255);

六位或者三位的一个十六进制的数字;

border-top-color

border-right-color

border-bottom-color

border-left-color

border-radius 圆角半径

列：border-radius:10px 20px 30px 40px

border-width 边框宽度

border-image语法 ：

border-image：border-image-sourceg border-image-slice border-image-repeat

-webkit-border-image:url(border.png) 27 27 stretch stretch;

border-image 给内容加入图片仅限谷歌 要加如前缀 -webkit-

border-image-sourceg 引入图片

border-image-slice 切割图片 两个值（上下或左右）不用加px

border-image-repeat 图片的排列方式

round 平铺

repeat 重复

streth 拉伸

border-colors 为边框加颜色（从外层一层层显示）

只可在火狐下使用，并单独为某个方向上的边框设置

盒模型：

怪异盒模型

在IE6,7,8,下，没有文档声明会进入怪异盒模型

box-sizing：

border-box（怪异盒模型）

content-box （标准盒模型）

box-shadow

inset （可选）内阴影、 x 偏移、 y 偏移、 模糊半径、 扩展半径、 阴影颜色

阴影先写的在上边，后写的在下边

padding

padding 内填充(使元素和它的内容之前有一个空隙)

padding:30px(上下左右);

padding:30px(上下) 60px(左右);

padding:10px(上) 30px(左右) 60px(下);

padding:10px(上) 30px(右) 60px(下) 80px(左);

padding-top

padding-right

padding-bottom

padding-left

padding不算在元素的width里边

padding在元素的边框以里，并且padding会显示元素的背景

margin

margin 外边距

margin:30px(上下左右);

margin:30px(上下) 60px(左右);

margin:10px(上) 30px(左右) 60px(下);

margin:10px(上) 30px(右) 60px(下) 80px(左);

margin-top

margin-right

margin-bottom

margin-left

margin在元素的边框以外，并且margin不会显示元素的背景

**同级元素之间的距离用margin，父元素和子元素之间的距离用padding

a 超链接

href 页面地址 点击会跳到这个页面来

href 压缩包 点击会下载这个压缩包

href id名字 点击跳到这个id的元素的位置

a 标签不继承父级的字体颜色

a标签中不能再包含a标签

span 标签区分样式用

包含选择 a span{} 找到a标签下的span标签

base 定义页面上的链接默认的打开方式和默认地址

新窗口打开页面 target="_blank"

当前窗口打开页面 target="_self"

table 表格

table 设置宽度之后，宽度会自动分配到每一行,设置高度之后也会自动分配到tbody下的每一行

thead 表格头部

tbody 表格主体

tr 行

th 单元格 (加粗，居中)

td 单元格

colspan 横向合并单元格

rowspan 纵向合并单元格

td,th 不支持margin

tr，thead，tbody :不支持margin和padding

border-spacing:0; 单元格间距为0（IE6，7不支持）

border-collapse:collapse; 合并边框

单元格中的内容默认垂直居中,可通过设置vertical-align进行修改

单元格设置 宽度，一竖列宽度都变，单元格设置 高度，一横行高度都变

表格清除默认样式：

table{border-collapse：collapse；}

td，th{padding：0；border：1px；}

vertical-align 垂直对齐方式(用在两个或多个，内联或者内联块元素垂直方向的对齐)

值 描述

baseline 默认。元素放置在父元素的基线上。

sub 垂直对齐文本的下标。

super 垂直对齐文本的上标

top 把元素的顶端与行中最高元素的顶端对齐

text-top 把元素的顶端与父元素字体的顶端对齐

middle 把此元素放置在父元素的中部。

bottom 把元素的顶端与行中最低的元素的顶端对齐。

text-bottom 把元素的底端与父元素字体的底端对齐。

length

% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit 规定应该从父元素继承 vertical-align 属性的值。

float(浮动 left/right/none):

1.使内嵌元素支持宽高

2.使块元素在一行显示

3.不设置宽度的时候,宽度由内容

4.脱离文档流

浮动原理:

使元素脱离文档流,然后按照指定的方向去移动，直到碰到父级的边界，或者另外一个浮动元素停止

文档流:

文档流是文档中可显示对象在排列时所占用的位置。

BFC ( Box Formatting Context) 块级格式化上下文

inline formatting context 行内格式化上下文

BFC 作用

1.清除内容浮动

2.阻止margin向外传递

触发BFC的条件:

1.根节点

2.float不为none的情况

3.display的值为inline-block、table-cell、table-caption

4.overflow的值不为visible

5.position的值为absolute或fixed

overflow的值

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

clear 元素的某个方向上不能有浮动元素（left、right、both、none）

清浮动的方法：

1.给同为父元素设置 float

2.给父元素设置 display：inline-block；

3.给父元素设置 overflow不为visible（默认值） 一般设为auto；

4给父元素加个样式

clearFix:after{content:"";display:block; clear:both;} 最流行的方法

定位（position）

position:relative; 相对定位(只加相对定位元素不会有任何变化)

1.不脱离文档流(元素移走元素的初始位置，还会被保留)

2.根据自己的原始位置来计算left(right)和top(bottom)值

3.提升层级

position:absolute; 绝对定位

1. 脱离文档流

2.提升层级

3.根据自己有定位的父级来计算坐标,如果父级没有定位就会一层一层的向外去找.所有的父级都没有定 位,就根据document来计算

4.使内嵌元素支持宽高

5.绝对定位之后不设置宽度，宽度有内容撑开

！！！！元素定位之后，默认情况下，后边的层级高于前边的元素

z-index 层级

1.数值越大层级越高

2.层级只在定位元素上起效果

3.层级最好只在同级元素之间做比较

document 是html的父级

form 表单

action 提交跳转地址

常用控件-----

textarea 输入一段文本

select 下拉框 option

input

type="text" 文本输入框

type="password" 密码框

type="radio" 单选框

type="checkbox" 复选框

type="file" 上传控件

type="submit" 提交按钮

type="email" 邮箱 必须以@结尾

type="tell" 电话 （移动设备自动弹出数字输出法）

type="url" 网址

type="range" 数值选择

max="100" min="1" value="50" step(部署控制，每次移动多少)="10"

type="number" 数字选择

max="9" min="1" value="3" step="3"

type="color" 取色器

type="datetime-local" 时间（年月日小时）

time： 只有时间

date： 只有年月日

week： 第几周/年

month： 第几月/年

value 值

name 数据名称

常用属性-----

checked 单选和复选的默认选中

selected 的默认选中

disabled 禁止控件的编辑和提交

for=要辅助input的id

pattern：正则验证

placeholder：提示文字信息（不兼容IE）

autocomplete：是否保存用户输入值 on（默认）/off

autofocus：指定表单获取输入焦点

required：强制用户输入不能为空

<input type="text" name="user" list="valList" required/>

<datalist frameborder=0 allowfullscreen></iframe>