常用CSS：
background-color: red; 背景色
font-size: 35px; 字体大小
font-family: ‘Microsoft YaHei’ ‘Times New Roman’, Times, serif; 字体 可以多个字体，通常给body指定
font-weight: bold; 字体加粗 最好写数字 100…900
font-style: italic; 字体倾斜 normal,让变正常
font: italic 700 16px ‘Microsoft YaHei’; 复合代码 严格按照font: font-style font-weight font-size/line-height font-family;，不需要的可以省略，必须保留font-size font-family
color: #ff0000; 文本颜色
text-align:center 文本对齐
text-decoration: underline; 文本装饰 下划线，删除线，上划线
标签选择器：p { color: green; } 全部选择
类选择器：.red { color: red; }
id选择器：#pink { color: pink; },
通配符选择器：* {}，所有标签都改
body { font-size: 16px; }，标题特殊，要给单独大小
字体复合属性：font: font-style font-weight font-size/line-height font-family;不需要的可以省略，必须保留font-size font-family
装饰文本：text-decoration: underline; line-through;overline;
将a的下划线去掉：a { text-decoration: none; }
文本首行缩进：text-indent: 20px; 两个文字：text-indent: 2em;
行间距：line-height: 26px;上间距+文本高度+下间距
CSS引入方式:
内部样式表(理论上可以放到任何地方,通常在head),
行内样式表,直接在标签里写
外部,引入css文件
div居中两边对齐:
.duiqi {
margin: auto;
width: 992px;
}
Emmet语法:
! 生成骨架
div+tab,快速生成标签
div*10
父子关系:ul>li
兄弟关系:div+p
.nav+tab 直接出来
#banner
p.one
.demo KaTeX parse error: Expected '}', got 'EOF' at end of input: …{我不喜欢男人}*5 div{} 5
快速生成CSS:简写
w100 width: 100px;
vscode自动化对其:左下角->设置->文本编辑器->格式化->Format On Save
复合选择器
后代选择器:
ol li a
.nav li a
子选择器:亲儿子元素
.nav>a
并集选择器:选择多组标签,逗号分隔,任何选择器都可以并集
div, p {
color: pink;
}
伪类选择器:用冒号表示:比如:hover,:first-child
链接伪类:
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接
/ 未访问过的链接 */
a:link {
color: #333;
text-decoration: none;
}
/* 访问过的链接 */
a:visited {
color: orange;
}
/* 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}
/* 选择鼠标正在按下,没有弹起的链接 */
a:active {
color: green;
}
确保生效:LVHA顺序 a:link a:visited a:hover a:active,记忆法LV包包hao
a标签要单独给样式,常用:先给a样式,然后a:hover.
:focus:获取焦点的表单元素,input:focus{}
元素显示模式:以什么方式进行显示.
块元素:
-
- ,
是最典型的块元素.
特点:独占一行,高宽内外边距都可控制,默认父级宽度100%,是一个容器及盒子里面可以放行内或者块元素.
注意:文字类元素内不能放块元素.
行内元素:
特点:一行可显示多个,设置高宽无效,默认宽度是本身内容的宽度,只能容纳文本和其他行内元素.
注意:链接里不能再放链接,a可以放块级元素,转换为块级最安全.
行内块元素:
特点:和相邻行内元素在一行上,之间有空隙,一行可以显示多个,默认宽度是本身内容宽度,高度行高外边距内边距都可以控制.
元素显示模式转换:
*行内转块:display:block
块转行内:display: inline;
*转为行内块:display: inline-block;
截图小工具:snipaste
小米侧边栏:
文字垂直居中,height: 40px;line-height: 40px;行高等于盒子高度
CSS的背景:既可以有图片也可以有背景颜色,图片盖住背景颜色
背景颜色:background-color
背景图片:background-image
背景平铺:background-repeat:no-repeat(默认)
*背景图片位置:background-position:x y;
方位名称:顺序不影响 background-position: center top;默认x顶部,y水平居中
精确单位:background-position: 20px 50px;//x一定是20,y一定是50
混合单位：background-position: 20px center;x，y
背景图像固定(背景附着)：background-attachment:scroll||fixed
背景复合写法：没有顺序要求，约定方式：颜色，地址，平铺，滚动，位置
background: #000 url(img/97768752390746.jpg) no-repeat fixed center top;
背景色半透明：background: rgb(0, 0, 0, 0.2);
- ,
CSS三大特性:
层叠性,就近原则
继承性,继承父亲的某些样式,和文字相关text-…
行高继承,可以不跟单位font: 12px/1.5 ‘Microsoft YaHei’;
如果div font-size: 14px;当前div行高21像素
优先级:多个选择器,!important>行内样式>ID选择器>类选择器>元素选择器>继承或者*
无穷大>1000 > 0100 > 0010 > 0001 > 0
权重叠加:实际是green
ul li {
color: green;//0,0,0,1 + 0,0,0,1 = 2
}
li {
color: red;
}
盒子模型
网页布局过程:核心本质,用CSS摆位置.
1.网页元素基本都是盒子
2.CSS设置好盒子样式,摆放到相应位置.
3.放盒子里装内容.
组成:边框,外边距,内边距,实际内容.border content padding margin
边框:
border-width: 5px;
/* 实线边框 /
border-style: solid;
/ 虚线 /
/ border-style: dashed; /
/ 点线 /
/ border-style: dotted; */
border-color: pink;
边框简写：border: 1px solid red;没有顺序
边框分开写法：
border-top: 5px solid pink;
border-bottom: 10px dashed purple;
安装eclipse快捷键，搜索Eclipse keymap
表格的细线边框,collapse倒塌 记忆技巧：col 共同 + laps 滑，滑走 + e → 一起滑落 → 倒塌
border-collapse:collapse //合并相邻的边框
内边距：padding 填充，会增大盒子，解决方法，宽高减去相应距离
padding-left: 20px; padding-top: 30px;padding:5px 10px 15px 20px 上后下左
如果盒子没有指定宽高属性，padding不会撑开盒子大小。
外边距：margin 边缘,控制盒子与盒子之间的距离
简写模式参考padding
外边距块级盒子水平居中，盒子必须指定宽度，左右外边距设置为auto:margin: auto;
行内元素和行内块，让父亲text-align: center;
外边距塌陷：父元素有上边距同时子元素也有，此时父元素会塌陷较大的外边距。
解决：
1.给父元素一个上边框border: 1px solid transparent;
2.父元素设置内边距：padding: 1px;
3.为父元素overflow: hidden;溢出
清除内外边距：
- {
padding: 0;
margin: 0;
}
行内元素尽量只设置左右的内外边距，上下不起效果
li前面的小圆点去掉: list-style: none;
圆角边框:border-radius:length;
让盒子变为圆形:border-radius: 50%;圆角矩形:宽的一半
四个角分别加:border-radius: 10px 20px 30px 40px; 左上,右上,右下,左下
分开写:border-top-left-radius:10px
盒子阴影:box-shadow:h-shadow v-shadow blur spread color inset;
水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 阴影的颜色 将外部阴影改为内部
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);
文字阴影：text-shadow:h-shadow v-shadow blur color
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
CSS浮动
传统网页布局三种方式：
CSS摆盒子，标准流(普通流/文档流)，浮动，定位。
标准流：
1.块级元素独占一行，从上到下，div,p,h1-h6,ul,ol,form,table…
2.行内元素会按照顺序，从左到右，碰到父元素边缘自动换行。span,a,i,em
多个div在同一行
行内块会有间隙
浮动float，用于创建浮动框，直到碰到边缘。
float:none,left,right
网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动。
浮动特性：
1.浮动元素会脱离标准流，脱标。不保留浮动盒子。
2.浮动的元素会一行内显示并且元素顶部对齐。每个盒子都要设置float
3.浮动的元素会具有行内块元素的特性。inline-block,行内元素也是行内块。
浮动元素经常和标准流父元素一起用，先用父元素排列上下，
再用子元素浮动左右排列。
网页布局第二准则：先设置盒子大小，之后设置盒子的位置。小米官网为例
常见网页布局：
top,banner,main,footer
浮动盒子只会压到后面的标准流,要一起浮动 74-浮动注意点.html
父盒子不给高度，让子盒子撑开。
清除浮动，父盒子不方便给高度，子盒子不占位置，父盒子变为0，影响下面的子盒子。
清除浮动元素的影响，清除浮动之后就随着子高度。clear:left,right,both
闭合浮动，只限制在父元素内。
清除浮动方法：
1.额外标签法，隔墙法。优点通俗易懂，书写方便。缺点添加无意义标签，结构差。
最后一个子元素后新增块级元素，属性clear: both;
2.给父元素添加overflow:hidden,auto,scroll
3.:after伪元素法，父盒子后加了盒子，直接复制调用。百度，网易
.clearfix::after {
content: “”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
4.双伪元素清除浮动，小米，腾讯
.clearfix::before,
.clearfix::after {
content: “”;
display: table;
}
.clearfix::after {
clear: both;
}
学成在线案例
CSS书写顺序：
布局定位：display position float clear visibility overflow
自身属性：width height margin padding border background
文本属性：color font text-decoration text-align vertical-align white-space break-word
其他属性：content cursor border-radius …
页面布局整体思路：
1.确定版心，可视区，测量可得知
2.分析行模式，以及每个行中的列模式，是页面布局第一准则。
定位，可以让盒子压住其他盒子。
定位组成：将盒子定到某个位置，也是摆盒子，按照定位方式移动盒子。
定位 = 定位模式 + 边偏移。
1.定位模式:静态 相对 绝对 固定
position: static relative absolute fixed
2.边偏移
定位的盒子移动到最终位置，有top,bottom,left,right,4个属性，到四边的偏移量。
静态定位：默认无定位，position: static
按照标准流特性摆放位置，它没有边偏移，很少用到。
相对定位：相对于原来的位置说的(自恋型)，不脱标，继续保留原理位置。
人已走，魂还在，position:relative
绝对定位：相对于祖先元素来说的(拼爹型)，position:absolute;
1.如果没有祖先元素或祖先元素没有定位，则浏览器Document为准。
2.如果祖先元素有定位(相对，绝对，固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。
3.不占用原来的位置。
子绝父相的由来，子用绝对对位，父用相对定位。
固定定位：固定于浏览器可视区位置，滚动时位置不会改变。
1.以浏览器可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动。
2.不占有原来位置。
小技巧：固定在版心右侧，left:50%,margin-left:版心宽度一半
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
left: 50%;
top: 20%;
margin-left: 400px;
width: 50px;
height: 150px;
background-color: skyblue;
}
粘性定位，sticky:相对定位和固定定位混合。
position:sticky;top:10px;
1.以浏览器可是窗口为参照点移动元素，固定定位特点。
2.占有原来位置，相对定位特点，必须添加top,left,right,bottom其中一个才有效。
定位叠放次序：z-index:1;数值越大盒子越靠上
不能加单位，只有定位盒子才有z-index属性
绝对定位水平垂直居中：
position: absolute;
/* 1.left走50% 父容器宽度的一般 /
left: 50%;
/ margin 负值 左边走自己盒子的一半 */
top: 50%;
margin-left: -100px;
margin-top: -100px;
定位特殊特性：行内元素绝对定位，可设置宽高
块级元素不设置宽高，宽高是内容宽高。
淘宝焦点图布局综合案例
1.大盒子类名：tb-promo 淘宝广告
2.里面放一张图片
3.左右两个按钮用链接，左箭头prev,右箭头next
4.底侧小圆点ul继续做，类名promo-nav
元素显示与隐藏，不再占有原来的位置。用的更多
display:none;隐藏对象
display:block;显示元素
visibility 可见性，隐藏后还占有原来位置
visibility:visible;元素可视
visibility:hidden;元素隐藏
overflow溢出，
overflow:visible;默认
overflow:hidden;超出部分隐藏，有定位超出盒子，就不要用了。
overflow:scroll;溢出的部分显示滚动条，不溢出也显示滚动条。
overflow:auto;在需要的时候添加滚动条。
P249-P259
CSS高级技巧
精灵图：有效减少服务器接收和发送的次数，提高页面加载速度，CSS精灵技术，CSS Sprites.
核心原理：将网页中的小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
使用精灵图(sprites)的使用
1.针对背景图片，多个小背景图片整合到一张大图片中。
2.background-position
字体图标:轻量级,比图像小,并不能替代精灵技术.
1.下载字体图标
icommon字库:https://icomoon.io/
阿里iconfont字库:https://www.iconfont.cn/
把下载包中得fonts文件夹放入到页面根目录下,
2.引入,打开刚才iconmmon中的style.css中复制到block.
@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?m69ae5’);
src: url(‘fonts/icomoon.eot?m69ae5#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?m69ae5’) format(‘truetype’),
url(‘fonts/icomoon.woff?m69ae5’) format(‘woff’),
url(‘fonts/icomoon.svg?m69ae5#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-display: block;
}
3.追加字体图标
把压缩包里面的selection.json重新上传，重新替换。
P266-P273
常见布局技巧：
1.margin负值的运用
float: left;margin-left: -1px;
2.文字围绕浮动元素
.pic {
float: left;
width: 200px;
height: 113px;
margin-right: 5px;
}
3.行内块的巧妙运用
4.css三角强化
属性选择器：input[value],权重10
input[type=text]
div[class^=icon]
以某些元素结尾
section[class$=data]
包含某些值就选择出来
div[class*=ico]
伪类选择器
/* 1.选择li里面的第一个孩子， */
ul li:first-child {
background-color: pink;
}
/* 最后一个孩子 */
ul li:last-child {
background-color: pink;
}
/*第n个 */
ul li:nth-child(6) {
background-color: pink;
}
/* 选择奇 odd，偶even*/
ul li:nth-child(odd) {
background-color: #ccc;
}
/* 从0开始 ,n表示所有,2n是偶数*/
ol li:nth-child(2n) {
background-color: pink;
}
ol li:nth-child(2n+1) {
background-color: skyblue;
}
品优购项目规划
整体介绍
项目名称:品优购
移动端Web开发之流式布局
p391-p402
移动端基础
浏览器
国产浏览器Webkit内核，就像手机操作系统基于Android修改开发的一样。
手机屏幕现状
分辨率越来越大，常见尺寸5,6,7英寸
移动端调试方法
谷歌浏览器模拟手机调试
搭建本地web服务器，手机和服务器同一局域网，通过手机访问服务器。
使用外网服务器，直接IP或域名访问
视口，浏览器显示页面内容的屏幕区域
分为：布局视口、视觉视口、理想视口。
布局视口layout viewport
解决了早期PC端页面在手机上显示的问题，分辨率980px，PC网页多数能呈现，字很小。
视觉视口：visual viewport
可以缩放来看
理想视口：ideal viewport
对设备来讲，最理想的视口尺寸，根据网页宽度而设定。
需要添加meta视口标签,布局视口宽度与理想视口宽度一致。
meta视口标签
完美写法，缩放1，不允许用户缩放
二倍图
准备的图片比实际大一倍
背景缩放 background-size
图片的尺寸
background-size
移动端主流方案
1.单独制作，京东，淘宝
通过打开设备判断，显示移动端。
2.响应式，三星。
移动端初始化CSS用normalize.css
box-sizing: border-box;
/* 有了这句话，盒子模型变成了css3,padding和border不会撑大盒子了 /
去除高亮
a {
-webkit-tap-highlight-color: transparent;
}
加上如下属性才能给按钮和输入框自定义样式
input {
-webkit-appearance: none;
}
禁用长按页面的弹出菜单
img,a{-webkit-touch-callout:none;}
移动端页面布局
技术选型
单独制作
流式布局(百分比布局)
通过盒子宽度设置成百分比来根据屏幕宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
移动web开发使用的比较常见的布局方式。
max-width最大宽度(max-height最大高度)
min-width最小宽度(min-height最小宽度)
案例：京东移动端首页
1.技术选型
方案：单独制作移动页面方案
技术：布局采取流式布局
设置视口标签
flex弹性布局(强烈推荐)
传统布局：兼容性好，布局繁琐，局限性，不能在移动端很好的布局
flex布局：操作方便，布局极为简单，移动端应用很广泛，PC端支持差，IE11以后不支持。
布局原理：flexible Box弹性布局，任何一个容器都可以指定为flex布局
当父元素设为flex布局以后，子元素float,clear和vertical-align属性将失效。
flex容器，flex项目，总结，给父盒子添加flex属性来控制子盒子位置和排列方式。
给父亲添加属性
flex-direction:设置主轴的方向
主轴，侧轴，也就是行和列
row row-reverse column column-reverse
水平向右，垂直向下
justify-content:设置主轴的子元素排列方式
flex-start,从头开始
flex-wrap:设置子元素是否换行
默认是不换行的 nowrap
换行wrap
align-content:设置侧轴上子元素的排列方式(多行)，单行无效
flex-start默认值在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头，再平分剩余空间
stretch设置子项元素高度平分父元素高度
align-items:设置侧轴上的子元素排列方式(单行)，多行无效
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中(垂直居中)
stretch 拉伸(默认值)
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
/ 把设置主轴方向和是否换行(换列)简写 /
flex-flow: column wrap;
子项常见属性
flex子项目占的份数，子项目分配剩余空间，flex表示占多少份数
flex: 1;
align-self控制子项自己在侧轴的排列方式
div span:nth-child(3) {
align-self: flex-end;
}
order属性定义子项的排列顺序(前后顺序)
order: -1;//默认是0,要靠前写负数
携程网移动端首页
m.ctrip.com
搭建相关文件夹结构
css,images,upload,index.html
背景线性渐变
background:linear-gradient(起始方向，颜色1，颜色2，。。。)
默认方向是上下
background: -webkit-linear-gradient(left, red, blue);
background: -webkit-linear-gradient(top left, red, blue);
less+rem+媒体查询布局
em相对于父元素字体大小来说：width: 10em;
rem适配布局
rem单位：(root em)是一个相对单位，类似于em，em是父元素字体大小。
不同的rem的基准是相对于html元素的字体大小。
比如，根元素html设置font-size=12px非根元素设置width:2rem;则换成px表示就是24px.
rem的优点就是可以通过修改html中的文字大小来改变页面元素大小
媒体查询
Media Query是CSS3新语法
使用@media查询，可以针对不同的媒体类型定义不同的样式。
@media可以针对不同的屏幕尺寸设置不同的样式。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
目前针对很多苹果手机，android手机，平板等设备都用得到多媒体查询。
语法规范
@media mediatype and|not|only (media feature) {
CSS-Code;
}
用@media开头 注意@符号
mediatype 媒体类型
all用于所有设备
print用于打印机和打印预览
screen用于电脑屏幕，平板电脑，智能手机等
关键字 and not only
and:可以将多个媒体特性连接到一起，相当于且的意思
not:排除某个媒体类型，相当于非的意思，可以省略
only:指定某个特定的媒体类型，可以省略
media feature 媒体特性 必须有小括号包含
width定义输出设备中页面可见区域的宽度
min-width定义输出设备中页面最小可见区域宽度
max-width定义输出设备中页面最大可见区域宽度
案例：根据页面宽度改变背景颜色
/ 1.媒体查询一般按照从大到小或者从小到大的顺序来 /
/ 2.小于540px 页面的背景颜色为蓝色 */
@media screen and (max-width:539px) {
body {
background-color: blue;
}
}
/* 3.540 - 970 我们的页面颜色改为绿色 and (max-width:969px) */
@media screen and (min-width:540px) {
body {
background-color: green;
}
}
/* 4.大于等于970 我们的页面颜色改为红色 */
@media screen and (min-width:970px) {
body {
background-color: red;
}
}
5.screen还有and必须带上
6.单位不能省略
案例：媒体查询+rem实现元素变化
引入资源：
Less基础
css的弊端，没有变量，函数，scope作用域等概念。
需书写大量没有逻辑的代码，冗余度较高
不方便维护拓展，不利于复用
没有很好的计算能力
非前端工程师，缺少css编写经验很难写出组织良好，易于维护的css代码项目
Leaner Style Sheets，是一门css拓展语言，也称为css预处理器。
Less中文网址：http://lesscss.cn/
常见的CSS预处理器：Sass,Less,Stylus
Less使用
Less变量
没有固定的值，可以改变的，颜色和数值经常使用。
@变量名：值；
1.变量命名规范，不能数字开头，不包含特殊符号，区分大小写
Less编译
Easy Less插件，可以直接编译。
Less嵌套
子元素直接写在父元素里面
.header {
width: 200px;
height: 200px;
background-color: pink;
a {
color: red;
}
}
伪类，伪元素，加&
a {
color: red;
&:hover {
color: blue;
}
}
Less运算，运算符左右两侧必须敲空格隔开
两个数有一个有单位，以此单位为主。
都有单位，以第一个单位为主。
@border: 5px+5;
div {
width: 200px - 50;
height: 200px * 2;
border: @border solid red;
}
img {
width: (82 / 50)rem;
height: (82 / 50)rem;
}
rem适配方案
技术方案1
less,引入其他less文件
@import url(“./common.less”);
//link是引入到html中
媒体查询
rem
技术方案2(推荐)
flexible.js
rem
响应式开发原理
针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
bootstrap
布局容器，内置container类
container-fluid，宽度100%，流式布局，占据全部视口，适合单独做移动端开发。
栅格系统：grid systems,将页面布局划分为等宽的列
不满12行，空白，超出12行，多余一列另起一行
列偏移：两边对齐
.col-md-offset-*
列排序：col-md-push-* 和 col-md-pull-*
VW/VH
相对单位，相对于视口尺寸计算结果
vm:viewport width 1/100视口宽度
vh:viewport height 1/100视口高度
FlexibleJS
要是横屏，将vw替换为vh
8023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
