前端开始
标签
1.标题标签分为6个等级
到
h是head的缩写，重要性递减
2.段落标签
我是一个段落标签
3.换行标签
（强制换行）特点:是一个单标签，不会分段落，仅仅强制换行
4.加粗 或
5.倾斜或
6…删除线
7.下划线或
8.
div是divison的缩写，表示分割，分区。span意为跨度，跨距
特点:
标签用来布局,一行可以多个小盒子
9.图像标签
titile 鼠标放在图片可以显示文字(提示) alt：图片不能正常放出显示的文字(替换)
width 宽(像素) higth 高
border 边框
特点:各个属性部分顺序,标签名与属性，属性之间均以空格分开
图像标签可以拥有多个属性，必须卸载标签名的后面
属性采取键值对的格式，即key=“value”的格式，属性=“属性值”
10.根目录:打开目录的第一层就是根目录
11.
name是为了多选一
label是为了点击文字可以选择
12.超链接标签:#
知识点
div*3 Tab生成多个div
ul>li 父子关系
div+p 并列关系
.demo$*5自增五个
div{＄}*5
外部链接
<a href=“跳转目标” target=''目标窗口的弹出方式" >文本或图像
_blank 新的窗口打开 _self还是这个窗口打开
内部链接:
不需要http://
herf=“#” 空链接
下载链接
herf=“压缩包”
锚点链接
<head>
<meta charset="UTF-8">
<title>品优购</title>
<link rel="stylesheet" href="style.css">
<style>
ul li {
color: pink;
}
</style>
</head>
<body>
<ol>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
</ol>
<ul>
<li>我是ul得到孩子</li>
<li>我是ul得到孩子</li>
<li>我是ul得到孩子</li>
</ul>
元素1 元素2{
样式声明
}
元素1和元素2中间用空格隔开
元素1是父级，元素2是子集即，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
2.子选择器:
.nav > a {
color: yellow;
}
注意>号，表示只选择亲儿子
3.并集选择器:
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
任何选择器都可以作为并集选择器的一部分
div,p{
}
用逗号分割,可以理解为div和p
4.伪类选择器:
使鼠标经过时显示颜色
a:link /选择所有为被访问的链接/
a:visited /选择所有已被访问的链接/
a:hover/选择鼠标位于其上得到链接/
a:active/选择活动链接(鼠标正在按下，还未弹起的链接)/
顺序尽量不要颠倒
因为a链接在浏览器中具有默认样式，所以我们实际工作中需要给链接单独指定样式。
我们经常这么用:
a {
color: black;
}
a:hover {
color: red;
}
focus伪类选择器:
input:focus{
background-color:red; 改变光标选中的背景色
color:red; 改变向其输入的文字的颜色
}
元素的显示模式
html元素一般分为块元素(div)和行内元素(span).
块元素:
h1-h6 p div ul ol li
1.比较霸道，自己独占一行
2.高度，宽度，内外边距都可以控制
3.宽度默认是容器(父级)的100%
4.是一个容器及盒子，里面可以放行内或者块级元素
注意:文字类的元素内不能使用块级元素
p标签主要用于存放文字，因此p里面不能放块级元素，特别是不饿能放div
同理 ，h1-h6等都是 文字类块级标签，里面也不能放其他块级元素
行内元素：
a strong b em i del s ins u span
特点:
1.相邻行内元素在一行上，一行可以显示多个
2.高、宽直接设置是无效的。
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素
链接里不能再放链接
a可以放块级元素，但是给转换下会计模式最安全
- 行内元素转化为块内元素:display:block;
- 块内元素转化为行内元素:display:inline
- 转成行内块display:iniline-block
垂直居中的解决方案:让文字的高度等于盒子的高度。
- 背景图片的好处:非常便于控制位置
- background-image:url(“路径”);
- backgrrount-repeat:平铺的方式
- repeat默认的平铺
- no-repeat 背景图像不平铺
- repeat-x沿着x平铺
- 页面元素既可以添加背景颜色和背景图片，不过图片会压住背景颜色
- background-attachment：scroll 默认为滚动
- fixed 背景图象固定
- 背景的复合型写法背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图片位置
网页布局的过程:
1.先准备好相关的网页元素，网页元素基本都是盒子Box
2.利用CSS设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容
核心本质:利用CSS摆盒子
两种引入
引入js<link rel="stylesheet" href="k.css"> 引入css
边框
solid 实线边框
dashed 长虚线边框
dotted 点边框
hidden 隐藏
border:1px solid red;没有先后顺序
border: blue solid 1px;
border-top:1px solid red; border 的层叠性
border-collapse 合并边框
如果盒子本身没有指定高度和宽度，则padding不会撑大盒子
外边距可以让块级盒子水平居中，但是满足两个条件:
1.盒子必须指定了宽度
2.盒子左右的外边距都设置auto
解决边框塌陷问题:
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加oveflow:hidden
清除内外边距:
*{
padding:0;
margin:0;
}
行内元素为了照顾兼容性，尽量值设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
margin：top right bottom left(上右下左)
inline 是一行放多个
block 是一行放一个
去掉列表前的小圆点
li {
/* 去掉li前面的小圆点 */
list-style: none;
}
圆角边框
border-radius
浮动
传统网页布局的三种方式:
1.普通流
2.浮动
3.定位
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
浮动：属性用于创建浮动框，将其移动到另一边，直到左边缘或右边缘初级包含块会另一个浮动框的边缘
只有左浮或者右浮
浮动的特性:
1.浮动的元素会脱离标准流(脱标)
2.浮动的元素会一行内下那是并且元素顶部对齐
3.浮动的元素会具有行内块元素的特性
如果行内元素有了浮动，则不需要转换为块级/行内块级元素就可以直接给高度和宽度
为了约束浮动元素位置，我们网页布局一般采取的策略是:先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
使用列表时要清除内外边距
清除浮动-额外标签法
优点：通俗易懂，书写方便
缺点:添加许多无意义的标签，结构化较差
要求这个新的空标签必须是块级元素
为什么要清除浮动:1.父级没高度
2.子盒子浮动了
3.影响下面布局了，我们就应该清除浮动了
CSS属性书写顺序
1.布局定位属性
2.自身属性
3.文本属性
4.其他属性
实际开发时的小技巧
- 实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法
定位
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
知识点
- resize:none;使文本框不能拖拽
- outline:0;去除表单轮廓
单行超出省略号显示
white-space:nowrap;强制不换行
overflow:hidden;隐藏溢出的
text-overflow:ellipsis;结尾省略号显示
多行省略号显示
初始化
section div:nth-child(1){}
nth-child会把所有的盒子都排列序号，执行的时候首先看:nth-child(1)之后看 前面div(先把第一i个选出来，再看匹不匹配)
section div:nth-of-type(1)会把指定的元素的盒子排列序号，在选择第一个孩子权重为12{：nth-of-type(1)10 div 1 section 1 12=10+1+1}
类选择器ii，属性选择器,伪类选择器权重都是10
- ul li:first-child{}ul中的li的第一个
- ul li:first-child{}ul中li的第一个
- ul li:nth-chil(n)ul中li的第n个 //n可以是数字，关键字和公式 even 偶数odd 奇数
- n+5从第五个开始（包含的第五个）到最后
- -n+5前五个(包含第五个)
**
**
trnsform不会影响其他盒子位置
扫一扫
5046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
