CSS 进阶篇

最新推荐文章于 2024-02-24 11:55:19 发布
最新推荐文章于 2024-02-24 11:55:19 发布
阅读量2.2k 收藏 14
点赞数 4
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanshileiai/article/details/47373945
版权

一、Css2 高阶知识（常用）

1. css 优先权

优先权（从低到高）

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

2. 背景定位（background-position）

可以利用 background-position 属性改变图像在背景中的位置。

body
  { 
    background-image:url('/img/bg_03.png');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

3. 缩进文本 （text-indent）

把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

p {text-indent: 5em;}

同时也可用做文本信息隐藏（-99999px）

4. 字（单词）间隔 （word-spacing）

p.spread {word-spacing: 30px;}

5. 字母间隔（letter-spacing）

h1 {letter-spacing: -2px;}

6. 字符大小写转换（text-transform）

none（默认无操作）
uppercase（全大写）
lowercase（全小写）
capitalize（首字母大写）

h1 {text-transform: uppercase;}

7. 处理空白符（white-space）

1. 值 nowrap（防止元素中的文本换行）

p{white-space: nowrap;}

2. 单行文本溢出显示 …（text-overflow）

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

8. table 表格（border-collapse 单一边框）

border-collapse 属性设置是否将表格边框折叠为单一边框：

table{
  border-collapse:collapse;
}

table,th, td{
  border: 1px solid black;
}

9. 选择子元素（>）

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

10. 选择相邻兄弟 （＋）

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

11. 伪类 (Pseudo-classes)

CSS 伪类用于向某些选择器添加特殊的效果。

1. 锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

2. CSS2 - :first-child 伪类（第一个子元素）

可以使用 :first-child 伪类来选择元素的第一个子元素。

<style type="text/css">
p:first-child{
    font-weight:bold
}
</style>

<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>

3. :first-line 伪元素（首行）

“first-line” 伪元素用于向文本的首行设置特殊样式。

p:first-line{
  color:#ff0000;
  font-variant:small-caps;
}

“first-line” 伪元素只能用于块级元素。

4. :first-letter 伪元素（首字母）

“first-letter” 伪元素用于向文本的首字母设置特殊样式：

p:first-letter {
  color:#ff0000;
  font-size:xx-large;
}

5. CSS2 - :before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。

h1:before {
  content:url(logo.gif);
}

6. CSS2 - :after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。

h1:after {
  content:url(logo.gif);
}

12. 使用 margin 属性来水平对齐

可通过将左和右外边距设置为 “auto”，来对齐块元素。

.center {
    margin-left:auto;
    margin-right:auto;
    width:70%;
    background-color:#b0e0e6;
}

13. 改变光标 （cursor:pointer）

span.pointer {cursor:pointer;}
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

14. 透明度 （opacity）

定义透明效果的 CSS3 属性是 opacity。

img{
    opacity:0.4;
    filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

15. 颜色透明（RGBA）

background: rgba(0, 0, 0, 0.6) ;

二、Css3 新特性

CSS3 标准
W3C 仍然在对 CSS3 规范进行开发。
不过，现代浏览器已经实现了相当多的 CSS3 属性。

１. CSS3 圆角边框（border-radius）

div{
    text-align:center;
    border:2px solid #a1a1a1;
    border-radius:25px;
    -moz-border-radius:25px; /* 老的 Firefox */
}

2. CSS3 边框阴影（box-shadow）

语法：box-shadow: h-shadow v-shadow blur spread color inset;

div{
    width:300px;
    height:100px;
    background-color:#ff9900;
    -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
    box-shadow: 10px 10px 5px #888888;
}

3. CSS3 文本阴影（text-shadow）

您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

h1{
    text-shadow: 5px 5px 5px #FF0000;
}

4. CSS3 自动换行（word-wrap）

在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分。
允许对长单词进行拆分，并换行到下一行：

p {word-wrap:break-word;}

5. CSS3 字体（@font-face）

使用您需要的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

<style> 
@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}

div {
    font-family:myFirstFont;
}
</style>

6. CSS3 2D 转换

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 需要前缀 -ms-。

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

1. translate()方法 （位置移动）

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

div {
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px);       /* IE 9 */
    -webkit-transform: translate(50px,100px);   /* Safari and Chrome */
    -o-transform: translate(50px,100px);        /* Opera */
    -moz-transform: translate(50px,100px);      /* Firefox */
}

2. rotate()方法（顺时针旋转角度）

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);       /* IE 9 */
    -webkit-transform: rotate(30deg);   /* Safari and Chrome */
    -o-transform: rotate(30deg);        /* Opera */
    -moz-transform: rotate(30deg);      /* Firefox */
}

3. scale() 方法（改变尺寸）

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

div {
    transform: scale(2,4);
    -ms-transform: scale(2,4);  /* IE 9 */
    -webkit-transform: scale(2,4);  /* Safari 和 Chrome */
    -o-transform: scale(2,4);   /* Opera */
    -moz-transform: scale(2,4); /* Firefox */
}

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

4. skew() 方法（元素翻转角度）

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

div {
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg);   /* IE 9 */
    -webkit-transform: skew(30deg,20deg);   /* Safari and Chrome */
    -o-transform: skew(30deg,20deg);    /* Opera */
    -moz-transform: skew(30deg,20deg);  /* Firefox */
}

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

5. matrix() 方法（2D 转换方法组合）

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

7. CSS3 3D 转换

Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

1. rotateX() 方法（X 轴旋转）

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

div {
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
    -moz-transform: rotateX(120deg);    /* Firefox */
}

2. rotateY() 方法（Y 轴旋转）

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

div {
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
    -moz-transform: rotateY(130deg);    /* Firefox */
}

8. CSS3 过渡（transition）

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

1. transition: width

应用于宽度属性的过渡效果，时长为 2 秒：

div {
    transition: width 2s;
    -moz-transition: width 2s;  /* Firefox 4 */
    -webkit-transition: width 2s;   /* Safari 和 Chrome */
    -o-transition: width 2s;    /* Opera */
}

div:hover {
    width:300px;
}

2. width 2s, height 2s, transform 2s（多项改变）

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

div {
    transition: width 2s, height 2s, transform 2s;
    -moz-transition: width 2s, height 2s, -moz-transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    -o-transition: width 2s, height 2s,-o-transform 2s;
}

所有的转换属性

属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。3
transition-delay规定过渡效果何时开始。默认是 0。3

3. 使用所有过渡属性

div{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Firefox 4 */
    -moz-transition-property:width;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:linear;
    -moz-transition-delay:2s;
    /* Safari 和 Chrome */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
    /* Opera */
    -o-transition-property:width;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
}

4. 简写的 transition （property，duration，timing-function，delay）

属性的名称，花费的时间，时间曲线，何时开始

div {
    transition: width 1s ease 2s;
    /* Firefox 4 */
    -moz-transition:width 1s ease 2s;
    /* Safari and Chrome */
    -webkit-transition:width 1s ease 2s;
    /* Opera */
    -o-transition:width 1s ease 2s;
}

9. CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则
如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

1. 关键字 “from”“to”

@keyframes myfirst{
    from {background: red;}
    to {background: yellow;}
}
/* Firefox */
@-moz-keyframes myfirst {
    from {background: red;}
    to {background: yellow;}
}
/* Safari 和 Chrome */
@-webkit-keyframes myfirst {
    from {background: red;}
    to {background: yellow;}
}
/* Opera */
@-o-keyframes myfirst {
    from {background: red;}
    to {background: yellow;}
}

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
1. 规定动画的名称
2. 规定动画的时长
把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：

div {
    animation: myfirst 5s;
    -moz-animation: myfirst 5s; /* Firefox */
    -webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
    -o-animation: myfirst 5s;   /* Opera */
}

2. 0% 和 100% 选择器

必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

例：当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

@keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
/* Firefox */
@-moz-keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
/* Safari 和 Chrome */
@-webkit-keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
/* Opera */
@-o-keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

3. 改变背景色和位置：

@keyframes myfirst{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
浏览器兼容代码省略...

下面的表格列出了 @keyframes 规则和所有动画属性：

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性，除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 “ease”。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。3
animation-play-state规定动画是否正在运行或暂停。默认是 “running”。3
animation-fill-mode规定对象动画时间之外的状态。3

4. 使用所有动画属性

div{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    浏览器兼容代码省略...
}

5. 使用简写的动画 animation 属性

动画的名称,一个周期所花费的秒,速度曲线,何时开始,播放的次数

div{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Firefox: */
    -moz-animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 和 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
    /* Opera: */
    -o-animation: myfirst 5s linear 2s infinite alternate;
}

10. CSS3 多列

通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！

1. CSS3 创建多列（column-count）

把 div 元素中的文本分隔为三列：

div{
    -moz-column-count:3;    /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
}

2. CSS3 规定列之间的间隔（column-gap）

规定列之间 40 像素的间隔：

div{
    -moz-column-gap:40px;       /* Firefox */
    -webkit-column-gap:40px;    /* Safari 和 Chrome */
    column-gap:40px;
}

3. CSS3 列规则（column-rule）

规定列之间的宽度、样式和颜色规则：

div{
    -moz-column-rule:3px outset #ff0000;    /* Firefox */
    -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
    column-rule:3px outset #ff0000;
}

11. CSS3 用户界面

在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

1. CSS3 Resizing（可调整大小）

规定 div 元素可由用户调整大小：

div{
    resize:both;
    overflow:auto;
}

2. CSS3 Box Sizing

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
border 或 padding的数值计入父宽高内（意思为不会增加父容器宽度）。

规定两个并排的带边框方框：

div{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box;  /* Safari */
    width:50%;
    float:left;
}

3. CSS3 Outline Offset

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

规定边框边缘之外 15 像素处的轮廓：

div{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

三、编写 CSS 注意事项

1. 修饰选择器（尽量少用）

能写.nav{}就尽量不要写ul.nav{}。过分修饰选择器将影响性能，影响 class 复用性，会增加选择器私有度。这些都应当竭力避免的。
如果想描述我们规划的 class 作用范围，可以在选择器前加上注释，如下写法：

/*ul*/
.nav{}

这样我们就能在不影响代码私有度的前提下获知 class 作用范围。

2. 布局（宽度和高度）

所有内部组件都不要声明宽度，而由其外层父容器块（格栅系统）来决定。理想情况下，格栅系统应当用百分比设定。
坚决不要声明高度。高度应当仅用于尺寸已经固定的东西，例如图片。在 p，ul，div 等元素上不应当声明高度。如果需要的话可以写 line-height，这个更加灵活。。

3. 简写（谨慎使用）

编写像

background:red;

这样的属性的确很省事，但是你这么写的意思其实是同时声明 

background-image:none;
background-position:top left;
background-repeat: repeat;
background-color:red;

最优应当改为 

background-color:red;

类似的，像 margin:0; 这样的声明的确简洁清爽，但是还是应当尽量写清楚。如果你只是想修改底边边距，就要具体一些，写成 margin-bottom:0;。
简写虽然是好东西，但是注意切勿滥用。

4. ID（CSS 里坚决不要用 ID）

在 HTML 里 ID 可以用于 JS 以及锚点定位，但是在 CSS 里只要用 class，一个 ID 也不要用。

Class 的优势在于复用性，而且私有度也并不高。私有度非常容易导致问题，所以将其降低就尤为重要。ID 的私有度是 class 的 255 倍，所以在 CSS 中坚决不要使用。

5. 选择器（保持选择器简短高效）

  • 结构复杂的选择器将会影响性能。（如.sidebar h3 span{}为三层，.content ul p a{}是四层），层级越深浏览器的消耗就越大。选择器应当尽量简短，更好的办法是直接给你想要添加样式的元素直接添加一个 class。
  • class 名则不应当过于简略，例如.user-avatar就远比 .usr-avt 好。

6. !important（优先级高，一般情况不要用）

用 !important 提升优先级也可以，例如如果你要让某条规则一直生效的话，可以用 .error{ color:red !important; }。

避免主动使用 !important。例如 CSS 写得很复杂时不要用它来取巧，要好好整理并重构之前的部分，保持选择器简短并且避免用 ID 将效果拔群。

7. 魔数与绝对定位（「凑巧有效果」的数字）

魔数（Magic Number）是指那些「凑巧有效果」的数字，这东西非常不好，缺乏拓展性。
例如 .dropdown-nav li:hover ul{ top:37px; } 把下拉菜单移动下来，远非良策，因为这里的 37px 就是个魔数。37px 会生效的原因是因为这时 .dropbox-nav 碰巧高 37px 而已。

这时你应该用 .dropdown-nav li:hover ul{ top:100%; }，也即无论 .dropbox-down 多高，这个下拉菜单都会往下移动 100%。
每当你要在代码中放入数字的时候，请三思而行。

8. Debugging（调试）

如果你要解决 CSS 问题的话，先把旧代码拿掉再写新的。如果旧的 CSS 中有问题的话，写新代码是解决不了的。
把 CSS 代码和 HTML 部分删掉，直到没有 BUG 为止，然后你就知道问题出在哪里了。
有时候写上一个 overflow:hidden 或者其它能把问题藏起来的代码的确效果立竿见影，但是 overflow 方面可能根本就没问题。所以要治本，而不是单纯治标。

中国风2012
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS进阶指引
01-19
你不要觉得CSS没什么重要可言？最近几年他成为一个...这篇文章将带领大家和CSS一起旅行，很多人都说写CSS并不是编程，我就不同意，我说写CSS同样是有趣的，富有挑战性的。CSS预处理器让我们一起面对吧，在世界上写CS
javascript 进阶篇2 CSS XML学习
10-28
CSS我觉得应该没有不会的吧。。不过因为我自己不大会于是还是补在这里好了
【前端学习】D3：CSS进阶
甜鲸鱼的博客
03-08 913
这篇文章为我重新系统学习前端时做的一些笔记。本篇主要记录了盒子模型与浮动属性的使用。
【前端学习笔记】CSS3进阶属性(渐变、过渡、动画)
Adlerian的博客
04-05 305
本文主要是CSS3的代码的渐变和2D、3D等等过渡属性
CSS进阶知识：伪元素选择器（重要）
最新发布
我就知道你会来，我们一起进步吧！
02-24 428
伪元素选择器可以通过css创建新的标签元素，不需要html标签，从而简化html结构。4.before在父元素内容的前面创建元素，after在父元素内容的后面插入元素。1.before和after创建一个元素，但是属于。6.语法：element::before{}2.因为新创建的元素在文档中找不到，所以叫。5.伪元素选择器和标签选择器一样，
CSS进阶总结
m0_52336378的博客
06-17 504
每个浏览器都有一些自带的或者共有的默认样式，或造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致；/*内边距，上下左右，设置属性，会把盒子撑大,不能设置负数，负数就还原初始状态*//*融合行内于块级，用通俗的话讲，就是不独占一行的块级元素*//*复合样式：可以设置4个值，3个值，2个值，1个值*//*复合样式,可以设置4个值，3个值，2个值，1个值*//*复合样式：边框粗细1px，实线，红色线*//*外边距，可以设置负数，不会撑大盒子*//*第一种：右浮动*/
CSS进阶
李梵依的博客
11-03 88
CSS进阶的学习与复习
超详细的学习笔记：CSS进阶（附代码示例）
lbcbjtlhmjq的博客
07-09 272
作用:根据 HTML标签的套关系，选择父元素 子代中 满条件的元素选择器语法:选择器1 > 选择器2{ css }2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，i设置样式。作用:同时选择多组标签，设置相同的样式选择器语法:选择器1，选择器2{ css }(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。
CSS（进阶）
specialll的博客
07-20 782
一、CSS进阶         1. CSS单位             （1）绝对单位                 在CSS中，绝对单位定义的大小是固定的，使用的是物理度量单位，显示效果不会受到外界因素影响。绝对单位一般多用于传统平面印刷，而极少用于前端开发。在前端开发中，我们都不会用到绝对单位。             （2）相对单位                 在CSS中，
Vue学习笔记进阶篇之单元素过度
12-09
可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js 单元素/组件的过度 Vue 提供了 transition 的封装组件，...
css3进阶之less实现星空动画的示例代码
12-14
本文介绍了css3进阶之less实现星空动画的示例代码，分享给大家，具体如下： 效果动图如下：   预览链接和代码在我的codepen： https://codepen.io/lio-mengxiang/pen/YzKrEde  知识点预览 这篇文章的 less技巧 + ...
CSS 进阶
Hello_super的博客
02-17 779
CSS 变形 transform 1、translateX/Y **变形（transform）： ** 就是指通过CSS来改变元素的形状或位置，变形不会影响到页面的布局。使用transform标签来设置元素的变形效果。 平移： 平移元素，百分比是相对于自身来计算的。 translateX()，沿着x轴方向平移； translateY()，沿着y轴方向平移； translateZ()，沿着z轴方向平移； transform: translateX() translateY(); /*变形的多个值之间使用
CSS进阶之形变与动画 (一)：transform、垂直居中总结、transition动画、animation动画、vertical-align
Good Good Study,Day Day Up!
05-30 4319
水平居中的方案行内级元素：设置父元素的 text-align:center块级元素：设置当前块级元素(要有宽度) margin:0 auto绝对定位：元素有宽度的情况下，设置left0、right0、margin:0 auto；flex布局：通过设置justify-content: center;垂直居中的方案绝对定位： 元素要有高度的情况下，设置top0、bottom0、margin:auto 0;flex布局 通过设置align-
css进阶
巨星不易，努力前行
08-23 471
css选择器 1.盒子模型 1.1边框（border） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css进阶</title> <style> .box{ ...
关于CSS的一些进阶知识（持续更新）
小文同学的博客
05-28 132
关于学习 CSS当中所做的笔记和总结，如有错误，欢迎指出
css复习二
m0_70305679的博客
07-01 33
选择器进阶：{复合选择器：{ 后代选择器：作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素选择器语法：选择器 1 选择器2{cSs}结果：在选择器1所找到标签的后代（儿子、孙子、重孙子.)中，找到满足选择器2的标签，设置样式注意点：1.后代包括：儿子、孙子、重孙子…2.后代选择器中，选择器与选择器之前通过空格隔开子代选择器：{作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素选择器语法：选择器1>选择器2{CSs}
Css进阶练习(实现抽屉网样式布局)
05-26
抽屉网是一种常见的网页布局，可以用 CSS 实现。下面是一个简单的实现方法： HTML 结构： ```html <!-- 网页主体内容 --> <!-- 抽屉内容 --> ``` CSS 样式： ```css .container { display: flex; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值