CSS
1、三种样式表。
优先级：行内样式表>内部样式表>外部样式表（同一标签同一属性）
//外部样式表： （强烈推荐）
//css文件夹.css文件
label //选择符
{
//声明 格式是 属性名:属性值;
attribute : attribute_value1 attribute_value2 attribute_value3;
}
//.html文件head部分
<link rel="stylesheet" type="text/css" href="css文件路径"/> //css和html一起加载
或者
<style type="text/css">
@import url("css文件路径"); //html先加载css再加载
</style>
//内部样式表：(练习推荐)
//.html文件head部分
<style>
label //选择符
{
//声明 格式是 属性名:属性值;
attribute : attribute_value1 attribute_value2 attribute_value3;
}
</style>
//行内样式表：(优先级最高)
style="attribute:attribute_value;"
2、选择器。
选择器优先级：!important>id选择器>class选择器>元素选择器
①元素选择器
标签名{属性:属性值;}
②类选择器
.class名{属性:属性值;}
<div class="class名"> //多个类名同一属性则根据css先后顺序即后面样式覆盖前面样式
③id选择器
#id名{属性:属性值;}
<div id="id名"> //id唯一
④通配选择器
*{属性:属性值;} //去掉空白符
*{margin:0;padding:0;}
⑤群组选择器
选择符1,选择符2...{属性:属性值;} //节约代码
⑥后代选择器
选择符1 选择符2 ...{属性:属性值;} //从右向左匹配
⑦伪类选择器 //注意顺序不要搞错
a:link{属性:属性值;} //超链接初始状态
a:visited{属性:属性值;} //超链接被访问状态
a:hover{属性:属性值;} //超链接鼠标移入状态 //最重要
a:active{属性:属性值;} //超链接鼠标点击状态
3、文本属性。
| 属性 | 含义 |
|---|---|
| font-size | 文本大小；单位是px；浏览器默认是16px； |
| font-family | 文本字体；字体名字有空格时加双引号；多个字体使用逗号隔开依次解析；默认微软雅黑； |
| color | 文本颜色；颜色名字：red；十六进制：#ffffff；RGB：rgb(r,g,b)； |
| font-weight | 文本加粗；数值范围100-900；bolder(更粗)/bold(加粗)/normal(常规)； |
| font-style | 文本倾斜；italic(倾斜)/oblique(更倾斜)/normal(常规)； |
| text-align | 水平居中；left(左)/center(中)/right(右)/justify(多行文本两端对齐)； |
| line-height | 文本行高；line-height=height(单行文本垂直居中)； |
| text-indent | 首行缩进；2em表示当前字体两倍即两个空格(仅对首行有效)； |
| letter-spacing | 字母间距； |
| word-spacing | 单词间距； |
| text-decoration | 文本修饰；line-through(删除线)/underline(下划线)/overline(上划线)/none(对超链接)； |
| text-transform | 大小写；capitalize(首字母大写)/lowercase(全部小写)/uppercase(全部大写)/none(无)； |
| font | 文本属性；font-style font-weight font-size/line-height font-family(五个顺序不可换)； |
4、列表属性。
| 属性 | 含义 |
|---|---|
| list-style-type | 列表样式；disc(实心圆 默认)/circle(空心圆)/square(实心方块)/none(无)； |
| list-style-image | 列表图片；url("图片路径")； |
| list-style-position | 标记位置；outside(外面 默认)/inside(里面)；使用border测试； |
| list-style | 简写；可以随意更换顺序； |
5、背景属性。
| 属性 | 含义 |
|---|---|
| background-color | 背景颜色；用法同color；rgba(r,g,b,a)；a表示透明度； |
| background-image | 背景图片；url("图片路径")； |
| background-repeat | 背景图片平铺；repeat(默认)/repeat-x/repeat-y/no-repeat； |
| background-position | 背景图片位置；px；%；单词；水平位置 垂直位置； |
| background-size | 背景图片大小；图片宽度 图片高度；cover(覆盖)/contain(包含)； |
| background-attachment | 背景图片定位；scroll(滚动)/fixed(固定)；相对浏览器窗口(没东西无法显示)； |
| background | 简写；可以随意更换顺序；background-size只能单独使用； |
注意：背景颜色是渐变的话，可以截取width为1px的对应height的图片作为背景图片，之所以1px是为了防止平铺不均匀。
6、浮动属性。
浮动属性：让竖着的元素横着排列；浮动脱离文档流则剩余的会补上原文档流；若多个均脱离文档流则从左向右从上向下节约排列。注意，浮动只影响后面的元素。
//浮动
float:left(从左向右排列)/right(从右向左排列)/none(不浮动); //加在浮动元素身上
//清除浮动
clear:left(不允许左边有浮动)/right(不允许右边有浮动)/both(不允许两边有浮动)/none; //加在被影响元素
或
给浮动元素的父元素设置高度以免子元素浮动使得父元素高度塌陷
或
在浮动元素的后面加一个空div元素并设置style属性为style="clear:both"
或
给浮动元素的父元素加上样式overflow:hidden从而引发BFC让浮动元素计算高度
7、盒子模型。
margin：外边距 //背景色会延伸到内边距以及边框而不会到外边距
padding：内边距 //一个值则四个方向一样；两个值则上下 左右；三个值则上 左右 下；四个值则顺时针上右下左；
border：边框 //格式：粗细 样式 颜色 solid/double/dashed/dotted
padding/margin/border-top/bottom/left/right
border-width/border-style/border-color
//padding不支持负值 margin支持负值
//*{padding:0;margin:0} 清空多余空白
//margin:0 auto 横向居中
1、兄弟元素垂直方向外边距取最大值，水平方向外边距会进行合并处理；
2、父子元素给子元素设置外边距则其会加在父元素上；
3、解决方法：给父元素加padding;给父元素设置border；浮动；给父元素加上样式overflow:hidden；(注意大小)
注意事项：
① css样式要使用通配符*{padding:0;margin:0}清除多余空白；
② css样式盒子模型的width和height是指的内容故当盒子模型包含边界和内边距时要重新计算宽度和高度；
③ css样式img和p不是同一种类型即img是行内块而p是块元素故两者之间有默认的3px间距如果要清除则将img转成块；
8、PS操作。
1、打开设计稿：① 文件->打开；② 图片->右键->打开方式->ps；
2、图片放大缩小：① ctrl++放大，ctrl--缩小；② alt向前滚动放大，alt向后滚动缩小；
3、图片上下左右移动：ctrl+键盘上下左右；
4、标尺：视图->标尺->按住刻度->水平线/垂直线->选区->窗口->信息->w/h->取消选区(ctrl+d)；
5、存储选区照片：选区->ctrl+c(复制)->ctrl+n(按照选区大小新建画布)->ctrl+v(粘贴)->ctrl+s(保存)；
注意：占满全屏叫做通栏，两边留白叫做版心。
9、溢出属性。
批量生成：lorem+Enter批量生成文字。
overflow:visible(溢出内容显示在元素之外)/hidden(溢出内容隐藏)/scroll(溢出内容滚动)/auto(溢出内容滚动非溢出内容正常显示)/inherit(继承父元素overflow属性);
overflow-x:x轴溢出；
overflow-y:y轴溢出；
//空余空间
white-space:normal(默认空白会被浏览器忽略)/nowrap(文本不会换行其会在同一行上继续直到遇到<br/>);
//溢出显示省略号
width:xxpx; //必须有宽度
white-space:nowrap; //强制在一行显示
overflow:hidden; //溢出内容为隐藏
text-overflow:ellipsis; //溢出文本显示为省略号
10、元素显示类型。
1、块元素。
① display:block 或者 display:list-item;
② 独占一行，可以为其设置宽度和高度；
③ p标签只能放文本，不能放其他块级元素；
2、行内元素。
① display:inline;
② 横着排列，和其他行内元素同占一行，不能为其设置高度和宽度；
③ 行内元素左右padding生效，而上下padding不生效；
3、行内块元素。
① display:inline-block;
② 横着排列，和其他行内元素同占一行，且能为其设置高度和宽度；
③ img和input元素均是行内块元素；
4、互相转换。
① 将行内块元素转换为块元素，使得行内块元素和块元素之间没有多余的空隙，尤其应用于img和p；
② 将行内元素转换为行内块元素，使得行内元素上下padding生效，尤其应用于a链接；
5、隐藏元素。
display:none; //隐藏元素，移动到元素上时再显示
11、定位属性。
position:static(按照默认文档流从上到下从左到右)/absolute(绝对定位[脱离文档流]：如果没有父元素或者父元素没有定位则相对浏览器左上角反之如果有父元素则相对父元素)/relative(相对定位[不脱离文档流]：参照自己的初始位置)/fixed(固定定位[脱离文档流]：参照浏览器的当前窗口一直不动)/sticky(粘性定位[脱离文档流]：当滑动到某一位置后达到吸顶效果)
top/bottom/left/right:xxpx;
//一般子盒子设置为absolute而父盒子设置relative(绝对定位很推荐使用)
//层次：z-index值越大层级越大越靠上显示(前提是设置了定位position)
注意：opacity表示透明度，范围是0~1。
//绝对定位的深入探索
1、父子关系：给子孩子设置负值index使得父元素在子元素上面显示；
2、兄弟关系：给第一个元素设置高z-index或者给第二个元素设置低z-index使得第一个元素在上面显示；
//如何将行内元素转换为块元素
1、display:block;
2、position:absolute;
3、float:left;
问：[脱离文档流]浮动与定位的区别？
答：float：半脱离，文字环绕效果；position：全脱离，无文字环绕效果；
// 绝对定位 且 水平垂直居中
left:50%;
margin-left:-1/2width;
right:50%;
margin-top:-1/2height;
12、精灵图。
精灵图sprite指的是将多张图片有规则的合成一张图片，然后利用background-position来实现背景图片的定位。
//图片整合的优势
1、通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度(一张图片请求一次)；
2、通过整合图片来减少图片的体积；
13、宽高自适应。
宽高自适应指的是元素的大小能够根据窗口或者子元素自动调整。
1、width(height)不写或者width(height):auto相当于自适应；(导航栏或者通栏布局一般使用自适应)
2、min-width/max-width/min-height/max-height:没内容则维持最小,内容多了则自适应撑开；
父元素不写高度时如果子元素浮动那么父元素就会高度塌陷。浮动元素的高度自适应如何解决呢？
1、给父元素指定高度；//如果浮动过多，换行，就会出现问题；
2、在父元素最后一个子元素后面加一个空盒子并清除浮动；//增加空标签，不利于代码可读性；
3、给父元素增加overflow:hidden；//文字过多的话会被截掉
4、万能清除浮动方法：(伪元素选择器) //伪类: 伪元素::
div::after{
content:""; //空元素
clear:both; //清除浮动
display:block; //转化为块元素
}
上述万一content有内容呢？解决如下：
div::after{
content:""; //空元素
clear:both; //清除浮动
display:block; //转化为块元素
width:0; //不让有宽度
height:0; //不让有高度
visibility:hidden; //让内容不可见
}
visibility:hidden; 与 display:none; 区别：
1、visibility:hidden;占位隐藏(看不见摸得着)
2、display:none;不占位隐藏(看不见摸不着)
窗口自适应指的是盒子根据窗口的大小进行改变。
html,body{
height:100%;
}
两栏布局：
html,body{
height:100%;
}
.box1{
width:200px;
height:100%;
background-color: red;
float:left; /*浮动起来*/
}
.box2{
height:100%; /*不能设置宽度使得宽度自适应*/
background-color: yellow;
margin-left: 200px; /*左边空出来box1高度*/
}
calc()函数用于动态计算长度 //运算符左右需要加上空格
html,body{
height:100%;
}
.box1{
width:200px;
height:100%;
background-color: red;
float:left; /*浮动起来*/
}
.box2{
width:calc(100% - 200px); /*宽度使用calc动态计算函数*/
height:100%;
background-color: yellow;
float:left; /*浮动起来*/
}
三栏布局：
html,body{
height:100%;
}
.left,.right{
width:200px;
height:100%;
float:left;
}
.left{
background-color: yellow;
float:left;
}
.right{
background-color: red;
float:right;
}
.center{
height:100%;
background-color: blue;
margin-left: 200px;
margin-right: 200px;
}
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
注意：浮动只影响后面的元素。
html,body{
height:100%;
}
.left,.right{
width:200px;
height:100%;
float:left;
}
.left{
background-color: yellow;
}
.right{
background-color: red;
}
.center{
width:calc(100% - 400px);
height:100%;
background-color: blue;
float:left;
}
上中下左中右自适应：
html,body{
height:100%;
}
.top,.bottom{
width: 100%;
height:50px;
background-color: darkturquoise;
}
.center{
height:calc(100% - 100px);
background-color: yellow;
}
.left,.right{
width:100px;
height: 100%;
background-color: red;
float:left;
}
.middle{
width:calc(100% - 200px);
height:100%;
background-color: blue;
float:left;
}
14、表单进阶。
1、单选框：type:radio name相同为一组则单选 checked为默选
2、多选框：type:checkbox name相同为一组则多选 label以及for="id"为点击文字也选中
3、上传文件：type:file 图片按钮type="image"代替提交按钮(其放在form中)
4、隐藏字段：type:hidden 一般包含value表示带给后端的信息
5、禁用只读：disabled表示禁用 readonly表示只读
6、下拉菜单：select元素(size控制显示几个 multiple控制多选)option选项(value表示提供给后端的值 selected表示默认选中)
7、文本区域：textarea元素 cols表示字符列 rows表示字符行 不能表示中文 内容在双标签内部 而input内容在value属性内 可以通过css给textarea设置大小 但是仍然可以在页面右下角拖动 可以通过resize重新设置大小 resize:vertical(只可垂直拖动)/horizontal(只可水平拖动)/both(水平垂直拖动)/none(不可拖动) 注意空格
8、字段集：可以使得表单边框有空隙并放置内容 fieldset元素 里面放置legend元素表示标题 下面再放input
15、共享margin-top。
所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
注意:父级元素没有padding-top或者border-top，哪怕子级元素有padding-top或者border-top，也会共享。
