html5+css3设计模式
1 简化的css
-
css基础
45个常用的CSS属性+4中元素（行内，行内块级，块式，表格）+5中定位思想（静态，相对，绝对，固定，浮动）形成多种多样的设计模式。小技巧：在属性名称之前加1（或任意字符），可以禁用一个规则，这种规则失效只针对一种规则，用来调试。如1background-color：white。
-
CSS常用属性：
display margin text-indent
visibility margin-left text-align
float margin-right margin-top color
clear margin-bottom font
position border font-family
z-index border-left font-size
overflow border-left-color font-style
border-left-width font-variant
border-left-style font-weight
left border-right text-decoration
right border-right-color text-transform
width border-right-width
min-width border-right-style vertical-align
max-width border-top line-height
top border-top-color white-space
bottom border-top-width word-spacing
height border-top-style etter-spacing
min-height border-bottom direction
max-height border-bottom-color unicode-bidi
border-bottom-width
border-bottom-style
padding list-style
padding-left list-style-type
padding-right list-style-position
padding-bottom list-style-image
background table-layout
background-color
background-image page-break-after
background-repeat page-break-before
background-position
- css常用属性与值
html文档声明
文档声明（doctype）:文档声明用来告诉浏览器当前网页的版本，html5的文档声明<!doctype html></DOCTYPE HTML>
字符编码
所有的数据在计算机中存储时都是以二进制形式存储，文字也是，所以一段文字存储在内存中时都需要转换为二进制编码，当我们读取这段文字时，计算机也会将编码为字符
编码：将字符转换为二进制码的过程称为编码
解码：将二进制码转换为字符的过程称为解码
乱码问题：如果编码和解码所采用的字符集不同就会出现乱码现象
字符集：ASCII ; ISO88951 ;GBK;UTF-8开发时使用的字符集是UTF-8
meta标签
meta标签设置网页中的一些元数据
charset 设置网页的字符集
name 设置数据的名称
content 指定的数据内容
kerywords 表示网页的关键字，可以同时指定多个关键字，逗号隔开
description 指定网页的描述，网页的描述会显示在搜索引擎的结果中
title 标签的内容作为搜索结果的超链接上的文字显示
<meta name="keywords" content="购物，商品">
<mete name="description" contnet="购物网站">
<title>购物平台</title>
行内元素和块元素
块元素：网页中通过块元素对页面进行布局
行内元素：行内元素主要用来包裹文字
一般情况块元素中放行元素，不会在行内元素中放块元素；p 元素不能出现任何块元素
文档流
网页是一个多层的结构，一层摞着一层，通过css可以分别为每一层设置样式，用户只能看到最顶上一层，最底下一层称为文档流，文档流是网页的基础，所创建的元素默认都是在文档流中进行排列
元素主要有两个状态：在文档流中 ，不在文档流中（脱落文档流）
元素在文档流中有什么特点：
块元素：块元素页面中独占一行（自上向下垂直排列），默认宽度是父元素的全部（会把父元素撑满），默认高度是被内容撑开（子元素）
行内元素：行内元素不会独占页面一行，只占自身的大小；行内元素在页面中左向右水平排列，如果一行不能放满字段放到第二行， 行内元素默认宽度和高度是被内容撑开
盒子模型
css将页面中的所有元素都设置为一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子放到不同的位置
每一个盒子由内容区content、内边距padding、边距border、外边距margin
内容区content：
元素中所有的子元素和文本内容都在内容中排列
内容区的大小由width和height两个属性设置
width：设置内容的宽度
height：设置内容区的高度
边框border：
边框属于盒子边缘，边框里边属于盒子内容，出了边框都是盒子的外部
border-width： 边框的宽度
border-color： 边距的颜色
border-style：边框的样式
border-widht可以指定四个方向的边框的宽度
四个值： 上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
除了border-width还可以border-xxx-width,xxx可以是 top right bottom left来单独指定某一个变的宽度
border-style:指定边框的样式,默认值为none，没有边框
solid:表示实线 dotted:点状虚线 dashed:虚线 bouble:双线
border简写：border：10px red solid
内边距padding:
内容区和边框之间的距离是内边距，一同有四个方向的边距
padding-top padding-right padding-bottom padding-left
内边距的设置会影响到盒子的大小，北京颜色会延伸到内边距上
盒子的可见大小有 内容区 内边距 和边距共同决定，计算盒子大小是要将三个区域一起计算
外边距margin：
外边距不会影响盒子可见大小，影响盒子的位置，有四个方向边距：
margin-top: 上外边距，设置一正值，元素往下移动
margin-right:
margin-bottom: 下外边距，设置一正值，其下边元素往下移动
margin-left: 左外边距，设置一正值，元素往右移动
元素水平方向的布局：
元素在其父元素水平方向的位置由以下几个属性共同决定的
margin-left boder-left padding-left width padding-right boder-right margin-right
一个元素在其父元素中，水平布局比较满足以下的等式
margin-left+boder-left+padding-left+width+padding-right+boder-right+margin-right = 其父元素内容区的宽度
如果7个值中没auto情况，则浏览器会自动调整margin-right值使等式满足
width、margin-left、margi-right如果某个值为auto，则自动调整为auto的那个值使等式成立
0+0+0+ auto+0+0+0 = 800 则auto=800
auto+0+0+200+0+0+200=800 则auto=400
如果将一个宽度和一个外边距设置为auto，则跨度调整到最大，设置auto外边距会自动为0
如果三个值都设置为auto，这外边距都是0，宽度最大
如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值，利用这个特点使一个元素在其父元素中水平居中
示例： width:300px; margin:0 auto
外边距的折叠：
垂直外边距的重叠（折叠）：
相邻的垂直方向外边距会发生重叠现象
- 兄弟元素：兄弟元素间的相邻垂直外边距会取两者之间的较大值（都同为正值）
兄弟元素的特殊情况： 如果相邻的外边距都是负值，则取两者中绝对值较大的；如果相邻的外边距一正一负，则取两则的和， 兄弟元素之间的外边距的重叠对开发有利的，所有不需要处理 - 父子元素：父子元素间相邻外边距，子元素会传递给父元素（上边距），父子外边距的折叠会影响页面的布局需要处理
行内元素的盒模型：
行内元素不支持设置宽度和高度
行内元素可以设置padding，垂直方向padding不会影响页面的布局
行内元素可以设置border，垂直方向border不会影响页面的布局
行内元素可以设置margin，垂直方向margin不会影响页面的布局
display 设置元素显示的类型，可选值
inline ：将元素设置为行内元素
block：将元素设置为块元素
inline-block：将元素设置为行内块元素，行内块可以设置宽度和高度又不会独占一行
table：元素设置为一个表格
none：元素不在页面中显示
visibility 用来设置元素的显示状态
visible：默认值，元素在页面中正常显示
hidden：元素在页面中隐藏，不显示，但是依然占据页面的位置
盒子的大小
默认情况下，盒子可见框的大小由内容区、内边距、和边框共同决定
box-sizing:用来设置盒子尺寸的计算方式，计算方式：
content-box 默认值，宽度和高度用来设置盒子可见框的大小
border-box 宽度和高度用来设置整个盒子可见框的大小，width、height指的是内容区、内边距、边框的总大小
浏览器默认样式
通常情况浏览器都会为元素设置一下默认样式，默认样式的存在会影响到页面布局，通常情况必须去除浏览器的默认样式。通过专门用来对浏览器的样式进行重置的。
reset.css 去除浏览器的默认样式
normalice.css 对默认样式进行统一
轮廓、阴影和圆角
box-shadow：用来设置元素的阴影效果，阴影不会影响页面布局
第一个值 水平偏移量 设置阴影的水平位置 正值向右移动，负值向左移动
第二个值 垂直偏移量 设置阴影的水平配置 正值向下移动，负值向上移动
第三个值 阴影的模糊班级
第四个值 阴影的颜色
box-shadow:0px 0px 50px rgba(0,0,0,0.3)
outline 用来设置元素的轮廓线，用法和border一样，不同点是轮廓不会应用可见框的大小
outline:10px red solid
border-radius 用来设置圆角 圆角设置的是圆的半径大小
border-top-left-radius border-top-right-radius
border-bottom-left-radius border-bottom-right-radius
border-raduis 可以指定四个角的圆角
四个值 左上 右上 右下 左下
三个值 左上 右上/左下 右下
两个值 左上/右下 右上 /左下
浮动
使用float 属性设置元素的浮动，通过浮动可以使一个元素向其父元素的左侧和右侧移动；可选择
none 默认值，不浮动
left 元素左浮动
right 元素右移动
注意：元素设置浮动以后，水平布局的等式便不需要强制成立，元素设置浮动以后会完全从否文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动。浮动的目的水平方向的布局
浮动的特点：
1.浮动元素会完全脱离文档流，不在占据文档流中的位置
2、设置浮动以后元素会向父元素的左侧或右侧移动
3、浮动元素默认不会从父元素中移除
4、浮动元素向左移动或者向右移动时不会超过它前边的其它浮动元素
5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
元素设置浮动以后，从文档中脱离，元素的一些特点发生改变
脱离文档流后的特点：
块元素： 块元素不会独占一行； 脱离文档流后，块元素的宽度和高度默认被内容撑开。
行内元素：行内元素脱离文档流后变成块元素，特点和块元素一样，可以设置宽高。
脱离文档流后不区分块和行内
.box1{
widht:200px;
height:200px;
background-color:red;
float:left;
}
<div class=box1></div
<p>dsljdlsjfjsl</p
高度塌陷和BFC
浮动布局中，父元素box1的高度默认被子元素撑开，当子元素浮动后，子元素会从文档流中脱离，将会无法撑起付元素的高度，导致父元素的高度丢失。父元素高度丢失后，其下面的元素会自动上移，导致页面布局混乱， 高度塌陷是一个常见的问题，需要解决。
BFC:块级格式化环境。BFC是一个css中一个隐含的属性，可以为元素开启BFC，开启BFC后该元素会变成一个独立的布局区域。
开启BFC后的特点：
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素子元素和父元素外边距不会重叠
开启BFC的元素可以保护浮动的子元素
开启方式：
1、设置元素的浮动（float:left 宽度被内容撑开，不推荐）
2、将元素实设置为行内块元素（display:inline-bloc k宽度没有，不推荐）
3、将元素的overflow设置为一个非visible （常用方式，设置overflow：hidden 开启BFC）
<style>
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 200px;
background-color: pink;
float: left;
}
.box3{
width: 200px;
height:300px;
background-color: yellow;
}
</style>
<div class="box1">
<div class="box2">ssf</div>
</div>
<div class="box3"></div>
clear，after解决高度塌陷
clear：如果不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响
clear：
作用：清除浮动元素对当前元素所产生的影响
可选值：
left: 清除左侧浮动元素对当前所产生的影响
right: 清除左侧浮动元素对当前所产生的影响
both: 清除两则中最大影响的那一侧
原理：设置清除浮动以后，浏览器会自动为元素加一个上边距，以使其位置不受其他元素的影响
after：
<style>
.box1{
border: 1px solid red;
}
.box2{
width: 100px; height: 200px; background-color: pink;
float: left;
}
.box1::after{
// 通过after伪类 ，元素的最后清除，解决了box1高度塌陷的问题
content: '';
display:block; // 转换为一个块元素
clear:both;
}
</style>
<div class="box1">
<div class="box2">ssf</div>
</div>
clearfix: 这个样式可以同时解决高度塌陷和外边距重叠的问题。
.clearfix::before,.clearfix::after{
content: '';
display:table;
clear:both;
}
<div class='box1 clerafix>
<div class='box2'></div>
</div>
定位
定位position：定义是一种高级的布局手段，通过定位可以将元素摆放到页面的任意位置，使用position属性设置定位：
可选值：
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
relative 相对定位的特点：
1、元素开启相对定位后，如果不设置偏移量元素不会发生任何的变化
2、相对定位是参照元素在文档流中的位置进行定位的
3、相对定位会提示元素的层级
4、相对定位不会使元素脱离文档流
5、相对定位不会改变元素的性质，块是块，行内是行内
absolute 绝对定位的特点：
1、开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2、开启绝对定位后，元素会从文档流中脱离
3、绝对定位会改变元素的性质，行内变快，块的高度被内容撑开
4、绝对定位会使元素提示一个层级
5、绝对定位元素是相对于其包含块进行定位的
包含块： 包含块就是离当前元素最近的祖先块元素。
绝对定位的包含块：包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素就是它的包含块。 html根元素、初始包含块
fixed 固定定位，固定定位也是一种绝对定位，所有固定定位的大部分特点和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位
偏移量：元素定位以后，通过偏移量设置元素的位置。
top: 定位元素和定位位置上边的距离
bottom： 定位元素和定位位置下边的距离
定位元素垂直方向的位置，由top和bottom两个属性控制，通常会使用其中之一。top值越大，定位元素越向下移动，bottom值越大，定位元素越向上移动
left： 定位元素和定位位置的左侧距离
right： 定位元素和定位位置的右侧距离
定位元素水平方向的位置有left和right属性控制，通常使用其中之一。left越大元素越靠右，right越大元素越靠做
绝对定位元素位置
水平布局：
left+ margin-left+boder-left+padding-left+width+padding-right+boder-right+margin-right +right= 包含区内容块的宽度
开启绝对定位后：水平方向的布局添加left和right两个值。
当发生过度约束：如果9个值中没有 auto ，则自动调整right值使等式满足条件；如果后auto，则自动调整auto的值使等式满足
设auto的值有：margin right width left ,因为left和right的值默认是auto，所以如果不知道left 和right，则等式不满足时会自动调整这两个值。
.box1{
width:500px;
height:500px;
position:relative
}
.box2{
width:200px;
height:200px;
position:absolute
//水平垂直,box2会变成水平居中
margin-left:auto;
margin-right:auto;
left:0pxx;
right:0px
}
<div class='box1>
<div class='box2'></div>
</div>
元素的层级
定义开启了定位元素，可以通过z-index属性来指定元素的层级。
z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示；如果元素的层级一样，则优先显示靠下的元素。祖先元素的层级再高也不会盖住后代元素
字体
字符相关的样式
color 设置字体颜色
font-size 字体的大小，font-size相关的单位em，rem
font-family 字体族（字体的格式）
可选值：
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
指定字体的类别，浏览器会自动使用该类别下的字体
font-family 可以同时指定多个字体，多个字体间使用,分隔，字体生效优先使用第一个，第一个无法使用则使用第二个，以此类推
问题：加载速度，版权，字体格式
@font-face{
font-fmily:'myfont' //指定字体的名字
src:url('./font/regular.ttf') //服务器中字体的路径
}
图标字符
在网页中经常使用一些图标，可以通过图片引入，当时图片大小本身较大，并且不灵活。所以在使用图标时，我们还可以将图标直接设置为字体图标，然后通过font-face的形式将字体引入，可以通过字体的形式来使用图片
行高
行高：行高值的是文字占用的实际高度，可以通过line-height设置行高，行高可以指定一个大小（px em）；也可以为行高设置一个整数，如果是一个整数则行高是字体的指定倍数
行高经常还用来设置字体的行间距，行间距=行高-字体大小
字体框：字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度，行高会在字体框的上下平均分配。
font
font 可以设置字体相关的所有属性
font:字体大小/行高 字体族，行高省略不写使用的是默认值
font-weight 字重,
可选值： normal默认值不加粗；bold 加粗,100-900九个级别（用得少）
font-style字体风格 normal正常的 italic斜体
文本水平和垂直
text-align文本的水平对齐
可选值：
left 左侧对齐
right 右侧对齐
center 居中对齐
justify 两端对齐
vertical-align：设置元素垂直对齐的方式
baseline 默认值基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
text-decoration 设置文本修饰符
none： 什么都没有
underline 下划线
line-through 删除线
overline 上划线
white-space 设置网页如何处理空白
normal 正常
nowrap 不换行
pre 保留空白
//超过宽度的文字省略号显示
width:200px;
overflow:hidden; //隐藏
white-space:nowrap;
text-overflow:ellipsit; //省略号
背景图片
图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的，用则加载不用则不加载
解决图片闪烁的问题：可以将多个小图片统一保存到一张大图中，通过调整background-position来显示图片，这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题，这个技术在网页中应用十分广泛，成为css-sprite这种图称为雪碧图。
雪碧图特定：一次性将多个图片加载进页面，降低请求的次数，加快访问的速度，提示用户的体验
雪碧图的使用步骤：
1、确定要使用的图标
2、测量图标的大小
3、根据测量结果创建元素
4、将雪碧图设置为元素的背景图
5、设置一个偏移量以显示正确的图片
background-color: 设置背景颜色
background-image 设置背景图片
可以同时设置背景图片和背景颜色，这样背景颜色会成为图片的背景色
如果背景的图片小于元素，则背景图片会自动在元素中平铺填满
如果背景图片大于元素，则会将一部分背景图片无法完全显示
如果背景图片和元素一样大，则正常显示
background-repeat： 用来设置背景的重复方式
repeat 默认值，沿x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复
background-positon 设置背景图片的位置
可以通过top left right bottom center 几个表示方位的词来设置背景图片位置，方位词必须同时指定两个值，如果只写一个则第二个默认就是center
通过偏移量设置背景图片位置，水平方向平偏移量、垂直方向偏移量
background-clip:设置背景的范围
border-box 默认值，背景会出现在边框的下边
padding-box 背景不会出现在边框，只出现在内容去和内边距
content-box 背景只会出现在内容区
background-origin 背景图片的偏移量计算的原点
padding-box：默认值，background-position从内边距开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的偏移量从边框处开始计算
background-size：设置图片的大小
第一个值宽度，第二值高度，如果只写一个则第二个默认auto
cover： 图片的比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示
background-attachment： 背景图片是否跟随元素移动
scroll 默认值，背景图片跟随元素移动
fixed 背景会固定在页面中，不会随元素移动
background 背景相关的简写属性，所有背景相关的样式都可以通过该样式设置，没有顺序要求；
background注意：background-size必须写在background-position的后面并使用/隔开 background-position/background-size；background-origin background-clip,orgin在clip的前边
backgound-color:red;
backgound-image: url("./img/1.png");
backgound-repeat:no-repeat;
backgound-position:top center;
backgound-positon: 100px 200px;
5650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
