![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
Tansum
Hello world!
展开
-
css实现三角形、圆、椭圆、半椭圆、1/4圆(扇形)
1.三角形如何使用css生成一个三角形呢?首先,先编写一个空元素。<div class="triangle"></div>将该元素除了三角形底边的几个方向的边都设置为透明的即可:.triangle { height: 0; width: 0; border-width: 0 150px 260px 150px; border-styl...原创 2019-11-19 15:13:02 · 2937 阅读 · 0 评论 -
css预编译的优缺点
什么是CSS预编译?CSS 预编译,就是预先编译处理CSS。它扩展了 CSS 语言,增加了变量、Mixin、函数等编程的特性,使 CSS 更易维护和扩展。CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码,随后经过专门的编译工具将源码转化为CSS语法。它从这几个方面提升了CSS开发的效率:增强编程能力;增强可复用性;增强可维护性;更便于解决浏览器兼容性。CSS预编译的核心功...转载 2019-11-03 11:27:02 · 3527 阅读 · 0 评论 -
元素垂直居中
实现元素水平垂直几种常见的方式:1.若元素是单行文本, 则可设置 line-height 等于父元素高度(即line-height和height的值相同)2.若元素是行内块元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。.parent::after, .son{ displa...原创 2019-10-25 11:24:28 · 221 阅读 · 0 评论 -
元素水平居中
实现元素水平居中几种常见的方式:1. 若是行内元素, 给其父元素设置 text-align:center2.若是块级元素, 给该元素设置 margin:0 auto3. 使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:.son{ position:absolute; width:固定; left:0;...原创 2019-10-25 10:54:28 · 295 阅读 · 0 评论 -
盒模型结论
1.没有宽度(就是没有设置width)的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距,会导致内容宽度减少,减少量等于水平边框、内边距和外边距的和。2.为设定了宽度的盒子添加边框、内边距和外边距,会导致盒子拓展得更宽。实际上,盒子的width属性设定的只是盒子内容区的宽度,而非盒子要占据的水平宽度。...原创 2018-12-18 22:00:30 · 165 阅读 · 0 评论 -
三个盒子,左右定宽,中间自适应布局
1.左右两侧浮动定位中间利用margin-left margin-right<div style="width:100%; margin:0 auto;"> <div style="width:200px; float:left; background-color:#6FF">左侧内容 定宽</div> <div style="width...原创 2019-10-25 10:46:04 · 998 阅读 · 0 评论