
CSS
Conan_W
这个作者很懒,什么都没留下…
展开
-
CSS -文本溢出显示省略号
单行文本溢出.hidden { overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行) text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)}多行文本溢出.hidden { -webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数,2 表示最多显示 2 行。为了实现该效果,它需要组合其他的 WebKit 属性)原创 2021-12-30 13:41:26 · 270 阅读 · 0 评论 -
CSS - css样式选择器优先级
!important > 行内样式 > 内嵌样式 (ID选择器样式 > 伪类> 属性选择器 > class类选择器样式 > 标签选择器样式>*(通配符))> 外部样式具体的权重的问题:!important //权重为 无穷大style = “” // 行内样式 1000#div // id 选择器 权重为100.class // class类 权重为10element原创 2021-07-12 17:59:26 · 123 阅读 · 0 评论 -
CSS3 - css3的新特性
了解css3的新特性有助于我们了解css3的独特之处。选择器css3中新增了很多新的选择器供我们使用,解决了之前很多需要js才能解决的布局问题。 element1~element2: 选择element1元素后面的每个element2元素。 [attribute^=value]: 选择某元素attribute属性是以value开头的。 [attribute$=value]: 选择某元素attribute属性是以value结尾的。 [attribute*=value]: 选原创 2021-07-12 17:58:59 · 198 阅读 · 0 评论 -
CSS中外边距margin重叠问题
CSS中margin的概念大家都很熟悉,margin是定义元素边界以外的空间属性。其实margin属性是透明的。在对网页进行布局中,对于外边距重合的问题往往让小白头疼不已,包括我自己。当有两个以上的块元素垂直放置的时候,它们的外边距不是简单的叠加,而是显示其中较大者的外边距margin.当然只有简单的文档流的布局中才会出现上下外边距叠加问题,在有设置浮动float,绝对定位position:absolute;,行内框d等等情况的时候,就不会出现外边距叠加问题。一般有三种情况下会出现外边距重叠。1.自原创 2020-12-21 09:19:16 · 664 阅读 · 0 评论 -
CSS - 纯css设置32种图形
整理一下使用纯CSS来制作常用的各种图形。一般采用一个标签。正方形(square):CSS Code:.square { width: 100px; height: 100px; background: red;}使用border制作正方形:.square { width: 0; height: 0; border: 50px solid red; /*边框大小等于正方形宽度(或高度)的一半*/}平行四边形(parallelogram)CSS Code:原创 2020-12-21 09:11:48 · 212 阅读 · 0 评论 -
CSS盒状模型——Flex布局语法详解
传统的布局传统的布局是基于盒装模型,依赖于display属性+position属性+float属性,但是对于一些特殊布局不太方便,比如垂直居中。盒子模型在css网页布局中离不开一种布局模型——盒子模型。顾名思义,现实世界中盒子是容纳东西的容器,那么对象到二维的网页中,盒子是容纳HTML元素的内容的容器。盒子的组成一个盒子由四部分组成:外边距(margin)、边框(border)、内边距(padding)、内容(content)。其中margin、border、padding是css样式,这三个部分翻译 2020-12-21 09:10:47 · 839 阅读 · 0 评论 -
HTML-清除float的8种方式
了解其原理,了解为啥需要清除浮动。1. 为啥需要清除浮动在我们使用父子元素中,我们没有给最外层的盒子设置高度,但是我们知道里面的元素没有设置浮动的话,那么这个盒子的高是会自动被撑开,但是当内层的元素浮动之后,就会出现问题:背景不能显示边框不能撑开margin设置值不能正确显示2. 清除float浮动方法一: 添加新的元素,应用clear: both;设置之后,padding和margin的不会受到影响。方法二: 给父级div定义overflow:auto/hidden;同时添加zoo原创 2020-12-21 09:09:07 · 2626 阅读 · 0 评论 -
HTML中总结实现tab切换的几种可行方法
BAT大家都不陌生,B:代表Baidu.com,A:代表Alibaba.com,T:代表Tencent.com,对于很多程序员来说,这就是梦想,但是对于小编来讲,适合自己的才是最重要的。原创 2020-12-21 09:07:48 · 8099 阅读 · 1 评论 -
HTML中<iframe>跨域的页面
今天我们来谈谈一个页面的内嵌某个页面的问题,已经被内嵌的网页的高度自适应问题以及内容的溢出导致的滚动条的隐藏的问题,首先我们应该先了解什么是跨域和同域的问题何为跨域和同域URL说明是否允许通信http://www.a.com/a.js http://www.a.com/b.js同一个域名下允许http://www.a.com/lab/a.js http://www.a.com/script/b.js同个域名下,不同文件夹下允许http://www.a.com:原创 2020-12-21 09:01:58 · 2746 阅读 · 0 评论 -
HTML <iframe>实现同域下的页面
在同域情况下:原创 2020-12-21 09:01:27 · 1317 阅读 · 0 评论 -
HTML- 浅谈<iframe>标签的使用
标签原创 2020-12-21 09:00:30 · 1503 阅读 · 0 评论 -
CSS中的canvas元素
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档一、什么是canvas?是HTML5新增的元素,通过使用脚本语言(JS)来在特定的区域绘制图形,可以制作照片集和简单的动画,也可以处理和渲染视频。二、Canvas的基本使用canvas 语法<canvas id="first" width="300px" height="300px"></canvas>canvas 元素<canvas>标签和<img>其实是一样的,只是<原创 2020-12-19 16:48:03 · 9279 阅读 · 2 评论 -
CSS中设置inline-block存在空隙的原因和解决方法
display:inline-block是一种布局方法,它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以置身于inline水平的元素中。当我们想把两个块元素的设置display:inline-block;使得两个块元素显示子在一行时候,我们会发现块元素和块元素的之间存在一定的空隙。这就是“换行符/空格间隙问题”。body{width:1190px;margin:0 aut原创 2020-12-19 16:47:23 · 1292 阅读 · 0 评论 -
CSS中的Filter属性灰度值
在实际工作中,对像图像这种属性进行灰度值和颜色进行进行调整,可以使用css中的filter属性样式。Filter属性是对图像元素(尤其是)设置模糊和颜色偏移的图形效果,滤镜通常用于对图像,背景和边框进行渲染。Filter 语法filter: none|blur() | birghtness() | contract() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()原创 2020-12-19 16:46:06 · 980 阅读 · 0 评论 -
CSS中的Position定位效果
position 是CSS用来为HTML文档的一些元素提供定位的属性,定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。常规取值: 1.static(静态) 2.Relative(相对) 3.Absolute(绝对) 4.fixed(固定)Static(静态):HTML元素的默认值,不受top、bottom、left、right属性影响,元素出现在正常的文档流中Relative(相对):相对定位原创 2020-12-19 16:45:52 · 96 阅读 · 0 评论 -
浅谈CSS定宽居中的奥秘
CSS样式中水平居中和垂直居中文本居中对齐水平居中对齐文本的水平居中对齐的设置其实很简单,代码如下:.h-center{text-align: center;}垂直居中对齐文本的垂直居中对齐的设置其实很简单, 代码如下:.v-center{line-height:200px;height:200px;}/如果存在多行的文本,添加以下代码/.v-center{line-height:1.5;display: inline-block;vertical-align原创 2020-12-19 16:45:30 · 316 阅读 · 0 评论