css基础小知识笔记-阿里云开发者社区

开发者社区> 开发与运维> 正文

css基础小知识笔记

简介: 1\css规定的定位基值有三种:标准文档流、浮动及定位 2、w3c标准:万维网制定的一系列标准。{ 结构化标准语言(HTML、XML) 表现标准语言(css) 行为标准语言(DOM,ECMAScript) } 倡导结构,样式,行为分离 3、样式就近原则...

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;

clear:both;

}

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’元素

null

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;

position: relative;

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{

clear:both;

}/* 清除浮动 */

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】


img_d8b6a4e65498fa68640adce277494c69.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章