HTML+CSS : 笔记整理(1)

meta:页面描述信息(可以在里面加入作者信息等,如: <meta name="description"content="HTML examples">)

重定向 : <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />

IE兼容 : <meta http-equiv="X-UA-Compatible" content="ie=edge">

base标签指定页面内所有链接用什么方式打开,如 : <base target="_blank" />

移动端视口:<meta name="viewport" content="width=device-width, initial-scale=1.0">

块标签:div span

em:斜体,表示强调

i:斜体,表示专业词汇

b:粗体,表示关键字

strong:粗体,表示重要的内容

id 一般用于css和js中引用,name用于表单提交,只有加了name属性的标签元素才会提交到服务器

a标签内href="#" 不写或者# 表示跳到页面头部, href="javascript:;"什么都不做

有序列表: ol标签和li标签结合使用,在ol里边li会自动加上序号,没有ol标签li标签则会变成无序的(有圆点)

无序列表: ul标签和li标签结合使用,前面会有圆点

定义列表: dl标签里面嵌套dt和dd标签,dd标签有缩进,缩进并不是空格

表格table , 一行用tr, , 一个单元格用td,th是加粗居中的单元格,一般用作表头

input类型:text,password,radio,checkbox,file,submit,reset,button,hidden(隐藏控件)

大段文本用 textarea 标签

lable用来定义表单里面的文本,for属性可以和表单控件绑定

下拉列表用select,嵌套option

内嵌框架用 iframe 取消滚动条 scrolling="no", a标签链接到内嵌框架需要设置target="内嵌框架的name"

css:

font属性,按---- 是否加粗,字号/行高,字体-----这样的顺序写,如:font: bold 30px/40px 'Microsoft Yahei';

text-decoration:none(去掉超链接下划线)text-indent:40px(文本首行缩进)text-align:center(文本居中对齐)

标签选择器, id选择器, 类选择器, 层级选择器, 组选择器, 伪类伪元素选择器(class:hover鼠标悬停在上面时)

盒子模型: margin(外边距), border(边界,边框), padding(内边距), content(内容)

border-top-width(边框粗细)border-top-style(边框线性,如实线solid)border-top-color(颜色)

上面三句可以简写: border-top:10px solid red;(四个边也可以合成一句border:...)

margin-top(bottom)垂直合并:margin-top和margin-bottom两个属性在两个盒子垂直的情况下会选择较大的那个属性

margin-top塌陷:里面的盒子margin-top属性会传到外面的盒子上,用伪元素解决,把这个类加到外面的盒子上:

.clearfix:before{
content:"";
display:table;
}

overflow(元素溢出):hidden(隐藏),scroll(滚动条),auto(被修剪时才会显示滚动条),inherit(父元素继承)

块元素(行元素):div,p,ul,h1等,占一行,默认宽度是父级宽度100%

内联元素(行内元素):a, span, em, b等...不支持宽高,margin上下,padding上下样式,宽高由内容决定,内联元素
之间的间距可以在父元素中先设置font-size为0,然后设置内联元素自己的font-size.

内联块元素(行内块元素):img和input的行为类似这种元素,可以用display属性将块或内联元素转化为这种元素.

子元素是行内元素,父元素可以用text-align和line-height设置水平和垂直对齐.

行内块元素之间有间隙怎么办:把父级的font-size设置为0,然后自身设置font-size.

body有8的margin,ul有圆点(list-style:none)和16的margin和40的padding-left,h,b,strong有加粗(font-weight:normal)
em,i有倾斜(font-style:none)

清除浮动:
.clearfix:before,.clearfix:after{
content:'';
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}

定位(绝对和固定定位会转换为行内块元素):

relative:相对定位.相对于 normal flow 进行定位

absolute:绝对定位,脱离 normal flow 不占据位置,相对于上一个设置了相对或者绝对或者固定定位的父级元素进行定位
如果没有,则相对于body进行定位

fixed:固定定位,脱离 normal flow,相对于浏览器窗口进行定位.