CSS3快速查询

最新推荐文章于 2024-10-12 09:53:06 发布

Andy_lie

最新推荐文章于 2024-10-12 09:53:06 发布

阅读量221

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/Andy_lie/article/details/129298536

版权

1、首行缩进

text-indent:2em

2、字间距

letter-spacing:2px; /* 字间距*/

3、单词间距

 word-spacing:10px; /*单词间距*/

4、背景图片属性

img {

   //引入
   background-image:url(images/icon.png);
   //不平铺
   background-repeat:no-repeat;
   /*方位 x、y   x是left/right，自动转换，top/bottom  不论顺序,自动转换，可省略一个，那么另一个就是center */
   
   //background-position:left center
   
   /*还可以是精确位置 如果写了精确位置,那么第一个一定是x，第二个一定是y*/
   
   //background-position:20px 20px
   
  /*还可以是混合，如果写了混合位置,那么第一个一定是x，第二个一定是 y*/
   background-position:20px center
 
  /*参数 scroll(滚动，默认)和fixed(固定)*/
   background-attachment:fixed //背景图像固定
  
}
   /*background:背景颜色,背景图片地址,背景平铺 背景图像滚动,背景图片位置。*/
body {
 background:black url(images/bg.jpg) no-repeat fixed center top; 
}

5、权重

选择器权重
继承或者*	0.0.0.0
元素选择器	0.0.0.1
类选择器、伪类选择器	0.0.1.0
ID选择器	0.1.0.0
行内样式styl=""	1.0.0.0
!important 重要的	无穷大

6、W3C盒模型和IE盒模型

标准盒模型和怪异盒模型之间的转换：box-sizing : content-box/boeder-box
当为content-box时，将采取标准模式进行解析计算;
当为border-box时，将采取怪异模式解析计算;

7、内容水平居中对齐

/*利用margin*/
div{
    //必须有个宽度
    width:900px;
    height:200px;
    background-color:red;
    //上下没有边距 左右设置auto
    margin:0 auto;
}

/*绝对定位的垂直水平居中*/
 div {
   position:absolute;
   /*让盒子的左侧移动到父级元素的水平中心位置*/
   left:50%;
   top:50%;
   margin-left:-100px;/*让盒子向左移动自身宽度的一半*/
   margin-top:-100px;/*让盒子向上移动自身高度的一半*/
   width:200px;
   height:200px;
   background-color:black;
 }

8、清除浮动

 /*3.可以给父级添加:after*/
 .clearfix:after {
    //伪元素必须写的属性
    content:'';
    //插入的元素必须是块级，伪元素是行内
    display:block;
    //不要看见这个元素
    height:0;
    //核心代码清除浮动
    clear:both;
    //不要看见这个元素
    visibility:hidden;
 }

9、粘性定位

  div {
    position:sticky;
    /*当前元素的可视区和滚动条齐平的时候,使用粘性定位*/
    top:0;
  }

/*以浏览器的可视窗口为参照点移动元素(固定定位特点)
粘性定位占有原先的位置(相对定位特点)
必须添加top、left、right、bottom其中一个才有效。
跟页面滚动搭配使用，但兼容性差，IE不支持。*/

定位的特殊特性

行内元素添加绝对或者固定定位,可以直接设置高度或宽度。
块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容的大小
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。
绝对定位(固定定位)会压住下面标准流所有的内容。
脱离文档流后，margin就无效了。

10、字体图标的使用

 //字体声明 
 @font-face {
   //1. 把下载得到的fonts放到我们项目中。
   //2. 打开下载得到的style.css,复制@font-face这一段。
 }
 
 //使用
 span {
     font-family:'icomoon';
     color:black;
     font-size:12px;
 }

11、鼠标样式

  <ul>
   <li style='cursor:default'>我是默认的小白鼠标样式</li>
   
   <li style='cursor:pointer'>我是鼠标小手样式</li>    
    
   <li style='cursor:move'>我是鼠标移动样式</li>    
   
   <li style='cursor:text'>我是鼠标文本样式</li>     
    
   <li style='cursor:not-allowed'>我是鼠标禁止样式</li>       
    
  </ul>

12、取消表单轮廓线和防止拖拽

  input,textarea {
   //取消表单轮廓
   outline:none;
  }
 
  textarea {
   //防止拖拽文本域
   resize:none; 
  }

13、实现行内块(图片和表单都属于行内块3)和文字垂直居中，如果是其他类型元素可先转换为行内块

 div {
    display:inline-block;
    vertical-align:middle;
 }

14、图片底侧空白缝隙解决

给图片的父亲加边框，会发现图片的底部会有个空白缝隙，是因为图片默认是和我们文字的基线对齐。
把图片转换为块级元素 display:block;

15、文字溢出省略号显示

/*单行文字溢出省略号显示*/
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;

/*多行文本溢出省略号显示*/
 overflow:hidden;
 text-overflow:ellipsis;
 /*弹性伸缩盒子模型显示*/
 display:-webkit-box;
 /*限制在一个块元素显示的文本的行数*/
 -webkit-line-clamp:2;
 /*设置或检索伸缩对象的子元素的排列方式*/
 -webkit-box-orient:vertical;

16、常用的公共兼容代码


* {
//把我们的内外边距全部清0
 margin:0;
 padding:0;
 /*css3的盒子模型，可以让border和padding不会撑大盒子。*/
 box-sizing:border-box;
}

//em和i协调的文字不倾斜
em,i {
 font-style:normal
}

//去掉li的小圆点
li {
 list-style:none
}

img {
/*border:0 照顾低版本浏览器， 如果图片外面包含了链接会有边框的问题*/
 border:0;
 //取消图片底侧有空白缝隙的问题
 vertical-align:middle
}

button {
/*当我们鼠标经过button 按钮的时候，鼠标会变成小手*/
 cursor:pointer  
}

a {
 color:#666;
 //隐藏蓝色的线
 text-decoration:none
}

a:hover {
 color:#c81623
}

button,input {
 font-family:Microsoft YaHei,Heiti   SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
 /*默认有灰色边框我们需要手动去掉*/
 border: 0;
 outline: none;
}


body {
  //css3 抗锯齿性，让文字显示的更加清晰
 -webkit-font-smoothing:antialiased;
 background-color:#fff;
 font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans
 /*"\5B8B\4F53" 是宋体的意思,用Unicode编码浏览器的兼容性小*/
 GB,"\5B8B\4F53",sans-serif;
 color:#666
}

.hide,.none{
 display:none
}

/*清除浮动的*/
.clearfix:after { 
 visibility:hidden;
 clear:both;
 display:block;
 content:".";
 height:0
}

.clearfix {
  *zoom:1
}

//把语义化标签转换为块级,兼容ie9
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary
{
 display:block
}

17、滤镜filter

 /* filter:函数(); 例如：filter:blur(5px); blur模糊处理,数值越大越模糊*/
 img {
     filter:blur(5px)
 }

18、calc() 此函数让你在声明css属性值时执行一些计算

  //需求我们的子盒子宽度永远比父盒子小30像素
  .father
    {
     width:300px;
     height:200px;
     background-color:red
   }
   
  .son {
      //子继承父的宽度然后再减去30px
      width:calc(100%-30px);
      height:30px;
      background-color:yellow;
  }