二、css样式笔记

1.flexbox记录

实用reactjs, vue等进行前端web开发时，要使用flexbox布局，代码如下：

<div style="display:flex">
	<p>Hello,&nbsp&nbsp</p>
	<p>World</p>
</div>

flex 是 Flexible Box的缩写，意为”弹性布局”, 在web页面有6个属性：

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

注意默认是横向排列。

而在react native中布局默认就是使用flex。也有如下属性：

flexDirection
justifyContent
alignItems

有几点不同：

1.rn使用的是驼峰写法
2. web页面flex默认是横向排列，而在rn端默认是竖直也就是纵向排列。

font-size:50px;
font-weight:lighter,normal,bold,bolder; 100到900 其中600就是bold 有时候bolder没有更粗，取决于字体包有没有更高的样式
font-style:italic;(斜体)
font-family:arial(乔布斯设计字体)
color:
1.土鳖式： red直接英文单词
2.颜色代码 #ff4400简写为：#f40 也就是：每两位都是重复的就可以简写
3.颜色函数 rgb()
光学三原色： 红绿蓝
美术三原色： 红黄蓝
border: 1px solid black
border-width:1px
border-style: solid;dotted(点状虚线);dashed(条状虚线)
border-color:black

div里文本对齐方式：

1234

div{
text-align: left|center|right/注意：这里的center指的是单行文本水平居中/
}
css文件里只有块注释 / / 没有行注释(//)

div{
line-height: 18px; /单行文本所占高度/
}
怎么让单行文本垂直居中：通用做法是让文本行高等于容器高度: line-height = 容器高度。见如下代码：

新浪网新闻中心是新浪网最重要的频道。

div{
height:200px;
line-height:200px;
}
下一个问题，怎么让每段首行文本缩进？

新浪网新闻中心是新浪网最重要的频道。

div{
text-indent=2em; /首行缩进2个文本单位/
}
绝对单位：厘米，分米，米(地球上你是1米8，到月球上不会是1米7吧)。
像素： 1个像素代表一个颜色点
相对单位：像素， em
1em = 1 * 该标签的font-size(默认是16) = 16px

下一个议题：
原价50元>
原价
如何用css模拟标签的样式？
span{
text-decoration:line-through
}
text-decoration:none 告诉浏览器该标签没有线
www.baidu.com /a标签默认有个下划线,用css怎么做到？/
www.baidu.com
span{
text-decoration:underline;
color: rgb(0,0,238)
}
这样span样式就跟a标签一模一样了。蓝色带有下划线字体
text-decoration还有个值：overline 表示 上划线
还有一点区别。就是当鼠标指针移动到a标签上时，指针会变化，而我们的span标签没有变化。要如何做到呢？
加个属性： cursor:pointer; 即可。
cursor还有很多值。当值为 help 鼠标指针会变为 小问号。还有20多个值，反正都是小图标