Go to comments

Collection Css

一、文字

font-family 文字类型

font-size

font-style: italic; 倾斜
font-style: normal; 取消倾斜

font-weight: bold; bold是加粗相当于数字700
font-weight: normal; 取消加粗

text-decoration: line-through; 表示穿过文字,文字中间加线 
text-decoration: overline; 文本上面加线 
text-decoration: underline; 文本下面加一条线,比较常见
text-decoration: none; 把a元素下面默认的线去掉

text-indent 首行文本缩进

line-height 行高可以设置为纯数字,表示相对于当前元素的字体大小
line-height: 1.5; 表示跟当前文字大小的1.5倍数

letter-spacing 表示文字间隙

http://ruyic.com/blog/html/view.php?id=318


文字超出部分打点

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;


鼠标

属性名
属性值样式
cursorpoiner小手
auto默认,让浏览器来控制,比如遇到文字变成选择光标,在文本框变成输入状态
e-resize表示重新调整尺寸
help帮助,鼠标箭头多了一个问号





二、背景

repeat 重复

background-repeat: no-repeat; /* 相当于写了下面两个 */
background-repeat-x: no-repeat; /* 横坐标方向不重复 */
background-repeat-y: no-repeat; /* 纵坐标方向不重复 */

background-repeat: repeat-x; /* 只在x轴横向重复 */
background-repeat: repeat-y; /* 只在纵向重复 */

background-repeat: repeat; /* 默认值repeat,两个方向都重复 */

http://ruyic.com/blog/html/view.php?id=332


size预设值

1. contain

2. cover

background-repeat: no-repeat; /* 去掉重复 */
background-size: contain; /* 保证图片能完整的显示到div盒子里面 */

background-repeat: no-repeat; /* 去掉重复 */
background-size:cover /* 意思背景图一定要把这个区域撑满 */


size数值

background-repeat: no-repeat;
background-size: 300px 200px; /* 可以自己设置一些数值,宽300像素,高200像素 */

background-repeat: no-repeat;
background-size: 100%; /* 意思是横向上一定要撑满,纵向上按照比例缩放 */

background-repeat: no-repeat;
background-size: 100% 100%; /* 写两个100%,第一个表示横向撑满,第二个表示纵向撑满,于是背景图比例上就发生了变化 */


position 背景图的位置

预设值分别设置横向和纵向的位置

left

bottom

right

top

center

background-repeat: no-repeat;
background-position: center; /* 表示横向居中,同时纵向也居中 */

background-repeat: no-repeat;
background-position: center top; /* 横向居中,纵向靠上 */


也可以写数值,或百分比(百分比用的不多)

background-repeat: no-repeat; 
background-position: 0px 20px; /* 第二个数字表示纵向的Y坐标,离上边的距离 */


attachment 

background-attachment  通常用于设置背景图是否固定

background-repeat: no-repeat; /* 设置不重复 */
background-size: 100%; /* 横向100%,纵向自适应 */

background-attachment: fixed; /* 设置背景图是相对于视口的,有点类似于固定定位 */


速写属性(简写)

 background: url('./pic.jpg')   不重复   位置/尺寸   固定   颜色;  


位置和尺寸都可以写数值  50% 50%/100%  写一个斜杠

1. 斜杠前写位置

2. 斜杠后面写尺寸

background: url('pic.jpg') no-repeat 50% 50%/100% fixed #ffd200;


位置这里也不可以不写  50% 50%  可以简单的写预设值center,总之顺序要先写位置,再写尺寸才行

background: url('pic.jpg') no-repeat center/100% fixed #ffd200;


https://www.w3school.com.cn/cssref/pr_background-color.asp

background-color: color|transparent|initial|inherit;


三、弹性盒

529  CSS3弹性盒模型

579  CSS3语言提升布局


弹性项目的属性

属性作用
display触发弹性盒模型

flex

inline-flex

flex-direction设置主轴方向(常用)

row 默认值,主轴水平方向,从左向右排列

cloumn 主轴垂直方向,自上向下排列

row-reverse 主轴还是水平方向,自右向左排列

column-reverse 主轴垂直方向,自下向上排列

flex-wrap换行(常用)

nowrap 默认值,不换行

wrap 换行

wrap-reverse 倒着换行,有点怪的排列,这种应用很少出现基本上不用

justify-content 基于主轴做的对齐方式

flex-start 默认值,在主轴开头对齐

flex-end 在主轴结尾对齐

center 居中(主要用到)

space-between 在主轴上平均分配  多加几个子元素方便看到效果

space-around 设置子元素两侧的空间,space是空隙的意思,round之前见过

align-items设置交叉轴的对齐方式,单行文本

 flex-start 在交叉轴的上面

flex-end 交叉轴的下面

center 居中

baseline 基于文字底线对齐

stretch 默认值,伸展/拉长/拽宽/撑大的意思,如果子元素不设置高度,默认值auto,子项高度撑满父元素内容区

align-content

设置交叉轴的对齐方式,多行文本

flex-start 交叉轴起始端

flex-end 交叉轴的尾部

center 交叉轴的中间

space-between 上下顶头,中间平均分配

space-around 行与行之间上下平均分配空间

stretch 把元素的高去掉,这个值才生效(默认值)


项目属性

属性作用
order

值越小排的越靠前,要排到默认值前面最好填负数

默认值是0
align-self

对齐

子项作为一个单独的个体,它基于交叉轴的分配状况

auto  默认值,父元素align-items的值

flex-start  交叉轴上面

flex-end 交叉轴下面

center 交叉轴中间

baseline 文字基线

stretch

flex是简写属性

flex速写属性:拉伸比例  压缩比例  初始化尺寸

flex : 0 1 auto

flex-growgrow扩大/增加/长高的意思默认值是0
flex-shrinkshrink收缩/退缩/减少的意思默认值是1
flex-basis

basis代表基础占有多少空间,用来代替width属性优先级高于width

默认值是auto








Leave a comment 0 Comments.

Leave a Reply

换一张