css使用总结

最近一直在做项目的页面样式，做了一些总结

（***：常用，**：一般 ，^：较少)

首先从基础的开始，

文本：

*** text-align：文本对齐。（left/right/center) 

^ text-transform:lowercase。文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

** line-height:设置行高。行高是指上下文本行的基线间的垂直距离，当文本的line-height设置为父容器的高度就可以实现文本垂直居中（我在实际项目不会使用行高哎，一般都是通过文本对齐）

 

背景：

*** background-color和background：

描述元素的背景，其中color为backgroud默认的第一个属性值。

no-repeat,背景图像不平铺。

 

字体：大小，颜色，粗细

*** font-size,color,font-weight( 定义由粗到细的字符,100到900。400 等同于 normal，而 700 等同于 bold。)

字体的设置是很常见的，一般项目会在common.less文件中设置全局的一些字体样式.字体的粗细常用的就是400和bold

 

列表：

ul:无序列表

ol：有序列表

** list-style-type属性指定列表项标记的类型—— disc，默认为实心圆。none是无标记

 

边框：

!! border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

*** boder:width style color（默认顺序）

(style)*** solid：实线边框

 

显示隐藏：隐藏元素 - display:none或visibility:hidden

visibility隐藏元素但仍占用空间。display隐藏元素并且不占用空间。

 

块级元素和行内元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。（一个元素一行）如：<div><p><h1>

内联元素只需要必要的宽度，不强制换行。（不会换行）如:<span><a>

diaplay:inline/block.可以变更元素的显示类型

 

******** css定位（重点）

position：

static(默认，无定位）

fixed:相对于浏览器， 窗口是滚动的它也不会移动：

relative:相对其正常位置（ 相对定位元素经常被用来作为绝对定位元素的容器块。）

absolute：相对最近的position父元素（ absolute 定位使元素的位置与文档流无关，因此不占据空间。）一般用于是元素左右对齐

//div2在div1的左下角
.div1{
position:relactive;
.div2{
position:absolute;
left:0;
buttom:0;
}
}

 

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

*** overflow:auto/scroll  内容超出时就会显示滚动条

 

CSS3

** 圆角实现：border-radius设置四个边框的半径 ，也可以单独指定，如border-top-left-radius

** 渐变实现：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

例如：从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：
background-image: linear-gradient(to bottom right, red, yellow);

实现效果：

 

********Flex布局（重点）：

display:flex

flex-direction：row/column 主轴的方向

justify-content:主轴对齐

flex-start | flex-end | center | 起始|结尾|中间|

align-items ：交叉轴对齐

flex-wrap 属性用于指定弹性盒子的子元素换行方式， 默认， 弹性容器为单行