![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
Delicia_Lani
这个作者很懒,什么都没留下…
展开
-
CSS画几何图形系列
一、圆形<div style="width: 200px; height: 200px;"> <div style="width: 100px; height: 100px; background-color: pink; border-radius: 50%;"></div></div>二、三角形<div style="width: 0; height: 0; border-top: 10px solid trans.原创 2021-08-17 23:22:01 · 166 阅读 · 0 评论 -
angular使用highlight高亮显示代码
具体使用过程参考官方文档:https://github.com/mattlewis92/angular-highlight-js使用过程中遇到的问题及解决方式1.安装angular-highlight-js之后,引入了highlight.js,报错,需要再安装highlight.js;2.在最初实践的时候,我在app.module.ts里面引入了相关依赖,当我需要将app.module...原创 2020-03-05 11:26:42 · 1905 阅读 · 0 评论 -
position(五种属性,以及每个属性的特点)
1. position: relative;相对定位1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性)2> 不会使元素脱离文档流(元素原本位置会被保留,即改变位置也不会占用新位置)3> 没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移)4>提升层级(用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越...转载 2019-10-28 15:34:54 · 19936 阅读 · 2 评论 -
5种布局方式
一、静态布局(static layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。1、布局特点不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端。2、设计方法PC:居中...转载 2019-08-19 20:20:01 · 1337 阅读 · 0 评论 -
经典CSS
目录一、webp图片格式二、画三角形三、画自适应正方形四、画直线四、渐变五、css实现动画六、省略号实现七、画圆环八、一个div只用css最多可以画几个圆(6个)九、分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景BFC:https://blog.csdn.net/qq_32766999/a...原创 2019-09-27 08:55:06 · 340 阅读 · 1 评论 -
css中inline/inline-block/block区别
基本知识点行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局。块级元素(block):独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽。行内元素(inline):可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高。行内块元素(inline-block):结合的行内和块级的优点,...转载 2019-10-11 18:47:52 · 605 阅读 · 0 评论 -
Flex布局使用(含实例代码)
一、什么是Flex布局?Flex是Flexible Box的缩写,顾名思义为“弹性布局”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。 1 2 3 .box{ display:flex; } 行内元素也可以使用Flex布局。 1 2 3 ...原创 2019-08-03 20:52:00 · 418 阅读 · 0 评论 -
浮动元素引起的问题及清除浮动的四种方式
为什么需要清除浮动?(1)父元素的高度无法被撑开,影响与父元素同级的元素;(2)与浮动元素同级的非浮动元素(内联元素)会跟随其后;(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构解决方法清除浮动的方式:(1)使用CSS中的clear:both;(放一个空的div,并设置上述css),属性来清除元素的浮动可解决2、3问题(2)对于问题1,添加如...原创 2019-07-18 17:34:24 · 533 阅读 · 0 评论 -
前端开发中遇到的小问题积累
1.HTML中设置浏览器标题前的logo:在<head></head>标签之间输入<link rel="icon" href="图片位置" type="image/x-icon"/>2.在线引入所需框架:<!--引入jquery--><script src="https://code.jquery.com/jquery-3....原创 2019-06-12 14:23:19 · 431 阅读 · 0 评论 -
Vue+TypeScript入门学习,含详细项目代码,vuex状态管理
之所以写下这篇文章,是因为最近的项目需求,使用Vue,TypeScript实现项目,对我而言,是一个全新的挑战,因此,是零基础,不过各语言之间都是相通的,学起来也没有那么难。只是在真正实现项目的过程中,踩过了好多坑。一,该链接中讲到Vue对typescript的支持:https://cn.vuejs.org/v2/guide/typescript.html二,typescript是什么?...原创 2019-07-05 15:27:29 · 1989 阅读 · 0 评论 -
三列布局:两边定宽,中间自适应,充满整个屏幕
一、使用flex布局<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ width: 100%; height: 10...原创 2019-07-18 17:31:36 · 416 阅读 · 0 评论