html快捷写法,<干货>5分钟快速回顾HTML CSS

一.html

(一)标签类型1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置)块元素的居中问题块级元素左右居中:先设置自身width;然后,margin: 0 auto;div(无语义)

列表 ur/ol/li

段落 p

标题 h1-h6

自定义列表 dl/dt/dd

其它常见问题

2.内联元素(行内)[不支持width, height, margin上下,padding上下]子级内联元素之间有间隙,可以把父级元素font-size设置为0,子级单独设置font-size

内联元素居中:由于内联元素自身不支持width,使用在父级元素设置text-alian : center 的解决方案span(无语义)

超链接标签 asrc可以为空,但一定要写常用内联元素

其它常见问题

3.内联块元素(支持全部样式的内联元素)可以把内联块元素看做内联元素的进化版,

通过设置float属性也会将元素转换为内联块

通过定位属性fix, absolute都可以将元素转换为内联块设置样式 display: inline-block;转换为内联块

其它常见问题

(二)盒子模型1.盒子图

盒子图2.样式重置(reset.css)h1,h2,h3,h4,h5,h6,p,body,ul,ol,dl,dd,dt,input{

/*去掉默认样式*/

margin: 0;

padding: 0;

}

ul,ol{

/*去掉左边的点或者数字*/

list-style: none;

}

a{

/*去掉下划线*/

text-decoration: none;

}

em,i{

/*去掉斜体*/

font-style: normal;

}

b,strong{

/*去掉加粗*/

font-weight: normal;

}

/*清除浮动影响 和清除margintop塌陷 合在一起的写法*/

.clearfix:before,.clearfix:after{

content: "";

display: table;

}

.clearfix:after{

clear: both;

}

.clearfix{

/*兼容ie*/

zoom:1;

}

(三)表单

action提交表单到对应的视图函数

label(注意拼写)[关联对应的id]用户名for="某input的id"

input文本(用户名)

密码

单选框(性别)[相同的name实现互斥选择]男

女

多选框(爱好)

html 工作 学习 娱乐

上传文件

提交

重置typetextarea(多行输入框)个人介绍

select

北京

上海

广州

一点体会:提交表单时,只会识别到标签以内的内容,所以,多选框 多选框,下拉框一定要添加value,且值必须唯一

(四)列表1.有序

1. 1. 第一季
   2. 第二季
   3. 第三季
   2.无序

• • 百度
  • 腾讯
  • 阿里
  3.清除样式list-style:none;

二.css

(一)定位的所有套路:1.相对定位(相对自己定位):css属性position: relative;

left: 50px;

top: 50px;说明:

针对自身设置相对定位

有上左,上右,下左,下右,四种定位方式

元素自身未脱离文档流,依然占据了原位置2.绝对定位(相对于父元素定位)子元素会针对父元素进行定位

子元素已经脱离了文档流

定位的四种方式同相对定位

如果子元素找不到父元素,则会一直向上找,直到找到最外层标签页面position: relative;父元素设置

子元素设置position: absolute;

left: 20px;

top: 20px;

说明:

3.固定定位(相对于浏览器定位)位置会固定住,不随滚动条滚动

脱离文档流元素css设置position: fix;

right: 20px;

bottom:20px

说明:

4.层级关系:z-index属性相当于Photoshop中的图层属性,数值越大越靠上,实际开发过程中,取值从1000开始,每次增加一百,如果意外增加了需求,预留的100个层级可插入新的需求层

5.一些细节:absolute,fix能把元素变成内联块

position还有一个默认值为static

(二)浮动注意点:浮动元素有左浮动(float:left)和右浮动(float:right)两种

浮动元素碰到父元素边界或其他元素才会停下来

父元素必须清除浮动,才能被子元素撑开

相邻浮动的块元素可以并在一行,超出父级元素会自动换行

元素设置浮动后,会自动转为"行内块元素"(元素之间也不会有间隙)

浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动元素内的文字会避开浮动的元素,形成文字绕图效果

常见需求: 一组子元素,同时左浮动;同时右浮动;最后一个右浮动,其它左浮动

(三)引入方式1.内联式(新手模式)

2.嵌入式(练习模式)

div{

color:red;

width:100px;

}

3.外链式(项目模式)

(四)选择器层级选择器div p{}

标签选择器

p{}

多标签同时选

p,span{}

直接子类选择器

.bilibili > p{}

类选择器

.bilibili{}

伪类选择器

.bilibili:hover{}

选择器权重权重10000:!important

权重1000:内联样式 style

权重100:ID选择器

权重10:伪类, :hover

权重为1:div.p

(五)容易忘的属性字体

color: red;

清除下划线

text-decoration:none;

行高

line-height: 24px;

字体类型

font-family:"Microsoft Yahei";

font-size: 20px;

font-weight: bold;

字符间距(强迫症福音)

letter-spacing:10px;

边框

border: 1px solid red;

(六)display选项内联元素:

display: inline;

内联块元素

display: inline-block;

块元素

display: block;

隐藏元素

display: none;

HTML CSS导图