![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
Crush-lph
这个作者很懒,什么都没留下…
展开
-
文本溢出显示省略号
单行文本溢出显示…<div class="text"> <p>Baihai Li, Michael B. Katz,Yingwen Duan, Xianfeng Du, Kui Zhang, Liang Chen, Anton Van der Ven, George W. Graham, and Xiaoqing Pan, A Joint Theoretical and Experimental Study of Phase Equilibria a原创 2021-08-28 17:27:42 · 373 阅读 · 1 评论 -
纯CSS实现三角形的绘制
.box { width: 0; height: 0; border-bottom: 50px solid darkviolet; /*border-bottom: 50px solid transparent;*/ border-top: 50px solid deeppink; border-left: 50px solid red; border-right: 50px solid blue; m...原创 2021-08-27 15:22:17 · 123 阅读 · 1 评论 -
浮动布局的优点?有什么缺点?清除浮动有哪些方式?
浮动布局的优点?有什么缺点?清除浮动有哪些方式?浮动布局简介:当元素浮动以后可以向左或向右移动,直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流,所以文档的普通流中的框就变的好像浮动元素不存在一样。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid原创 2021-08-27 11:31:05 · 503 阅读 · 2 评论 -
使用display:inline-block 会产生什么问题? 解决方法
当两个inline-block元素放在一块的时候会产生一个空白间隙产生原因是元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据CSS中white-space属性的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block的元素之间就出现了空隙。解决办法1、给子元素添加float:left属性 .inline1,.inline2 { displ原创 2021-08-27 11:18:05 · 274 阅读 · 0 评论 -
标准盒模型和怪异盒模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域,内边距是透明的。Content(内容) - 盒子的内容,显示文本和图像。盒模型有标准盒模型和怪异盒模型box-sizing: content-box 是W3C盒子模型在标原创 2021-08-27 11:15:30 · 95 阅读 · 0 评论 -
相对定位 relative 和 绝对定位 absolute
1、absolute:绝对定位,相对最近父元素,原有空间不保留会被其他元素挤占。宽度为文本宽度,且宽度不会影响父元素宽度2、relative:相对定位,相对自身原来位置,原有空间保留,不会被挤占。宽度为父元素宽度,且宽度会撑大/缩小父元素宽度Position的属性值有Absolute:绝对定位,是相对于最近的且不是static定位的父元素来定位,如果没有父级元素,就以根节点Fixed:绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动。Relative:相对定位原创 2021-08-27 11:10:08 · 1261 阅读 · 0 评论