1. 通配符选择器: *{...}; 选择所有元素; 2. HTML标签选择器:p{...} 、#p{...}、.p{...}; 选择指定的所有标签,指定id,指定类的所有标签; 3. 类选择器选择有特定 class 属性的 HTML 元素,如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。选择所有具有 class="center" 的 <p> 元素:p.center;
由以上选择器进行扩充之后
1. 群组选择器: E , F{sRules},选择所有E和F元素。 2. 后代选择器: E F{sRules},选择所有被E元素包含的F元素,后代选择器就是空格符。 3. 子选择器: E > F{sRules},E>F选择器为特定元素E的下一级的子元素F,不包括下下级及其更下级,“>” 左右空格无影响。 4. 相邻同级选择器:E+F{sRules},选择紧贴在E元素之后F元素,元素E与F必须同属一个父级,“+” 左右空格无影响。 5. 兄弟选择器:E~F{sRules},选择E元素后面的所有兄弟元素F,元素E与F必须同属一个父级,“~” 左右空格无影响。 6. 属性选择器:
7. css动态伪类选择器,:visited、:hover、:link、:active
8. css结构性伪类选择器,
:lang() 选择带有lang属性元素
:not() CSS3排除某类元素
:root CSS3选择根元素
:first-child 第一个元素
:last-child CSS3最后一个子元素
:only-child CSS3仅有的一个子元素
:last-of-type 最后一个指定选择器的子元素
:nth-child() CSS3第n个子元素
:nth-last-child() CSS3倒数第n个子元素
:first-of-type CSS3第一个同级兄弟元素
:last-of-type CSS3最后一个同级兄弟元素
:only-of-type CSS3唯一的一个同级兄弟元素
:nth-of-type() CSS3第n个同级兄弟元素
:nth-last-of-type() CSS3倒数第n个同级兄弟元素
:empty CSS3没有任何子元素
:target CSS3URL指向的元素
提示
:nth-of-type(odd) 、:nth-of-type(even)用于选择奇数、偶数位置的选择器
9. UI元素状态伪类选择器
:focus 输入焦点
:checked CSS3选中状态的元素
:enabled CSS3可用状态的元素
:disabled CSS3禁用状态的元素
:read-only CSS3只读状态的元素
:read-write CSS3能编辑的元素
:optional CSS3选择非必填元素
:required CSS3选择必填元素
:in-range CSS3选择有限定范围的元素
:indeterminate CSS3选择处于不确定状态的表单元素
:default CSS3默认状态的表单元素
:focus-within css3元素或者后代元素获得焦点
:out-of-range css3当值处于范围之外
10.css伪对象选择器
::first-letter CSS3第一个字符的样式
::first-line CSS3第一行的样式
::before CSS3对象前发生的内容
::after CSS3对象后发生的内容
::placeholder CSS3设置文字占位符
::selection CSS3设置选择框样式
::cue CSS3字幕提示
display: none / block /flex /grid /inline / block-inline /flex-inine / grid-inline ;
transform、transition、animate、@media、@keyframe、@import、@font-face、@page、woff字体、css切片
animation 所有动画属性的简写属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
transition 简写属性,用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
盒内元素的Flex样式:
网格属性的大小和宽度都是相对于网格容器元素本身。
使用网格的元素可用的网格属性:grid-area:a; (所处的网格)、align-self、justify-self(代替网格的相关属性)。
a:after { content: " (" attr(href) ")"; } ;在每个链接后面插入内容。
width: calc(100% - 100px); 用于动态计算长度值,需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px),任何长度值都可以使用calc()函数进行计算,支持 "+", "-", "*", "/" 运算。
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); 函数定义了一个贝塞尔曲线(Cubic Bezier),贝塞尔曲线曲线由四个点 P0,P1,P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是(0,0)并且表示初始时间和初始状态,P3是(1,1)并且表示最终时间和最终状态。
rgb()、rgba()、linear-gradient()、radial-gradient()、repeating-linear-gradient()、repeating-radial-gradient(),普通颜色、渐变色、渐变图像。
var(),定义一个名为 "--main-bg-color" 的属性,然后使用 var() 函数调用该属性。
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
clip:rect (top, right, bottom, left); 属性,用于裁剪绝对定位的元素;
clip-path属性使您可以将元素裁剪为基本形状或 SVG 源,clip-path 将替代废弃的 clip 属性,支持的形状更多。
box-shadow: [inset(阴影在元素内部)] offset-x offset-y blur-radius spread-radius [color],可以设定多组效果,每组参数值以逗号分隔。
inset:可选参数。把其投影设置为内阴影。阴影落在盒子内部,这样看起来就像是内容被压低了。此时阴影会在边框之内(即使是透明边框)、背景之上、内容之下。若不设置,即为默认投影方式是外阴影。默认阴影在边框外,即阴影向外扩散。
<offset-x>:设置水平偏移量,正值阴影则位于元素右边,负值阴影则位于元素左边。取值参见<length>。
<offset-y>:设置垂直偏移量,正值阴影则位于元素下方,负值阴影则位于元素上方。取值参见<length>。
<blur-radius>:设置阴影模糊值。值越大,模糊面积越大,阴影就越大越淡。不能为负值。默认为0,此时阴影边缘锐利。对于长而直的阴影边缘,它会创建一个过渡颜色用于模糊以阴影边缘为中心、模糊半径为半径的局域,过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。取值参见<length>。
<spread-radius>:可选参数。设置阴影外延值。取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。需要考虑inset。取值参见<length>。
<color>:可选参数。设置阴影的颜色。如果没有指定,则由浏览器决定——通常是<color>的值,不过目前Safari取透明。取值参考<color>。
使用 inline-block 布局之后元素之间去除边距等因素后,无法完全紧靠的原因:为了方便理解,可以将 inline-block 容器内的元素看成是两个文字,文字与文字之间不可能是连在一起的,肯定是有间隙的。
解决办法:
当容器的内边距设置100%且高度为0时,元素高度取的是容器的宽度单位。height:0;padding-bottom:100%;
属性用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。
transform CSS3 3D 转换、resize元素大小调整、outline 元素外轮廓。
resize: none|both|horizontal|vertical;
语法说明如下:
在使用 resize 属性时还需要注意以下几点:
粘性定位sticky是fixed和relative的结合,例如top:0,不为0是为relative,当距离父元素的顶部为0是转换为fixed,存在兼容性问题;
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
</div>
</body>
</html>
position的属性中,absolute生成绝对定位的元素,是相对于 static 定位以外的第一个父元素进行定位;relative则是生成相对定位的元素,相对于其正常位置进行定位。
@media screen 和@media print and (max-width:720px),定义不同媒体类型、大小下的不同样式;
CSS 计数器根据规则来递增变量,CSS 计数器使用到以下几个属性:
viewport是用户网页的可视区域。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
initial-scale属性用于设置页面初始的缩放比例,缩放比例为理想视口
与视觉视口
的比值。
理想视口:文档宽度和屏幕宽度一致。理想视口宽度 = 移动设备横向分辨率 / DPR
视觉视口 visual viewport:如果用户缩小网站,我们看到的网站区域将变大,此时视觉视口也变大了,同理,用户放大网站,我们能看到的网站区域将缩小,此时视觉视口也变小了。 视觉视口的宽度 = 理想视口宽度 / 缩放比例
参考链接:https://blog.csdn.net/leman314/article/details/111936863
px的大小在不同屏幕上是一样的,是一个绝对的单位。
user-select属性规定是否能选取元素的文本。cursor属性定义元素的鼠标样式。
pointer-events,定义元素如何响应鼠标的动作;
@keyframes audio_playing {
0% {
background-position: 0 -20px;
}
30% {
background-position: 0 -20px;
}
30.1% {
background-position: 0 -41px;
}
61% {
background-position: 0 -41px;
}
61.1% {
background-position: 0 -62px;
}
100% {
background-position: 0 -62px;
}
}
div 内容为纯数字很长时无法折行解决,css设置word-wrap:break-word;word-spacing:normal; word-break: break-all;后可以解决,同时必须设置width属性。
flex容器不能被内部元素撑开,出现水平滑块。解决办法是内部使用不是flex的容器,然后撑开它。ul不换行,撑开出现水平滑块 white-space:nowrap;
table的td不能通过css指定宽度用于撑开table,需要在td内放置块级盒子撑开td,最终撑开table;
border-radius属性可以单独指定某个角设置,border-left-top-radius;filter,为图形增加滤镜样式(filter:blur(15px));
@font-face 中,- local()表示在本机(客户端)查找该字体,如果本机已经安装了,就不用下载了。url()表示字体在服务器上的位置,format()用来说明字体格式。
它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加,该空格占据宽度受字体影响明显而强烈, 此空格其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。 此空格其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
滚动条的样式,只支持Chrome浏览器。
::-webkit-scrollbar {
-webkit-appearance: none;
background: transparent;
width: 8px!important;
height: 6px!important;
}
:hover::-webkit-scrollbar-thumb {
display: block;
border-radius: 4px;
box-shadow: 0 0 0 2px transparent;
}
::-webkit-scrollbar-thumb {
background: #e1e1e1;
border-radius: 4px;
display: none;
border-style: solid;
border-color: transparent;
border-width: 2px;
background-clip: padding-box;
}
css颜色使用透明度的优缺点。
当网页存在多层颜色的时候,透明度会导致颜色重叠出现色差,不同的是,字体颜色带有透明度时,能够根据背景自适应不同的背景颜色产生不同的效果。
文字超出宽度时自动加省略号: text-overflow: ellipsis,宽度可设置max/min/fit-content,https://developer.mozilla.org/zh-CN/docs/Web/CSS/width
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
text-overflow: ellipsis;
宽度100%的时候,需要white-space+overflow+etxt-overflow组合才能生效。
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
定义超出几行后出现省略号。
flex布局,flex-direction为column时,弹性布局会因为子元素超出父元素高度,导致flex盒子被撑起来。设置hidden; 可以避免父元素被撑开,保证子元素的100%跟父元素一致。
:focus-visible,当元素匹配:focus伪类并且客户端(UA)的启发式引擎决定焦点应当可见(在这种情况下很多浏览器默认显示“焦点框”。)时,:focus-visible 伪类将生效。
增加和去除边框导致元素的大小发生变化,同时影响到其他元素产生位移的偏差感:可以调整为边框一直存在,当不需要展示时显示透明,需要的时候再展示颜色。
overscroll-behavior,overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior
float状态下的元素新解:一个左浮动元素左侧元素使用margin-left负数偏移时,也会跟着浮动偏移,而不会和正常元素一样,保持原来的位置;通过这个特点可以让很多效果实现起来更加简单;
带文字的水平分割线,可以通过after、before伪类,和flex布局进行简易实现;opacity+height,实现抽屉式的淡出淡入;pointer-events,可实现禁止用户点击;
/*
##PC
##1281px或更高分辨率
*/
@media (min-width: 1281px) {
//CSS
}
/*
##笔记本或PC
##1025px - 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
/*
##平板电脑/Ipad竖屏
##768px - 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##平板电脑或Ipad横屏
##768px - 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##低分辨率的平板电脑或横屏的手机
##481px - 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##多数竖屏的智能手机
##320px - 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
//CSS
}
苹果手机底部安全区:env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量:
而env()和constant()函数有个必要的使用前提,当网页设置viewport-fit=cover的时候才生效,根据微信小程序的表现和我在实际真机测试时这两个函数生效,推测小程序里的viewport-fit默认是cover。在IOS11.2系统以前,可以使用constant()函数,但是在IOS11.2系统以后,这个函数就被废弃了,被env()函数替代了。
水平分割线,中间带文字的css样式,如下:
.horizontal{
display: flex;
align-items: center;
white-space:nowrap;
width:100%;
&:before{
width: 20%;
content: " ";
border-top: 1px solid #000000;
}
&:after{
width: 80%;
content: " ";
border-top: 1px solid #000000;
position: relative;
top:50%;
}
}
场景:加载前图片所在容器为10px,图片为50px,图片加载后撑开盒子,导致二次布局变化(抖动)
给图片的上层容器加个最小宽高,防止页面加载图片前后导致长宽变化,页面发生抖动。
fixed:元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时,容器由视口改为该祖先。
inline盒子的dom使用transform属性是无效的。
z-index在以下情况下会失效:
active,可以实现鼠标按下出现,鼠标抬起后消失的样式。
匹配指定类型的最后一个元素,last-of-type
transition和animate都有开始结束的js事件。
BFC全称是Block Formatting Context,意思就是块级格式化上下文。可以把BFC看做一个容器,容器里边的元素不会影响到容器外部的元素。BFC是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。
块(Block)、包含块(Containing Block)、盒子(Box)、块级盒子(Block-level Box)、块盒子(Block Box)、块容器盒子(Block Containning Box)和块级元素(Block-level Element)之间的关系:
相关文档:https://www.zhihu.com/question/568222940/answer/2770765021
给父级元素添加以下任意样式
相关文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
默认情况下ul下的li都会自带一个列表样式,如果个ul设置了margin和padding为0后,无论是默认的还是自己设置的list-style都不会生效。
pointer-events 属性是一个指针属性,是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。
filter: grayscale(.95);
在通过transform进行平移(translate),使用百分号单位时,是相对于自身元素的大小,比如50%代表元素自身大小的50%。对行内元素无效。
/* 父元素内上下左右居中*/
top: 50%;
left: 50%;
transform: translate(-10%,-10%);
translate不会对其它元素产生任何影响
背景色和opacity都不是透明的,但是从表面来看元素变透明了,实际上并不是被fixed的元素变透明了,只是因为这个元素没有z-index属性,跟底层元素进行了重叠,给个z-index就好。