一.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(无语义)超链接标签
a
src可以为空,但一定要写
常用内联元素
其它常见问题
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; }
(三)表单<form></form>
action<form action="localhost:8000/index5" method="get"></form>
提交表单到对应的视图函数
label(注意拼写)[关联对应的id]<label for="user_name">用户名</label>
for="某input的id"
input文本(用户名)
密码
单选框(性别)[相同的name实现互斥选择]
<input type="radio" name="sex" value="1">男 <input type="radio" name= "sex" value="0">女
多选框(爱好)
html <input type="checkbox" name= "hobby" value= "work">工作 <input type="checkbox" name= "hobby" value = "learn">学习 <input type="checkbox" name= "hobby" value="play">娱乐上传文件
提交
重置
<input type="text" id="user_name">
<input type="password" id="passwd" name="user_passwd">
<input type="file">
<input type="submit" value="注册">
<input type="reset" value="重置">
type
textarea(多行输入框)<textarea name="" id="" cols="30" rows="5">个人介绍</textarea>
select
<select name="loc"> <option value="1">北京<option> <option value="2">上海<option> <option value="3">广州<option> </select>
一点体会:
提交表单时,只会识别到标签以内的内容,所以,多选框 多选框,下拉框一定要添加value,且值必须唯一
(四)列表
1.有序<ol>
<ol> <li>第一季</li> <li>第二季</li> <li>第三季</li> </ol>
2.无序<ul>
<ul> <li>百度</li> <li>腾讯</li> <li>阿里</li> </ul>
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.内联式(新手模式)
<div ></div>2.嵌入式(练习模式)
<style> div{ color:red; width:100px; } <style>3.外链式(项目模式)
<link rel="stylesheet" href="..css/index.css">
(四)选择器
层级选择器
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导图