html:
标记语言：
html
特点：
只能被读取
本身不具有行为能力和逻辑能力
<div>1+1</div>
脚本语言：
javascript
本身具有逻辑能力和行为能力
需要解析执行：
需要js的解析器
console.log(1+1);//2
编译语言：
java
本身具有逻辑能力和行为能力
需要编译运行
.java-->.class
system.out.print(1+1);//2
css:
层叠样式表
1.什么是css？
美化html的
不能脱离html而单独存在
html:
<head>
link
</head>
<body>
</body>
2.语法
1.
key:value;
key1:value1;
选择器{
key:value;
key1:value1;
}
2.注释
/**/
3.速记写法
border
border-image
padding
margin
backgorund
list-style：
list-style-image
list-style-type
list-style-position
3.html中引入css
1.行内样式
style属性
2.内联样式
style标签中
3.外部引入
建议：link标签
@import url()
优先级：
行内样式》内联样式=外部引入
4.选择器
标签选择器
id
#one
class:
.one
普遍选择器：
*
后代选择器：
>
空格
兄弟选择器：
+
~
多选择器：
逗号
div,#one,.two{
}
组合选择器
div#one
div.one
属性选择器：
[class]
[class='one']
[class*='one']
[class^='one']
[class$='one']
[class~='one']
伪类：
:伪类名称
div:first-child
:last-child
:nth-child(number/odd/even)
:first-of-type
:hover
:active
:link
:visited
link->visited->hover->active
伪元素：
::伪元素名称
<div>hello</div>
div::first-letter{
}
::first-letter
::first-line
::seclection
::before
::after
content:''/url()
div::after{
content:'world'
}
5.选择器优先级
特性值：
style属性：1000
id：100
class/伪类/属性：10
元素/伪元素：1
特性值越大，优先级越高；特性值相同时，越靠下的优先级越高
!important:不计入特性值的计算
6.文本样式
color
font-size
font-weight
font-family
text-
word-
....
网络字体：
1.下载网络字体
2.声明字体
@font-face{
font-family:''
}
3.使用字体
div{
font-family:''
}
字体图标库：
fontawesome：
<i class='fa fa-xxx'></i>
iconfont
iconfont.css:
xxx{}
xxx{}
<i class='iconfont xxx'></i>
html：
i
span
7.列表样式
list-style:
line-height
8.表格样式:
caption-side:
border-collapse
width
height
color
9.盒子样式:
content+padding+border+margin
box-sizing:content-box/border-box
盒子宽度=content+padding+border
标准盒子：
height
width-->content
边框盒子：
width-->盒子宽度
背景：
background:
-color
-image
-size
-repeat
-clip
-origin
-position
-attachment
边框：
border:
border-image:
10.布局
默认文档流：
从上到下
从左到右
布局规则：
先进行行级布局，再进行列级布局
1》display
inline
block
inline-block
2〉浮动
float：left/right
特点：
不会遮盖文字
设置给块级元素时，块级元素的宽度不会独占一行
设置给行内元素：可以设置宽高属性
<article>
<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>
</article>
清除浮动：
clear:left/right/both
1.给浮动元素和非浮动元素之间手动添加一个块级元素
2.通过伪元素选择器，给所有浮动元素的父级元素使用:after{
content:'';
display:block;
clear:left
}
浮动何时停止？
1.遇到父元素边框停止浮动
2.遇到其他浮动元素时停止浮动
3>定位布局
position:
static：静态布局
absolute:绝对定位:
特点：
1.默认脱离文档流
2.不保留定位前空间
3.默认情况下，绝对定位元素根据body左上角进行定位
4.当父元素具有定位属性时，子元素根据父元素左上角进行定位
relative:相对定位
特点：
1.根据元素本身所在的位置进行定位
2.不脱离默认文档流
3.保留定位前空间
fixed:固定定位
特点和绝对定位相似
使用了固定定位的元素，不会随着滚动条的滚动而滚动
sticky:粘滞定位
relative+fixed
配合属性：
left
top
right
bottom
外边距合并问题：
父子级：
1.给父元素添加边框属性
2.将本应该设置给子元素的margin设置给父元素的padding
3.给父级或者子级添加float属性
4.给父级或者子级添加position: absolute;
5.给父元素或者子元素添加display: inline-block;
6.给父级元素添加overflow: hidden;
25万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
