最近一直在做项目的页面样式,做了一些总结
(***:常用,**:一般 ,^:较少)
首先从基础的开始,
文本:
*** 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 属性用于指定弹性盒子的子元素换行方式, 默认, 弹性容器为单行