字体属性font：
- font-size 设置字体大小，单位为 px em
- font-family 设置字体，值为字体，如果是词组或汉字，则需要用引号包裹
- font-weight 设置字体粗细，值有bold(加粗),bolder(加粗，相当于<strong>和<b>标签),lighter(细).或者用整百来表示粗细100~900(400=默认值,700=bold).
- font-style 设置字体样式,有三个值normal(文本正常显示),italic(文本斜体显示),oblique(文本倾斜显示),
- line-height 设置字体行高，单位为px,
简写属性 :
font: weight style size/height familt;
注意： 最少需要两条属性，且顺序不能乱。
文本属性text：
- text-align: 设置文本居中，值为 left(左侧对其、默认),center(居中对齐),right(右侧对齐),
- text-decoration 设置文本的修饰，none(去掉所有修饰),underline(添加下划线),overline(添加上划线),line-
- through(添加中线、删除线)，
- text-shadow 设置文本阴影 如text-shadow:0px 0px 2px red;第一个参数是左右位置，第二个参数是上
下位置，第三个参数是虚化效果，第四个参数是颜色 - text-inden 设置文本首航缩进，单位为 px , em
- letter-spacing 添加字母之间的空白、设置字母之间的距离，单位为 px
- word-spacing 设置单词之间的间距，单词以两端是否空格为判断条件 单位为 px
- color 设置文本颜色
背景属性background:
- background-image 设置背景图片值是url(图片路径),
- background-color 设置背景颜色
- background-position 设置背景图片的位置坐标
- background-repeat 设置背景重复,no-repeat(设置图片不重复，常用)，repeat-y(设置Y轴重复)，repeat-x(设置X轴重复),
- background-size: 设置背景大小background-size:宽度 高度;还有两个css3的值，为cover(等比例铺
满),contain(某一边铺满),
简写属性 :
background: color url repeat position;
注意： 支持多背景图叠加，各背景图属性间需用逗号隔开。
溢出处理overflow：
overflow: visible | hidden | scroll | auto | inherit ;
- visible 默认值。内容不会被修剪，会呈现在元素框之外。
- hidden 内容会被修剪，并且其余内容是不可见的。
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
- inherit 应该从父元素继承 overflow 属性的值。
对于文本的常见溢出处理是将溢出的内容显示为...
white-space:nowrap; 将文本强制显示在一行
overflow:hidden; 修剪掉溢出的内容
text-overflow:ellipsis; 使用省略符号...来代表被修剪的文本
注意： 同时使用这三个属性的时候，先后的顺序不能乱
浮动float:
float:left | right
特性 :
- 脱离文档流
- 文本环绕
- 默认宽度失效
- 使浮动元素变成块级元素
清除浮动 :
- clear: both; 给受影响的元素添加
- overflow: hidden ; 给父元素添加，也有缺点，会将超出的内容隐藏
- height: 固定高度 ; 给父元素添加，缺点明显，当页面缩放时可能会破坏页面布局
- 还可以使用浮动来清除浮动，缺点是会使全局都变成浮动
- 伪类 : after 或 before ; 使用伪类在浮动元素后或者受影响的元素前添加 推荐使用
在做一些如下拉菜单之类的效果的时候，使用伪类来清除浮动不失为一种好的方法
注意： 伪类标签默认的是行内元素，而clear: both ; 只能对块级元素使用，所以需要在伪类上添加
： display: block ;如下所例：
.box:after{
content: "" ;
/*content : ; 的作用是设置文本内容，如不需要内容、可设置为空串“”*/
display: block ;
/*因为clear: both ; 只能给块级元素设置，因此需将其变为块级元素*/
clear: both ;
/*添加 clear: both ; 清除浮动*/
}
定位position:
position: relative(相对定位) | absolutee(绝对定位) | fixed(相对浏览器定位) ;
- relative的参照点：自身的位置
- absolute的参照点：离他最近的有定位属性的父辈元素
- fixed的参照点：浏览器
层次：
z-index:
作为定位属性的附加属性可以设置元素层次权重，没有绝对的值，只有相对的值，值越大，其层次权重越高，高权重的元素会覆盖掉低权重的元素
注意： 只有设置了定位属性的元素才能使用 z-index 否则无效
其他一些常用的属性：
列表属性：
- list-style-type:none(去除标志) | decimal-leading-zero(0开头的数字标记如 01 ) | square(方框) | circle(空心圆) | disc(实心圆)；
- list-style-image:url(); 将图片设置为标志
- list-style-position:标志的位置
- inside 列表样式在li里面
- outside 列表样式在li外面
list-style:缩写例如：list-style:inside square;
鼠标的类型形状
cursor: crosshair | pointer | move | mot-allowed ;
- cursor: 用来设置鼠标的形状
- cursor:crosshair; 鼠标悬浮成十字状
- cursor:pointer; 显示小手
- cursor:move; 显示十字交叉箭头
- cursor:text; 显示文本符号
- cursor:wait; 加载圈滚动
- cursor:help; 问号
- cursor:not-allowed; 禁止，红圈斜杠
伪类：
-
:link 设置为访问的链接样式
-
:hover 鼠标悬浮时的状态
-
:active 在连接上按下鼠标时的样式
-
:visited 已访问过的链接样式
注意：
链接样式是可选的，可以选择性的设置某个样式，但在设置样式时若设置多个样式，其顺序不能乱** -
:before 在...前面插入内容、:after 在...后面插入内容
...:after{
contrnt:"";
}
-
:first-child第一个子元素、:last-child最后一个子元素、:nth-child(n)第n个元素
如：ul:first-child 就是选择的ul的第一个子元素
注意： :nth-child(n)可以灵活的选择特定顺序的子元素，如传入参数 2n 可选择所有的偶数子元素，2n-1 可选择所有的奇数子元素。
透明：
css有三种设置透明的方式：
1、背景颜色透明background: rgba(0,0,0,0.5);使用RGBA的方法可以设置颜色透明度，其最后的0.5为透明度，值为0-1，0可以省略写成 .5，其透明度只适用于设置的颜色。
2、opacity属性opacity: 0-1 ;其值为0-1，同样可以省略0，其透明效果作用于设置了opacity属性元素及其子元素。
注意： 此属性只兼容IE8以上的浏览器
3、filter:alpha(0-100);它的效果和opacity一样，值是0-100，在兼容IE8或以下的浏览器的时候用它
阴影：
盒子阴影：box-shadow: 0px 0px 1px red ; 文本阴影：text-shadow:0px 0px 1px red ;
第一个值为左右偏移，第二个值为上下偏移，第三个值为阴影的发散范围，第四个值是阴影颜色。
box-sizing:
在CSS里面有一个很好用的属性：**box-sizing: border-box ;**
box-sizing有三个值，我们借用W3school的描述：
2019-07-24_151837.jpg
使用box-sizing: border-box ; 属性可以让我们放心的添加例如border或者padding而不用担心我们设置的宽高被修改。
弹性布局flex:
display: flex ;
在CSS里面有一个很重要的内容，弹性布局，使用flex能让我们更容易的完成页面布局，用少量的代码来处理一些很棘手的布局效果，而且因为是弹性的，所以对移动端的支持非常好。
在想要的元素上设置display: flex ; 会自动将它和它的子元素变成弹性布局,其子元素默认水平排列，不换行,且不脱离文档流。
换行方式：
flex-wrap: nowrap(默认不换行) | wrap(换行，第一行在上方) | wrap-reverse(换行，第一行在下方);
主轴对齐方式（默认的水平对齐）：
justify-content: flex-start | flex-end | center | space-between | space-around;
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
交叉轴对齐方式（默认垂直对齐）：
align-items: flex-start | flex-end | center | baseline | stretch;
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
放大比例：
flex-grow: 0 | 1 ;
默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
如：
2019-07-24_154909.jpg
给button设置固定宽度，给input设置flex-grow: 1 ;则input自动占满div剩余的所有宽度，不需要为其设置单独的宽。
网友评论