聂伟柱_20210113聂伟柱

知识点总结

1 transform

transform是css3的属性,该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

用法:

transform: none | transform-functions;

常用的值有:

描述
none 定义不进行转换
translate(x,y) 定义2D转换。移动
translate3d(x,y,z) 定义3D转换。
translateX(x) 定义转换,只是用X轴的值。
translateY(y) 定义转换,只是用Y轴的值。
scale(x[.y]?) 定义2D缩放转换。
scale3d(x,y,z) 定义3D缩放转换。
skew(x-angle,y-angle) 定义沿着X和Y轴的2D倾斜转换。
rotate(angle) 定义2D旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义3D旋转。
rotateX(angle) 定义沿着X轴的3D旋转。
rotateY(angle) 定义沿着Y轴的3D旋转。
rotateZ(angle) 定义沿着Z轴的3D旋转。

2 transition

transition 属性设置元素当过渡效果,四个简写属性为:

  • transition-property 指定CSS属性的name,transition效果

  • transition-duration transition效果需要指定多少秒或毫秒才能完成

  • transition-timing-function指定transition效果的转速曲线

  • transition-delay定义transition效果开始的时候

语法:

transition: property duration timing-function delay;

transition-timing-function常用的值有:

描述
linear 规定以相同速度开始至结束的过滤效果(等于cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过滤效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过滤效果(cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过滤效果(cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过滤效果(cubic-bezier(0.42,0,0.58,1))。

3 动画

动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。

定义语法:

@keyframes animationName{    
    from {}    
    to {} 
}

使用:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
说明
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。infinite 无限次
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放 时),要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。

4 其他属性

4.1 列表属性

List-style

  • list-style:none;没有点的呈现
  • list-style:disc;呈现圆点
  • list-style:circle;空心圆
  • list-style:square;正方块

4.2 透明度

opacity:0.8; /属性值 [0-1] 0:完全透明 1:不透明/

4.3 光标

cursor: pointer; 手型

cursor: url(img/menghuan.ico),auto; 鼠标效果 图片样子

  • repeat 水平和垂直方向都重复
  • default 默认光标
  • help 指示可用的帮助(通常是一个问号或一个气球)
  • wait 指程序正忙(通常是一个表或沙漏)

4.4 设置多余文本省略

  • white-space:nowrap; //空白文本处理,nowrap不换行
  • text-overflow:ellipsis; //超出文本显示为省略号
  • overflow: hidden; //超出部分隐藏

5 布局(排版)

CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者 主视口/窗口的位置。在这将涉及更多关于页面布局技术的细节:

  • 正常布局流
  • display 属性
  • 弹性盒子
  • 网格
  • 浮动
  • 定位
  • CSS 表格布局
  • 多列布局

每种技术都有它们的用途,各有优缺点,相互辅助。

5.1 正常布局流(Normal flow)

正常布局流(normal flow)是指在不对页面进行任何布局控制时,浏览器默认的HTML布局方式。

<body>
    <p>I love my cat.</p>
    <ul>        
        <li>Buy cat food</li>   
        <li>Exercise</li>        
        <li>Cheer up friend</li>    
    </ul>
    <p>The end!</p>
</body>

默认情况下,浏览器的显示如下:

HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。

当你使用css创建一个布局时,你正在离开正常布局流,但是对于页面上的多数元素,正常布局流将完 全可以创建你所需要的布局。从一个结构良好的Html文档开始是如此重要,因为你可以按照默认的方式 来搭建页面,而不是自己发明轮子。

5.2 浮动

float 属性初只用于在成块的文本内浮动图像,但是现在它已成为在网页上创建多列布局的常用 工具之一。

我们先从一个非常简单的例子开始,包括在图像周围浮动一个文本块。

<h1>Simple float example</h1>                
    <img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf">          
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>                
    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
body {    
    width: 90%;    
    max-width: 900px;    
    margin: 0 auto; }
p {    
    line-height: 2;    
    word-spacing: 0.1rem; 
}      

使用float来让图片周围的文本浮起来。

img {  
    float: left;  
    margin-right: 30px; 
}

浮动元素 (这个例子中的 元素)会脱离正常的文档布局流,并吸 附到其父容器的左边 (这个例子中的 元素)。在正常布局中位于该浮动元素之下的内容,此时会 围绕着浮动元素,填满其右侧的空间。

注意浮动内容仍然遵循盒子模型诸如外边距和边界。我们设置一下图片右侧的外边距就能阻止右 侧的文字紧贴着图片。

5.3 多列浮动

<h1>2 column layout example</h1> 
<div>  
    <h2>First column</h2>  
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> 
</div>

<div>  
    <h2>Second column</h2>  
    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
</div>
body {  
    width: 90%;  
    max-width: 900px;  
    margin: 0 auto; 
}

在宽度达到900px之前,整个视图的宽度将达到90%,在超过900px后,它将保持在这个宽度,并在视 口中居中。

默认情况下,子元素(这个 <h1> 和两个 <div> )将跨越整个body宽度的100%。如果我们希望将两个 <div> 放在一起,那么我们需要将它们的宽度(父元素的宽度的100%)设置为更小,这样它们就可以彼此 匹配。

div:nth-of-type(1) {    
    width: 48%;    
    float: left; 
}
div:nth-of-type(2) {    
    width: 48%;    
    float: right; 
} 
/*    
nth-of-type(n) 选择器匹配同类型中的第n个同级兄弟元素 
*/

我们所有列使用宽度百分比——这是一个很好的策略,因为它创建一个流式布局(liquid layout),一种调整为不同的屏幕尺寸,并在较小的屏幕尺寸下保持相同的列宽度比例。

5.4 清除浮动

在上例中第二个 div 元素下面添加如下代码:

<footer>  
    <p>&copy;2020 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.</p> 
</footer>

clear 属性,当你把这个应用到一个元素上时,它主要意味着"此处停止浮动"——这个元素和源码中后 面的元素将不浮动,除非将一个新的 float 声明应用到此后的另一个元素。

footer {  
    clear: both; 
}

clear 可以取三个值:

  • left :停止任何活动的左浮动
  • right :停止任何活动的右浮动
  • both :停止任何活动的左右浮动

学习心得

通过今天的学习,使我认识到专业知识还需生活实践的累计才能更好的解决。同时,多动手写代码也能是我们对所犯的错误得到解决。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1