css基础知识点概述
2016-12-06 本文已影响0人
前端_凯伦
在浏览器中会把，多个换行，或是多个空格当做一个空格来处理
1.html：
h1-----标题标签
只有h1-----h6;
h1 -- 一级标题标签
h2 -- 二级标题标签
以此类推到h6
*h1在一个页面当中只可以用一次
p------段落标签
会自带默认的行距，空白部分；
br ----换行标签
a-----超链接
<a href="链接地址"></a>
<img src="" /> 图片标签
src（图片源）
div---- 一个容器，一个盒子，一张白纸
strong （加粗）加重说明
b （加粗）
em （倾斜）加重说明
i (倾斜)
span （空标签）
单标签
br
img
<标签名 />
双标签
h2 p a
起始的标签 结束的标签
<标签名> </结束标签>
2属性：
href 超链接地址
title 文本提示（提示文字）
alt 文本替换
width 宽度
height 高度
src 图片源
border 边框
style 样式
私有属性：
href
width
height
alt
src
公有属性：
title
style
(写法)
属性名=" 属性值"
3.css：
样式名:样式值；
需要写在style里
width:300px; 宽度
height:300px 高度
border： 边框
border-width: 边框的宽度
border-style: 边框的线性
border-color: 边框的颜色
background： 背景
background-color：背景颜色
background-image: 背景图
background-repeat: 背景图平铺
-----no-repeat 不平铺
-----repeat-x x轴平铺
-----repeat-y y轴平铺
background-position: 背景图定位
x y;
（背景图缩写）background:图片路径 平铺 背景图定位；
color: 文本颜色
text-align: center; 文本水平居中
right
left
line-height: 文本的垂直居中（文字纵向居中）行高
写高度
font-size （文字大小）
font-style:italic （文字倾斜）
normal---不倾斜
font-weight:bold (文字加粗)
normal---不加粗
font-family: (字体)
英文
中文
unicode
white-space:nowrap; （文字不换行）
overflow:hidden; （溢出隐藏）
text-overflow:ellipsis; （省略号）*缺一不可，而且要设置宽度
text-decoration:none; （取消下划线）
underline （下划线）
overline （上划线）
line-through（中划线）
text-indent （文本缩进）
单位
px
em
%
写在标签里面的叫做‘行内样式’
拿到style标签里的叫做‘内联样式，内部样式’
border的缩写：
border:边框的宽度 边框的线性 边框的颜色;
线性有：
solid 实线
dashed 虚线
dotted 点画线
颜色：
写英文：
red
green
blue
十六进制：
#3385ff
#0 f 0
如果三对不一样的话不可以缩写
rgb：
rgb(0-255,0-255,0-255)
4.引入图片的地址分为两种：
绝对路径：
file:///C|/Users/Administrator/Desktop/什么文件
相对路径：
../images/淘宝-用背景别用border.png
路径不要出现中文
5.文档构成：
<!doctype html>
document type html
文档 类型 html
过渡型 严格型
head 文档头
<meta charset="utf-8">
unicode编码
utf-8 国际编码
gb2312/gbk 中国编码
<meta name="author" content="作者" /> 作者
<meta name="copyright" content="版权" /> 版权
<meta name="description" content="描述" /> 描述
<meta name="keywords" content="关键字"/> 关键字
<title>标题</title> 标题
5.XHTML：
文档必须要有文档头
所有的标签都要用小写英文来写
html需要用双引号（英文）
img标签必须有alt属性
双标签必须要闭合标签
单标签需要合理闭合
6.字体继承：
颜色
字体大小
文字加粗
倾斜
字体
双下划线
行高
* a标签不可以继承颜色；
strong和b不会继承加粗
em和i不会继承倾斜
7选择器：
标签选择器
div h2 p span
class选择器（类选择器）
calss="起的小名，名字"
。
ID选择器
id="大名"
#
通配符选择器
*
嵌套选择器
div空格 p
群组选择器
div逗号p
* class可以起很多个
id 只可以有一个
* < p < class < id <行间
0 10 100 1000
8.标签特性
行标签：
1，不可以设置宽高
2，并到一行
3，会受到换行或是空格影响
4，宽度是内容的宽度，根据内容来撑起
块标签：
1，可以设置宽高
2，独占一行
3，不会受到换行与空格的影响
4，不设置宽度，宽度就是父级的宽度
行内块：
1，可以设置宽高
2，会并到一排
3，会受到空格与换行影响
块标签：
h1---h6
p
div
行标签:
a
strong
b
em
i
span
行内块：
img
行，块，行内块的转换
display:block 转换成块
display:inline 转换成行
display:inline-block 转换成行内块
块标签可以包任何标签
p标签只可以包行内
行标签只能包行标签(*不可以包自己)
a可以包任何标签
什么都可以包这个img
9.语义化：
像说话一样写代码；
有语义化：
h1-h6
p
img
a
strong
em
无语义化：
div
span
b
i
10.列表：
有序列表<ol>
<li></li>
<li></li>
</ol>
无序列表
<ul>
<li></li>
<li></li>
</ul>
描述列表
<dl>
<dt></dt>
<dd></dd>
</dl>
list-style:none; 清除列表自带样式
*第一个电脑自带的不方便使用，需要自己写。
*需要把自带的默认样式清除掉，自己写。
11.盒模型：
width
height
border
padding
***
margin不算盒子
12.padding与margin
padding (内边距)
:边框到内容的距离
margin （外边距）
一个盒子到另一个盒子的距离
关于padding:
padding: 5px; 上下左右
padding:100px 50px 上下 左右
padding:20px 60px 100px; 上 左右 下
padding:20px 60px 80px 120px; 上 右 下 左
padding-top:50px; 每一个方向，只给一个单独的值
padding-left:50px;
padding-right:50px;
padding-bottom:50px;
*** 给了padding就要用宽高来减去这个padding 的距离
如果没有设置宽高就不需要减掉；
*** 行标签只可以给左右的padding
关于margin：
margin:5px; 上下左右
margin:100px 50px 上下 左右
margin:20px 60px 100px; 上 左右 下
margin:20px 60px 80px 120px; 上 右 下 左
*** 行标签只可以给左右的margin
*** 写代码之前必须清除默认的样式
*{
margin:0;
padding:0;
}
margin的BUG:
***拖拽父级（塌陷）
解决的办法如下所述：
overflow:hidden;
border:1px solid #000;
padding-top:50px;(推荐)
***margin合并
解决的办法如下所述：
给单一方向加上你想要的距离（取最大值）
margin负值：
left or right 不能设置宽
top or bottom 不能设置高
*padding不可以给负值
小图片的格式：
jpg 占据的内存小
png 内存大 透明
psd 有图层的
gif 动态，透明
13.浮动：
float: 浮动
float:left 左浮动
float:right 右浮动
说说这个浮动的特性：
是一个有方向的；
变成了块；
并到一排；
顶对齐；
宽度不够会掉下来；
脱离文档流；
*加上浮动的元素只会对下面的元素有影响
*文本环绕
加浮动必须得：
只要有一个标签加上了浮动，同级的标签都要加浮动
加上浮动就必须清浮动（只能写在父级）
overflow:hidden;
一定要设置宽度，不给宽度会是内容的宽度
清浮动:
overflow:hidden (溢出隐藏)
*给父级加
<div style="clear:both"></div>*必须用块标签
单独再写一个块标签，给这个块标签加上一个clear:both;
*清除掉左右浮动
.clearfix:after{
display:block;
clear:both;
content:"";
}
.clearfix{
zoom:1;
}
*给父级加
14.伪类选择器：
:after
:link （未访问）
:visited（访问过）
:hover （鼠标移入）
:active （鼠标按下）
link visited hover active
lvha
只有a标签才可以加这个lv
ha都可以加
15.定位：
position: 定位
absolute; 绝对定位
*脱离文档流
*把元素变成块
*根据body来定位的
top：；
left：；
right：；
bottom：；
position: 定位
relative;相对定位
*本身的还在站位
*并不会改变元素
*根据原先的位置来定位（自己）
top：；
left：；
right：；
bottom：；
position:fixed; 固定定位；
根据可视区来定位的；
脱离文档流
------------------（2）
z-index （层级）
{可以写正数也可以写负数}
普通元素<浮动<定位
*定位，后写的比先写的层级高
咱们定位是好用；但是不能多用，能用浮动的就用浮动，用不了再用定位
pacity:0.5; 透明
0-1
filter:alpha(opacity:80);兼容IE(透明)
0-100
*文字不能写透明里面（如果文字也透明了）
外联样式（外联样式表）
<link href="css/index.css" rel="stylesheet"/>
16.表单：
提交数据
<input type="text" class="txt" />
（明文输入框）文本输入框
placeholder 占位符
<input type="submit" value="百度一下" />
submit提交按钮
value可以改变按钮文字
<input type="password" name="num"/>
（密文输入框）密码框
<form action="模拟百度.html" method="get"></form>
action 数据提交的地址
method 提交的方式
get 地址栏 不安全
post 后台 相对安全一点
name---------想提交必须给它一个名字
<input type="checkbox" />复选框
<input type="radio" name="sex" id="id"/>单选框
*（用相同的name）
<label for="nv">女</label>
for="ID"
<select>
<option>下拉框内容</option>
</select>
下拉框
<input type="button" value="关闭" />普通按钮
<textarea></textarea>文本域
vertical-align: 垂直对齐方式
middle; 居中
top； 上边
bottom 下边
outline:none; 取消焦点
resize:none; 取消文本域拖拽
17.table
<table border="1" （边框）cellpadding="0"（清除单元格默认padding）cellspacing="0"（单元格间距）> 表格
<thead> 可省略
<tr> 行行
<th></th> 头列
</tr>
</thead> 表头
<tbody> 不可以
<tr> 行行
<td></td> 身列
</tr>
</tbody> 表身
<tfoot> 可省略
<tr> 行行
<td></td> 尾列
</tr>
</tfoot> 表尾
</table>
border-collapse:collapse; 取消间距
colspan="3" 行的单元格合并
rowspan="2" 列的单元格合并
如果没有内容，要个高度与宽度（因为不设置宽高的话它是根据内容撑开）
18.框架
溢出的部分变成滚动条：
overflow:scroll;
X部分溢出隐藏，Y轴变成滚动条：
overflow-x:hidden
框架
后台管理系统；
框架 <iframe></iframe>
<iframe src="../小米/index.html" scrolling="no" width="500" height="500" frameborder="0">
</ifra>
src="引入地址"
scrolling="no"（取消自带滚条）（写样式不好使）
frameborder="0" 取消边框
--------------------------------------------------------
框架集：
<body>
<frameset>
</frameset>
</body>
***在一个页面中要是有frameset就不能有body
<frameset rows="200,*">
<frame src="../小米/index.html" />
<frame src="../小米/index.html" />
</frameset>
<frameset cols="150,*">
<frame src="../小米/index.html" />
<frame src="../小米/index.html" />
</frameset>
