目录
*子盒子中设置margin-top导致父亲盒子也往下移动，从而设置不了
css知识归纳
层叠样式表，css表现
为什么将css和html分离？
- 将内容和表现分离，使页面布局更加灵活
- 减少网页代码，增加浏览器速度，节省网络带宽
- 独立页面的css，有利于网页被引擎收录
css引入方式
行内样式
在标签类添加style属性
示例：
<div style='color:blue'></div>
内嵌方式
在head标签内添加一个style标签
示例：
<!doctype html>
<html>
<head>
<meta charset="utf8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签！</p>
</body>
</html>
外联样式表
1.链接式
用link标签连接一个*.css文件
示例：
<link rel="stylesheet" href="index.css">
2.导入式
用@import url()方式
@import url()必须写在文件最开始的位置。
示例：
@import url(other.css)
两者区别：
1.link属于XHTML,@import属于css2.1(对不兼容css2.1的浏览器无效)
2.用link连接的网页先加载css，用@import导入的css文件，先加载html再加载css
css注释
/*这是注释*/
选择器介绍
主要用于选择标签对象，以设置样式或者脚本。比如第一个例子，标签选择器选择p标签，则html中所有p标签都会被选择
统一设置样式——字体颜色为红色
基本选择器：标签选择器，类选择器，id选择器，通用选择器
高级选择器：并集选择器，交集选择器，后代选择器，子元素选择器，属性选择器
详细介绍
标签选择器
选择所有是该标签的对象，直接写标签名
示例：
p {
color: red;
}
类选择器
选择class属性相同的标题,类名前面要加点.
示例：
.cl {
color: red;
}
id选择器
选择id属性的标签，id名前面加#
示例：
#i1 {
color: red;
}
通用选择器
设置所有标签格式，用*表示
*{
color: red;
}注意：
- 一个标签可以有多个类，一个类可以属于多个标签（多对多关系）
- 一个标签只能有一个id，一个id只能属于一个标签（一对一关系）
后代选择器
可以选择该标签里面所有符合条件的标签，父标签与后代标签用空格隔开
示例：
div p{
color:red;
}解释：选择所有div标签下，也包括子元素中嵌套的p标签
儿子选择器
只选择直接子元素，父标签与子标签用>
示例：
div>p{
color:red;
}解释：只在所有div下面找p标签，不包括div下面子元素中嵌套的p标签
并集选择器（分组选择器）
只要满足其中一个条件就生效，两标签用逗号,隔开
示例：
div,p{
color:red;
}
交集选择器
必须同时满足多个条件
示例：
div#wrapper{
color:red;
}解释：选择器1选择器2 没有加空格，两个选择器直接连接在一起。该标签是div标签且id名为wrapper才生效。
毗邻选择器
找到所有紧挨在div后面的第一个p标签
示例：
div+p {
color: red;
}
弟弟选择器
示例：
找到所有div标签后面同级的p标签
div~p {
color: red;
}注意：基本选择器和高级选择器可以混合使用例如上例所述，
交集选择器可以是多个不同的id，class，标签名。。。
属性选择器
根据属性查找
示例一：
将含该属性的标签字体设置为红色
[title] {
color: red;
}
示例二：
将该属性等于hello的标签字体设置为红色
[title="hello"] {
color: red;
}
同理，也可以用^=,$=,*=,~=代表以hello开头/结尾/字符串包含/多个title属性中一个为hello
示例：
input[type="text"] {
backgroundcolor: red;
}
伪类选择器
1.用在超链接上
示例一：
a:link{
color:blue
}没有访问超链接时，超链接为蓝色
同理，可以设置visited,hover,active分别代表访问过/鼠标悬浮/点击瞬间时超链接的样式
2.选择特点元素
first-child：选中第一个元素
last-child：选中最后一个元素
nth-child()：选中当前指定的元素，索引从0开始
0代表没有选中，若索引为n，则代表选中全部child；
索引为2n时代表选中所有偶数的child
索引为2n-1代表选中所有奇数的child
索引为4n+1，隔三换一，为3n+1时，隔二换一
伪元素选择器
示例一：
p:first-letter {
font-size: 48px;
}选择p标签中第一个文字，设置字体大小为48px
示例二：
p:before {
content: "*";
color: red;
}在p标签前面插入颜色为红色的*
示例三：
p:after {
content: "?";
color: red;
}在p标签后面插入?颜色为红色
注意：这个after用的很频繁，主要用在清除浮动上
选择器优先级
权重优先顺序：id选择器 类选择器 标签选择器
选择器特点：继承性，重叠性
继承性
子类可以继承部分父类的属性
可继承的属性：color.font-*.text-*.line-*
像一些布局的盒子元素，定位的元素（浮动，绝对定位，固定定位）是不能继承。
background-color属性是不能继承的(因为默认子级标签是透明色，所以设置父级标签时，子类标签也是红色)
层叠性
设置相同的属性时（权重相同），以后设置的为准
注意：
1.继承来的属性权重为0；都是继承来的属性，以选择器描述靠近标签的为准
2.一个标签有多个类时，而且有属性重叠时，谁最后设置就以谁为准
!import属性介绍
设置权重为无限大，但子元素继承来的权重还是0.（不推荐使用）
字体属性
这里简单介绍一些关于css的字体样式设置方法
font-family:设置标签中的字体
示例：font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif
解释：浏览器先看系统有无Microsoft Yahei字体，有则设置；没有则查看有无微软雅黑字体，依次直到遇到系统有该字体时才设置
注意：备选字体用逗号隔开。英文字体在前，中文字体在后，因为英文字体可以识别中英文，中文字体只能识别中文。中文字体一般都有对应的英文字体，如微软雅黑对应Microsoft Yahei。
若系统没有任何一个备选字体，则设置宋体
font-weight:设置标签字体的粗细
示例：font-weight:bold
注意：默认粗细为normal，可以设置bold粗体，border更粗，light更细。或者用100-900之间的数字来具体设置粗细
font-size:设置字体的大小
示例：font-size:15px
注意：默认字体大小为16px，设置字体大小时必须有单位(如px，rem，rm)。1px代表1像素大小，1rm代表一个字的宽度(具体多少像素看父盒子字体大小，父盒子16px，那么1em就代表16px)
rem只相对html或body的字体尺寸来设置（1rem相当于一个html或body的字体大小）
color:设置字体的颜色
示例：color:#666666
注意：表示字体颜色有三种方法
1.十六进制，如#ffffff,#000000，#666666
2.rgb或rgbs，如rgb(0,0,0),rgbs(255,255,0,0.5)
rbg三个值代表，红(r-red),蓝(b-blue),绿(g-green),每个值的范围[0,255]
3.颜色名,如red，blue，green
文本属性
设置一些常用的文本对齐方式
text-align:文本水平对齐方式
示例：text-align:center （常用来设置文本水平居中对齐）
注意：可以设置的属性有left/right/center/justify，分别代表水平靠左/水平靠右/水平居中/两端对齐
text-decoration:设置文字装饰
示例：text-decoration:none（常用来取消超链接文字默认的下划线）
注意：可以设置的属性有none/underline/overline/line-through/inherit，分别代表默认文本样式/下划线/上划线/删除线（一般删除线直接用<del></del>）/继承父元素的该条属性
text-index:设置缩进，相当于首行缩进
示例：text-index:2em（首行缩进2的字）
注意：一般不用px，使用em
line-height:设置行高
示例：line-height:16px（常用行高=字体大小设置单行垂直对齐）
注意：行高必须大于字体大小，行高也可以使用百分比，100%代表行高=字体大小
文本和字体综合设置
示例:font:14px/30px "宋体";
解释：字体大小/行高 字体样式
常用文字对齐方法
text-align:center
line-height:100% 或者line-height:16px(具体内容高度)
使文字垂直水平居中
背景的属性
设置标签的背景
background-color:设置背景颜色
示例：background-color:red;
注意：背景设置颜色不仅可以用十六进制，直接输入单词，用rbg表示；还有可以用rbga
rbga(255,255,0,0.5):前三个数和rgb中三个数意义一样，最后一个数代表透明度
background-image:设置背景图片
示例：background-image:url(./bobo.jpg)
注意：url中的地址可以是网络地址，也可以是本地地址
background-size:设置背景图片的属性
示例：background-size: 300px 300px
注意：两个值分别代表长宽
background-repeat:设置当图片尺寸小于盒子尺寸时，是否重复图片
示例：background-repeat: no-repeat;
注意：可选repeat/no-repeat/repeat-x/repeat-y,分别代表平铺/不平铺/x轴方向平铺/y轴方向平铺
background-attachment:设置背景是否随着浏览器滚动而滚动
示例：background-attachment:fixed
注意：可以设置scroll/fixed/inherit，分别代表默认值，背景图像会随着页面其余部分的滚动而移动/图片不随页面滚动而滚动/继承父类的属性
background-position:规定图片的位置
注意：有如下三种方法
第一种方法：设置水平方向，垂直方向。
示例：background-position:top left
可以设置的值有top/bottom/left/right,分别代表上下左右四个方法
第二种方法：设置 x% y%
示例：background-position:50% 50%
x,y取值范围[0,100],x为0时代表最左端,y为0时代表最右端
第三种方法：用字体大小方法 xpos ypos
示例：background-position:60px 150px
设置水平垂直方向，单位可以是px,em,rem。该种方法和第二种方法可以混合使用
注意：背景有白色背景的图片，用img会显示白色背景，换做div盒子+调整白色盒子背景就OK
未写完的部分：
1.css精灵图
盒模型
在前端中，css+div是一个很重要的模型
如图
盒子分为内容content、padding内边距、边框border、外边距margin；
注意：盒子真实大小是内容部分+内边距+边框。也就是说盒子背景会填充内边距部分，
不会填充外边距，但是外边距也属于盒子的一部分，这部分会以空白显示
内容部分content
主要指内容的长和宽，具体属性有height,宽width。
padding内边距
主要指边框到内容的距离，可以设置上下左右四个方向
具体设置方法有四种
示例一：padding:10px 15px 20px 30px
解释：设置上边距，右边距，下边距，左边距（逆时针）
示例二：padding:10px 15px 20px
解释：设置上边距，左右边距，下边距
示例三：padding:10px 15px
解释：设置上下边距，左右边距
示例四：padding:10px
解释：设置上下左右边距
border设置
设置边框粗细、线型、颜色
可以设置指定方向的边框样式，示例：border-top-width、border-left-style
值为none或者0时，代表不设置该样式
border-width:设置边框粗细
示例：border-width:3px
border-radius:设置边框角度（设置后，边框成圆角）
示例：border-radius:3px
border-style:设置边框样式
示例:border-style:solid
注意：还可以设置dotted、dashed、solid，分别代表点状虚线边框、矩形虚线边框、实线边框
同理，也可以设置border-color
总结：一般直接使用如border:5px solid blue;整体设置。通过设置内边距来调整内容在盒子中的位置
margin外边距
指该标签与标签之间的距离
示例：margin:0 auto（常用于使盒子水平居中）
注意：外边框也能设置四个方向，设置方法和padding一样
0代表靠边，auto代表居中
margin用法
margin：0 auto盒子水平居中
等价于
margin-left:auto
margin-right:auto
注意：必须设置宽度时，才可以设置margin：0 auto。只有标准流下的盒子才能这样设置，盒子浮动，固定定位绝对定位也不能使用
*margin垂直方向塌陷问题
当上下两个盒子同时设置垂直方向的margin，则两盒子之间的距离以较大的为准，这种现象叫塌陷
例如：box1，box2,为上下两个相邻盒子，box1的margin-bottom为20px，box2margin-top为50px，即两个标签的距离是50px，则两盒子距离是50px
注意：垂直方向出这个问题，水平方法不会出这个问题
*子盒子中设置margin-top导致父亲盒子也往下移动，从而设置不了
原因：父亲没有border
解决方法：设置border或使用父亲的padding
通常设置父盒子和子盒子之间距离时采用padding而不是margin
清除页面padding、margin（常用）
*{
padding:0;
margin:0;
}
display属性
display属性可以设置元素的类型，可以设置block/inline/inline-block/none,分别代表块级元素、行内元素、行内块元素、无
作用：控制元素的显示和隐藏，块级元素和行内元素转换
注意：当设置为none时，元素隐藏。
display:none和visibility:hidden有什么区别呢？
display:none隐藏标签后，不占用页面空间，而visibility:hidden方式隐藏标签后，原来标签地方显示空白，占用标签
未完成的部分
3.倒三角示例
标准文档流
web网页制作是以流的方式，从上到下
分别有以下几种特点：
1.空白折叠现象
2.高矮不齐，底端对齐（当图片或文字大小不相同时，底部保持对齐）
3.自动换行（文字太多时，多出的文字自动换到下一行）
浮动
通过设置浮动，可以使标签并排显示。浮动的元素脱标、互相贴靠、有字围效果、紧凑的效果，也能设置宽高。
设置方法：在标签样式中设置float
示例：float:left
注意：可选择left/right,分别代表左浮动/右浮动
浮动特点
脱标
浮动元素脱离标准流，如果上面盒子有浮动效果，下面没有浮动效果的盒子会挤上去，和上面盒子重合
互相贴靠
当浏览器宽度足够时，浮动的盒子之间互相贴靠；宽度不够时，紧贴在最外面的盒子会掉下去，
（注意不是直接换一行显示，而是判断该层是否有子盒子可以拖住该盒子，可以拖住，便贴在这个盒子上）
字围效果
当div浮动，p不浮动。div挡住了p(div的层级提高)，p中的文字不会被遮盖，此时就形成了字围效果。
收缩效果
一个浮动元素，如果没有设置width，那么自动收缩为文字的宽度(这和行内元素很像)
浮动元素顺序
浮动元素顺序是根据标签在html中的上下顺序决定的
总结：浮动在网页中运用很频繁，通常外层盒子不用浮动，内层盒子通过浮动效果并排显示
*清除浮动
上层盒子用浮动时，下面盒子就会挤上去，为了避免这一效果，使用清除浮动
主要两种方法
方法一：（最常用）
.clearfloat:after{
content='.';
display:block;
height:0;
clear:both;
visibilility:hidden;
}然后将clearfloat类添加在需要清除浮动的标签类中
注意：content代表添加的盒子里的内容，加入.可以防止盒子高度变成父级元素高度
方法二
在父级盒子的样式中加入overflow:hidden;
注意：overflow有visible、hidden、scroll、auto、inherit几种选项，分别代表超出部分显示、隐藏、以滚动方式显示、以滚动方式显示、继承父级盒子overflow属性
定位position
定位有三种：相对定位relative，绝对定位absolute，固定定位fixed
默认为static静态定位
相对定位
作用：微调元素的位置或决定定位的参考
特点：不脱标，形影分离，老家留坑，一般不用来做遮盖效果
不脱标：不脱离标准流
形影分离，老家留坑：原来的位置还占着（空白显示），图片已经到别处
一般用途：通常用在嵌套盒子的子盒子定位上，比如在滚动图片盒子加一个按钮，这个按钮一般都是用相对定位
绝对定位
特点：脱标，做遮盖效果，提升层级，设置绝对定位后，不区分行内元素和块级元素，都能设置宽高
绝对定位参考点：是以页面左上角为参考点来调整位置（top,left）
注意：当使用bottom来定位时，以首屏右下角为参考点，计算位置（根据浏览器大小，来确定底部位置）
浏览器滚动时，该元素也会滚动，一直保持在浏览器左下角固定位置.
一般用途：通常用在嵌套盒子的父盒子上
绝对定位盒子居中
width:960px;
position:absolute;
left:50%;
margin-left:-480px;这里设置为宽度的一半
原理：left导致盒子移动到50%处，margin-left为负，使其左移动。只要移动盒子一半就能到中间了
固定定位
固定当前的元素不会随着页面滚动而滚动
特点：1.脱标 2.提升层级 3.固定不变，不会随页面滚动而滚动
一般用途：可以做返回顶部栏、固定导航栏、小广告
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
