css基础小知识笔记

最新推荐文章于 2024-05-15 22:50:31 发布

很酷的火舞

最新推荐文章于 2024-05-15 22:50:31 发布

阅读量388

点赞数

分类专栏： css3 文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_42660664/article/details/81017122

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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、&copy 版权声明标志
23、让背景图片固定不动
{
background:#444 url(../img/banner.jpg);
background-attachment:fixed;
background-size:cover;
}

24、<marquee>滚动标签知识点：

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水平：inline:<img>,<span>,<strong>,<em>,
inline-block:<input>(IE8+),<button>(IE8+)
'table-cell'元素：table-cell <td>
默认状态下支持的是：文字，图片，按钮和单元格

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、<script src="js/..." type="javascript" charset="gb2312"></script> 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 -- <html>/<textarea>
2、内容超出
3、无论什么浏览器，默认滚动条都来自<html>而不是<body>标签
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中的上标和下标：上标<sup> 下标<sub> 例子：xinxuzhang<sup>[1]</sup>
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;
}

很酷的火舞

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css基础小知识笔记

1\css规定的定位基值有三种：标准文档流、浮动及定位2、w3c标准：万维网制定的一系列标准。{ 结构化标准语言（HTML、XML）表现标准语言（css）行为标准语言（DOM，ECMAScript）}倡导结构，样式，行为分离3、样式就近原则：行内》内部》外部4\盒子模型：第一层：border 第二层：Content和padding 第三层：background图 ...
复制链接

扫一扫