css的那些事

扫花
• 阅读 1040
position定位
position:absolute;绝对定位,容易脱离文本流,不占用空间
position:relative;相对定位,不脱离文本流,占用空间

display:none和visibility:hidden的区别
共同点:都可以隐藏元素
不同点:display:none不占据文档的空间;visibility:hidden占用文本空间

v-show和v-if的区别
相同点:都可以隐藏元素
不同点:v-show占用空间,v-if不占用空间
注:如果要频繁切换某节点,使⽤v-show

行内元素、块级元素以及空元素
  • 行内元素
span, a ,b(加粗),i/em/var/cite/dfn/address(斜体),u(下划线),strong(粗体),s/strike(删除线),big,small,sub(下标),sup(上标),font
  • 块级元素(独占一行)
p,div,ol,ul,br,table,dl,h1-h6,li
  • 空元素(没有内容的html元素)
br,meta,hr,link,input,img

css优先级

!important>id选择器>class选择器>标签选择器


选择器种类
  • id选择器:#myId
  • 类(class)选择器:.myClassName
  • 标签选择器:div,p,h1
  • 相邻(兄弟)选择器:h1+p
  • 子选择器: ul>li
  • 后代选择器:li a
  • 通配符选择器:*
  • 属性选择器:a[ref="external"]
  • 伪类选择器:a:hover,li:nth-child,div:after

div文本超出显示省略符
//单行限制
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
//多行限制
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
//长文本换行
word-break:break-all;

css三种引用方式
  1. 行间样式:通过style属性将样式写在标签中
  2. 内部样式:写在本页面
  3. 外部样式:单独写在一个页面被引用
点赞
收藏
评论区
推荐文章
九路 九路
4年前
干货 | CSS中的四种定位有什么区别?
我们都知道,前端开发里面的CSS中常用的定位方式有普通定位,相对定位,绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什
菜园前端 菜园前端
2年前
你需要知道的CSS基础样式知识
原文链接:定位相关相对定位css.mycontentposition:relative;绝对定位css.mycontentposition:absolute;left:0;top:0;固定定位css.mycontentposition:fixed;left
Wesley13 Wesley13
3年前
CSS定位和滚动条
0805自我总结一.绝对定位position:absolute;/绝对定位:1、定位属性值:absolute2、在页面中不再占位(浮起来了),就无法继承父级的宽度(必须自己自定义宽度)3、一旦定位后,定位的布局方位top、bottom、left、right都能参与布局
Wesley13 Wesley13
3年前
CSS中的绝对定位与相对定位
层级关系为:<div———————————position:relative;不是最近的祖先定位元素,不是参照物<div—————————没有设置为定位元素,不是参照物<div———————position:relative参照物<divbox1<divbox2——–position:absolu
Wesley13 Wesley13
3年前
CSS定位问题(3):相对定位,绝对定位
引子:开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕?看下面的html代码:XHTML12345<body<divid\"fatherbody"\<divclass\"item1"\</div</div</body
Wesley13 Wesley13
3年前
CSS定位中“父相子绝”
一、定位的介绍  定位有三种:相对定位(position:relative)、绝对定位(position:absolute)、固定定位(position:fixed)二、三种定位的用法,特点和实例2.1、相对定位  特性:不脱标、形影分离、老家留坑!(https://oscimg.oschina.net/oscnet/f3c139667c
Wesley13 Wesley13
3年前
CSS2样式表(属性·定位)
1、position 语法:position:static|absolute|fixed|relative取值:static:默认值。无特殊定位,对象遵循HTML定位规则absolute:将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近
Wesley13 Wesley13
3年前
CSS相对定位与绝对定位
CSS相对定位设置为相对定位的元素框会偏移某个距离。“相对于”元素仍然保持其未定位前的形状,它原本所占的空间仍保留!CSS相对定位实例(http://static.oschina.net/uploads/img/201312/01164555_uxZw.gif)注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来
Stella981 Stella981
3年前
CSS的相对定位和绝对定位(position)
什么是定位呢?定位(position),故名思议,就是确定元素在页面中的位置。CSS的常用定位有两种,一种是相对定位,一种是绝对定位。下面我们看例子1.<html2.<head3.<style4.div0{5./设置背景色为黄色/6.backgrou
Stella981 Stella981
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Stella981 Stella981
3年前
CSSposition属性
在CSSposition属性中,absolute和relative的结合使用是非常重要的东西。因为网页设计时用absolute和relative的相结合非常便利。首先看relative,相对定位,在菜鸟教程(https://www.oschina.net/action/GoToLink?urlhttp