常用css属性总结

Posted 2020-10-11

边框修饰：
border------>top，bottom，left，right上下左右边框
分为：color，类型style{ groove，dashed，ridge，solid}
一个值------->四个边   二个值------->上下 左右     三个值------->上 左右 下    四个值-------->上 右 下 左(顺时针)

文本修饰：

1，文字修饰：font
{ color: red;/*字体颜色*/
font-size: 30px; /*字体大小 默认字体大小是16px*/
font-family: "微软雅黑"; /*字体*/
font-weight: bolder; /*字体粗细 lighter normal bold*/
font-style: italic; /*字体类型*/
2，文本修饰：text
text-align: center; /*文本对齐方式*/left、right
text-decoration: underline; /*文本描述*/
text-indent: 20px; /*em 字符单位 px像素单位*/首行缩进
text-indent: 2em; /*2em在默认情况下是32px*/
text-shadow: 5px 5px 2px yellow; /*文本投影*/
/*投影 水平距离 垂直 模糊程度 颜色*/
3. 多行文本溢出隐藏
overflow: hidden;------>/*溢出隐藏*/
text-overflow: ellipsis;------> *//*溢出内容以省略号的形式显示*/
display: -webkit-box;------>/ /*可伸缩的盒子*/
/*-webkit-line-clamp: 1;------>*/ /*省略号在第几行显示*/
/*-webkit-box-orient: vertical;*------>/ /*在垂直方向有溢出*/
4.一行文本的溢出
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;------> /*强制一行显示*/后面三行代码实现强制一行显示。
div里面title属性可以隐藏文本。word-break：break-word------>自动换行
height line-height------>文字垂直居中。只针对文字垂直居中
letter-spacing------>字间距。
text-align: justify;------>两端分散对齐。
text-align-last: justify;------>最后一行两端分散对齐。
/*css3*/
-webkit-column-count: 15;------>分栏15列
-webkit-column-rule: 1px red dashed;分栏线
word-break: break-word;
5.背景修饰：background
background-color: red;------>/*背景颜色 默认值 transparent*/
background-image:url(猫.jpg);------>/*背景图片 默认值none*/
/*背景图片优于背景颜色显示*/
background-repeat: no-repeat;------>/*定义背景图片是否重复 默认值repeat repeat-(x/y)*/
background-position:right 20px bottom 20px;------>/ /*写了一个方向的位置移动 另一个方向默认居中*/
background-position: center;------> /*背景图片位置 默认left top*/
background-attachment: fixed;------> /*定义背景图片是否随着滚动条的滚动而滚动 默认scroll fixed固定背景图片*/
background-size: 500px 500px;------> /*背景图片大小*/
6.盒子属性：margin值 盒子与盒子之间的距离
margin 0 auto水平居中 margin-top/bottom/right/left
padding值“设置内容与边框的距离”
一般*{
margin 0
padding 0重置盒子的自带属性值。
}
* 边界溢出 第一个子元素的上边界 最后一个的下边界 溢出父元素。
解决办法：

/*height: 500px;*/加高度第一种对象是父元素。
/*overflow: hidden;*/第二种
/*padding: 1px;*/第三种
上下边界合并 取大值。
7.两种盒子：
/*box-sizing: content-box;*/
/*盒子的实际大小 (内容+border+padding)*/
box-sizing: border-box;
/*盒子的实际大小(宽高) border+padding压缩内容的大小*/
8.背景负位置注意：
display: inline-block; /*元素转为行内块元素*/
vertical-align: middle; /*垂直对齐*/
9.颜色表示方法：
/*1/英文 不透明*/
/*background: red;*/
/*2/十六进制(兼容好) 不透明*/
/*background: #ff0000;*/
/*#+(0-9)(a-f)*/
/*3/rgba 透明*/
/*background: rgba(255,0,0,1);*/
/*r 红色 0-255
b 蓝色 0-255
g 绿色 0-255
a 透明度 0-1之间的小数*/
/*4/hsla 透明*/
background: hsla(90,50%,50%,1);
/*h 色相 0-360
s 饱和度，0-100%
l 明度，0-100%
a 透明度 0-1之间的小数*/
10.渐变背景：
/*css3新属性*/
background: linear-gradient(to left,red,blue); /*线性渐变*/
background: radial-gradient(red,blue); /*径向渐变*/
盒子自带属性：
span,i{ /*盒子属性失效 对行标签*/
display: block; /*行元素转换成块元素*/
11.浮动坍塌：解决:子元素浮动了就给父元素加上。
1.给父元素设置高度
2.overflow:hidden;
3.loat: left;
4.伪类解决
.clear:after{
content:"";
display:block;
clear: both;
12. display用法
1/垂直居中
2/隐藏元素
3/行块互转
4/做横向导航
/*display: none;*//*不占位隐藏*/
/*opacity: 0;*/ /*占位隐藏*/
visibility: hidden;/*占位隐藏*/

浏览器兼容问题：

1.标签自带的样式
2.浏览器解析标签的样式（最难的）

进阶：h5+框架
核心：js
基础：（html+js+css+html5）

布局：整体入手 局部分析 调整位置 添加样式

等宽：相对于父级的高度。最外面的div就是body

auto是给块级标签用的有个默认的属性：如（div display：block）

margin把行标签居中具备三个条件：margin 0 auto；display：block 给个宽度。

html不包括滚动条的。

注意:浮动过后行元素可以设置宽高了
注意:margin值不合并了

border-color: red; 四个边
border-color: red green; 上下 左右
border-color: red green blue; 上 左右 下
border-color: red green blue pink; 上 右 下 左（顺时针）

absolute：/*位移对象 不占位
浏览器窗口/body/html
已被定位的,最近的父元素

relative：位移对象:自身 占位

fixed： 参照物:浏览器窗口/body/html 不占位