css动画使用背景图片卡顿_CSS入门学习笔记（二）：布局与定位

2024-06-01 19:01:18

在CSS学习使用的过程中有一个方法可以检验出自己的错误，那就是border大法！

图片素材网站：wall haven；

透明属性：background-color:rgba(0,0,0,0.5)

background-position:centre centre 可以让背景图片水平垂直居中；

background-size:cover;可以让图片自适应div。

css优先级：越具体优先级越高，写在后面的覆盖写在前面的，important最高优先级，少用！

CSS中高度是由什么决定的？

块级高度是由其内部文档流元素的总和高度决定的。

文档流：文档内元素的流动方向。内联元素从左往右流动，如果宽度不够另起一行。块级元素从上往下依次流动。world-break:break-all;这个属性可以让一个英文单词换行。回车就是一个空格。

内联元素span的高度由什么决定的？

设置字体font-size:100px，这里的100px指的是随便一个字最高的一点到随便一个字最低的一点的高度。比如图中字母b的最上方到字母g的最下方的一个高度。这是css中一个难点。

如上图，里面的建议行高就可以理解为line-height，line-height 的值是多少像素，那么 span 所占的高度就是多少。一般来说，不同的字体，设计师默认会给他设计一个建议行高。每种字体不一样。但是设置line-height就可以确定具体高度了。

position fixed:脱离文档流，高度不受父元素控制。

用CSS画一个三角形

div{border:10px solid transparent;width:0px;height:0px;border-top-color:transparent;border-right-color:transparent;border-left-color:#E6686A;border-top-width:0;
}

css小技巧

animation属性用来指定一组或多组动画，每组之间用逗号相隔。可以查看mdn

css动画使用背景图片卡顿_CSS入门学习笔记（二）：布局与定位相关推荐

html css背景图片精灵技术,HTML入门学习笔记--CSS背景和精灵图(5)
33-背景色彩 1.如何设置标签的背景色彩? 在CSS中有1个background-color:属性, 就是专门用来设置标签的背景色彩的取值: 具体单词 rgb rgba 106进制快捷键: bc ...
[css] 如何设置背景图片不随着文本内容的滚动而滚动？
[css] 如何设置背景图片不随着文本内容的滚动而滚动? 直接对div设置background:url不就好了嘛?上代码.<!DOCTYPE html> <html lang=&qu ...
[css] 如何让背景图片固定不随滚动条滚动
[css] 如何让背景图片固定不随滚动条滚动 background-attachment:fixed 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .all_bg { background: url(../imag ...
怎么把html背景图片,css如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本文就给大家介绍css怎样设置背景图片. css可以通过background-ima ...
如何用CSS动画特效让图片旋转起来
杜老师逆战班学员 2020.02.22 我们通常浏览网页,基本上看过去都是呈现着各种文字加图片的2D效果信息,作为一名前端开发工程师非常重要的工作就是要让用户看到网页时有眼前一亮.耳目一新的感觉,用户 ...
怎么修改背景图片大小的HTML代码,css如何改变背景图片大小？
我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题.那么css如何改变背景图片大小?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 在CSS中,想要改变背景图片的大小,可 ...
css：css样式背景图片设置透明度,css如何设置背景图片的透明度
1. 了解css如何设置背景图片的透明度注意: css中无法直接给背景图片加 opacity 属性,可以使用下面的方法来给background-image加上我们想要的透明度opacity. 2. ...
Win10微信查看图片卡顿或发送图片卡顿的原因和解决方法
1. 引言我是Windows11系统,本篇文章同样适用于Windows10.该现象包括点击放大查看pc端微信中别人发送的图片会卡顿.在微信中发送图片时会卡顿.拖动图片或其他文件至微信聊天窗口发送时会 ...

最新文章

热门文章