css基础小知识笔记

1\css规定的定位基值有三种：标准文档流、浮动及定位

2、w3c标准：万维网制定的一系列标准。{

结构化标准语言（HTML、XML）

表现标准语言（css）

行为标准语言（DOM，ECMAScript）

}

倡导结构，样式，行为分离

3、样式就近原则：行内 》 内部 》 外部

4\盒子模型：第一层：border 第二层：Content和padding 第三层：background图 

           第四层：background-color 第五层：margin

5、清楚浮动： clear：both  或者 给被影响的元素添加{width:100%;overflow:hidden;}

6position: static(静态定位)

6、overflow:auto; 定义了这个属性的元素会自动包裹超出的子元素，清除自身的浮动

7、IE6 不支持hover伪类，css为了兼容IE6下载一个csshover.htc的文件然后引入进去，同时在在页面body中引用一下：

body{

behavior:url(csshover.htc);

8  border-left: 6px solid transparent;（transparent 颜色透明）

9 box-shadow: -1px 0 0 rgba(255,255,255,.3);  rgba:代表(red,green,blue,alpha透明通道) 注意：rgb:个取值

0-255 a:取值0-1

10、.top-nav ul li:first-child > a 表示：li下的第一个子元素下的a标签

    .top-nav ul li:last-child > a  表示：li下的最后一个子元素下的a标签

11、background-image: linear-gradient(#04acec,#0186ba) 给背景设置渐变色

12、visibility: hidden; 设置影藏  visibility: visible; 设置显示

13、/* 针对IE清除浮动 */

.top-nav{

zoom:1; /* 强制刷新框架 */

14、

/* 清除浮动 给top-nav前后加上空内容，显示为table，利用after在元素后边插一个空格，然后清除浮动*/

.top-nav:before,.top-nav:after{

content:" ";  

display: table;

.top-nav:after{

clear:both;

15、box-sizing:border-box;   让内容和padding都在内部展现，不会超过边框

16、-webkit-backface-visibility:hidden; 当元素不面向屏幕时影藏

17、-webkit-transform-style:preserve-3d; 支持子元素的3d效果 -webkit-transform:rotateY(180deg);

   沿着Y轴旋转

18、子元素设置了浮动，影响了父元素，父元素清除浮动：

.active-preview:after{

content:'';

display:block;

19、letter-spacing:2px;设置字间距

20、有时字体大小不同，行高就会不同，有时影响容器之间的距离

21、同一级的几个div区分背景颜色，

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

.active-view:nth-child(odd){

background-color:rgba(255,255,255,0.5);

} 在同一级的几个div中只要是基数，就背景颜色变透明一点

 对几个div分阶显示颜色：

 .card:first-child{

background-color:rgba(0,0,0,0.04);

 }

 .card:nth-child(2){

background-color:rgba(0,0,0,0.08);

 .card:nth-child(3){

background-color:rgba(0,0,0,0.12);

 .card:nth-child(4){

background-color:rgba(0,0,0,0.16);

 .card:nth-child(5){

background-color:rgba(0,0,0,0.2);

 .card:nth-child(6){

background-color:rgba(0,0,0,0.24);

22、©  版权声明标志

23、让背景图片固定不动

{

background:#444 url(../img/banner.jpg);

background-attachment:fixed;

background-size:cover;

24、滚动标签知识点：

A:behavior滚动的方式

    alternate:表示在两端之间来回滚动

    scroll：表示从一段混动到另一端，会重复

    slide：表示从一段混动到另一端，不会重复

B:direction滚动的方向down，up,left,right

C:loop滚动的次数（当loop= -1表示一直滚动下去，默认为-1） 

D：scrollamount设定活动字母的滚动的速度

E：scrolldelay设定活动字幕滚动两次之间的延迟时间

25、lorem*18 自动生成文字

26、

去除article下的div中最后一个的边框

article div:last-child{

border:none;

27、vertical-align: bottom;设置垂直对齐方式 应用于inline水平以及‘table -cell’元素

inline-block:(IE8+),(IE8+)

'table-cell'元素：table-cell

默认状态下 支持的是：文字，图片，按钮和单元格

   vertical-align百分比是相对于line-height值计算

{line-height:30px;vertical-align:-10%;} =

{line-height:30px; vertical-align:-3px; /* 30px* - 10% */}

清除浮动：

 clear：left:在左侧不允许浮动元素

right:在右侧不允许浮动元素

both:在左右侧都不允许浮动元素

none:默认值，允许浮动元素出现在两侧

inherit:规定应该从父元素继承clear属性的值

28、list-style-image:url(...);  用图片代替默认的点。list-style-type:none;也可以去除小圆点

29、  charset="gb2312"设置js文件编码

30、.top_content a:link,.top_content a:visited{color:#000;} 定义超链接初始下的状态和已访问下的状态显示

相同颜色。

    .top_content a:hover,.top_content a:active{color:#ff7788;} 设置鼠标滑过和点击样式的一致。

31、块级元素会重启一行开始。

32、ul{

/* background: url(image/..) no-repeat right center; */等统于下面的

background-image: url(mage/..);

background-repeat: no-repeat;

background-position: right center;

33、overflow基本属性：

visible(默认)

hidden 超出部分影藏

scroll 超出本分会给页面增加滚动条

auto 自动

inherit IE8以上支持

  overflow-x:hidden  --->IE8+  如果x值和y值不同，则值大的一方会出现滚动条

  overflow-y:hidden

  会出现滚动条：

1、overflow：auto/scroll -- / 

2、内容超出

3、无论什么浏览器，默认滚动条都来自而不是标签

4、IE7-浏览器默认：html{overflow-y:scroll;}

   IE8+等浏览器默认：html{overflow-y:auto;}

要去除页面默认滚动条：html{overflow:hidden;}

js与滚动高度：

chrome浏览器是：document.body.scrollTop;

其他浏览器：document.documentElement.scrollTop;

       两者不会同时出现：一般这样写:

var st = document.body.scrollTop || document.documentElement.scrollTop;

      5\overflow的padding-bottom确实现象 导致：不一样的scrollHeight(元素内容高度)

      6、滚动条的宽度

  IE7+/Chrome/Firefox（win7）  均是17px

      7、水平居中跳动问题：

修复：1\html{overflow-y:scroll;} 适合IE7,8

              2\.container{padding-left:calc(100vw - 100%);}  100vw-浏览器宽度；100%-可用内容宽度 适合IE9

     8、自定义滚动条：-webkit

整体部分  -webkit-scrollbar   //滚动条整体部分，其中的整体属性有width，height，background，border

（就和一个块级元素一样）

两端按钮 -webkit-scrollbar-button  button //滚动条两端的按钮，可以用display：none让其不显示，页可以添加背景图片，

颜色改变效果

外层轨道 -webkit-scroll-track    track //外层轨道 可以用display：none让其不显示，页可以添加背景图片，

内层轨道 -webkit-scroll-track-piece  //内层轨道，滚动条中间部分，

滚动滑块 -webkit-scroll-thumb   thumb //滚动滑块

边角：-webkit-scroll-corner corner //边角

-webkit-resize //定义右下角滑动块的样式

     9、IOS原生滚动回调效果：-webkit-overflow-scrolling:touch;

    BFC "块级格式化上下文"  页面之结果，内部元素载怎么翻云覆雨都不会影响外部结果

    overflow与固定定位：影藏失效与固定定位

1、内容设置固定定位，overflow 失效

如何避免失效：

1、overflow元素自身为包含块 （自身添加相对定位relative）

2、overflow元素的子元素为包含块 （给子元素添加一个容器，并设置relative）

3、任意合法transform声明当做包含块

     10、依赖overflow的样式表现：

css3有个属性 resize,可以拉伸元素尺寸 ，但是要想起作用，元素的overflow属性值不能是visible

resize:both 水平垂直两边拉

resize：horizontal 只有水平方向拉

resize:vertical 只有垂直方向拉

这个拖拽区域大小是17px*17px 

11、锚点定位：

1 容器可滚动 2、锚点元素在容器内

12、锚点定位于overflow选项房卡技术

13、应用如下 CSS 可以隐藏滚动条：.element::-webkit-scrollbar {display:none}

34、vertical-align:text-top/text-bottom   用于使表情图片（原始尺寸背景图标）与文字的对齐效果

35\ html中的上标和下标：上标 下标  例子：xinxuzhang[1]

36\vertiacl-align的实际应用：

(1)\让小图标和文字居中对齐 vertiacl-align负值  img{vertical-align:-10px;} 

(2)\不定尺寸图片或多行文字的垂直居中

。主题元素inline-block

。0宽度100%高度辅助元素(在哪图片后边插入一个空标签)；

。vertical-align:middle;

37、.contact *:focus{outline: none;}  //去掉浏览器默认的边，外边框线

38、visibility:hidden;使元素影藏，visible 出现，所有浏览器支持

39 input中 disabled="" 有这个属性使其禁用状态

40】 使元素实现水平垂直居中：

.header-btn{

position: relative;

text-align: center;

.header-btn a{

vertical-align: middle;

display: inline-block;

height:29px;

line-height: 29px;

font-size: 13px;

border:1px solid #fff;

border-radius: 5px;

color:#fff;

margin: 0 20px;

padding:0 5px;

text-decoration: none;

z-index: 999;

Firefox：display: -moz-box;

-moz-box-pack:center;实现水平居中

-moz-box-align:center;实现垂直居中

Safari/Opera/chrome ：

display: -webkit-box;

-webkit-box-pack:center;

-webkit-box-align:center;

w3c：display: box;

box-pack:center;

align:center;

41、text-size-adjust:none; 让屏幕旋转时文字大小不改变

42、*,*:after,*:before{-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

-o-box-sizing:border-box;

-ms-box-sizing:border-box;

box-sizing:border-box;} /* 设置任何元素，以及任何元素最后面插入的让内容，最前面插入的内容，

这些内容都不要影响这些内容上设置的padding填充，border边框都不要影响盒子的大小 */

43、*:after,*:before{

display: block;

content:"";

}/* 设置填充内容为快元素，空 */

*:after{

}/* 清除浮动 */

44、一个元素定义了position: absolute; 该元素自动转化成块元素

45\3、目前主流的动画实现方式

jQuery Animate (setInterval)：易用，低效，兼容好

CSS transition：硬件加速兼容，高效

requestAnimationFrame:易用，充分发挥浏览器性能

46、textarea在chrome中会有resize功能，加：textarea{resize:none};

47、window.top.document.compatMode可显示浏览器为什么模式

48、移动端开发中让内容超出是出现滚动条

div {

width:200px;

height:200px;

margin:0 auto;

border:1px solid black;

overflow: scroll;

-webkit-overflow-scrolling: touch;

         }

49  border-collapse: collapse;将border设置成折叠

50 去除轮播图中图片下间距：

图片设置display:block 或者vertical-aligin:middle

外层a标签设置 font-size:0;

51、 盒子居中：{

width:100px;

position:absolute;

left:50%;

top:0;

margin-left:-50px;

52、公用一张精灵图片，公用样式,在移动端只需缩放一倍（原图400px*400px）：

[class^="icon_"]{

background: url('../images/sprites.png') no-repeat;

background-size: 200px 200px;

【如果大家对程序员，web前端感兴趣，想要学习的，关注一下小编吧。我是一名前端开发程序员，现在在网上授课教前端，每晚都会在群内免费直播。从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴。加群：731771211。前端学习必备公众号ID：mtbcxx】