CSS相关学习记录---个人笔记

页面排版先确定, 图片一般使用div包起来先,大小可以由div确定, 每一个位置可以使用div来确定大小以及位置,
float以确定div所放的位置
display: inline-block; 将当前div元素强制转换为行内元素
移动端样式,可在ionic官网中查看需要的样式使用, -webkit-overflow-scrolling: touch!important;跟着手指头一起移动

css中基本样式记录
color : #999999; /文字颜色/
font-family : 宋体,sans-serif; /文字字体/
font-size : 9pt; /文字大小/
font-style:itelic; /文字斜体/
font-variant:small-caps; /小字体/
letter-spacing : 1pt; /字间距离/
line-height : 200%; /设置行高/
font-weight:bold; /文字粗体/
vertical-align:sub; /下标字/
vertical-align:super; /上标字/
text-decoration:line-through; /加删除线/
text-decoration: overline; /加顶线/
text-decoration:underline; /加下划线/
text-decoration:none; /删除链接下划线/
text-transform : capitalize; /首字大写/
text-transform : uppercase; /英文大写/
text-transform : lowercase; /英文小写/
text-align:right; /文字右对齐/
text-align:left; /文字左对齐/
text-align:center; /文字居中对齐/
text-align:justify; /文字分散对齐/
vertical-align属性
vertical-align:top; /垂直向上对齐/
vertical-align:bottom; /垂直向下对齐/
vertical-align:middle; /垂直居中对齐/
vertical-align:text-top; /文字垂直向上对齐/
vertical-align:text-bottom; /文字垂直向下对齐/
二、CSS边框空白
padding-top:10px; /上边框留空白/
padding-right:10px; /右边框留空白/
padding-bottom:10px; /下边框留空白/
padding-left:10px; /*左边框留空白
三、CSS符号属性
list-style-type:none; /不编号/
list-style-type:decimal; /阿拉伯数字/
list-style-type:lower-roman; /小写罗马数字/
list-style-type:upper-roman; /大写罗马数字/
list-style-type:lower-alpha; /小写英文字母/
list-style-type:upper-alpha; /大写英文字母/
list-style-type:disc; /实心圆形符号/
list-style-type:circle; /空心圆形符号/
list-style-type:square; /实心方形符号/
list-style-image:url(/dot.gif); /图片式符号/
list-style-position: outside; /凸排/
list-style-position:inside; /缩进/
四、CSS背景样式
/背景颜色/
background:transparent; /透视背景/
background-image : url(/image/bg.gif); /背景图片/
background-attachment : fixed; /浮水印固定背景/
background-repeat : repeat; /重复排列-网页默认/
background-repeat : no-repeat; /不重复排列/
background-repeat : repeat-x; /在x轴重复排列/
background-repeat : repeat-y; /在y轴重复排列/
指定背景位置
background-position : 90% 90%; /背景图片x与y轴的位置/
background-position : top; /向上对齐/
background-position : buttom; /向下对齐/
background-position : left; /向左对齐/
background-position : right; /向右对齐/
background-position : center; /居中对齐/
五、CSS连接属性
a /所有超链接/
a:link /超链接文字格式/
a:visited /浏览过的链接文字格式/
a:active /按下链接的格式/
a:hover /鼠标转到链接/
鼠标光标样式：
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}
六、CSS框线一览表
border-top : 1px solid #6699cc; /上框线/ 像素 实线 颜色
border-bottom : 1px solid #6699cc; /下框线/
border-left : 1px solid #6699cc; /左框线/
border-right : 1px solid #6699cc; /右框线/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /设置上框线top颜色/
border-top-width :1px /设置上框线top宽度/
border-top-style : solid/设置上框线top样式/
其他框线样式
solid /实线框/
dotted /虚线框/
double /双线框/
groove /立体内凸框/
ridge /立体浮雕框/
inset /凹框/
outset /凸框/
box-shadow 0px 0px 5px #888888; /边框添加一个或多个阴影/
八、CSS边界样式
margin-top:10px; /上边界/
margin-right:10px; /右边界值/
margin-bottom:10px; /下边界值/
margin-left:10px; /左边界值/
九、其他
margin: 上右下左, !important 表示权重, 添加改字段表示优先级变高
margin: 13px 8px 13px 6px!important;
position: 定义元素位置 , 可以通过top或者left属性移动元素的位置
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。可以通过top或者left属性移动元素的位置因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
position: relative;
top: 9px;
十、input框操作
border:none;//去除边框
maxlength; //限制输入长度
type:tel //直接调出数字键盘 text为普通键盘
placeholder: //未输入时背景字

**

display的用法和区别

**

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似<tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。

其中，使用最多的为block、inline、和inline-block，以及flex
block（块级元素）
元素可以直接设置宽度和高度
元素默认宽度100%，默认高度自适应
元素独占一整行
常见的块级元素有：
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是css layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
inline（行内元素）
元素不可以直接设置宽度和高度
元素默认宽度自适应，默认高度自适应
元素可以和其他元素共处一行
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量
inline-block（行块元素）
元素可以直接设置宽度和高度
元素默认宽度自适应，默认高度自适应
元素可以和其他元素共处一行
input

textarea

为什么（什么情况下）要使用display转换显示模式
1.元素本身是行内元素，但是需要给他设置宽高的时候，需要转换为block或者inline-block
2.元素本身是块级元素，但是现在有多个同等级元素想要同一排显示时，需要转换为inline或者inline-block0
3.元素内部的结构较为复杂（如一个a标签内部需要放一个无序列表）时，需要转换为block或者inline-block
4.元素需要设置margin或者padding时，最好将这个元素转为块级元素。

flex(弹性布局)

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

以下6个属性设置在容器上：

flex-direction　　容器内项目的排列方向(默认横向排列)　　
flex-wrap　　容器内项目换行方式
flex-flow　　以上两个属性的简写方式
justify-content　　项目在主轴上的对齐方式
align-items　　项目在交叉轴上如何对齐
align-content　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-direction
1 .box { 2 flex-direction: row | row-reverse | column | column-reverse; 3 }
属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。

flex-wrap 1 .box{ 2 flex-wrap: nowrap | wrap | wrap-reverse; 3 }
属性可选值的范围为nowrap(默认)不换行、wrap换行（第一行在上方）和wrap-reverse（你懂的~）

flex-flow
1 .box { 2 flex-flow: || ; 3 }
写法属性中，将上述两种方法的值用||连接即可

justify-content
1 .box { 2 justify-content: flex-start | flex-end | center | space-between | space-around; 3 }
项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置了)
flex-start：在主轴上由左或者上开始排列
flex-end：在主轴上由右或者下开始排列
center：在主轴上居中排列
space-between：在主轴上左右两端或者上下两端开始排列
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items
1 .box { 2 align-items: flex-start | flex-end | center | baseline | stretch; 3 }

align-content
1 .box { 2 align-content: flex-start | flex-end | center | space-between | space-around | stretch; 3 }

以上介绍完了容器中的属性，下面说一下容器中项目的属性：
order　　项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow　　项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
order
.item {
order: ;
}
flex-grow
.item {
flex-grow: ; /* default 0 /
}
flex-shrink
.item {
flex-shrink: ; / default 1 /
}
flex-basis
.item {
flex-basis: | auto; / default auto */
}
flex
.item {
flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
}
align-self
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

容器属性和项目属性是可以配合使用的，用法类似于CSS的行内式和嵌入式的道理一样。