黑马程序员技术交流社区

标题: 前端技术分享贴 [打印本页]

---

作者: Alexwaker    时间: 2019-7-24 14:35
标题: 前端技术分享贴
CSS常用技巧：
1、display显示与隐藏（不占位的隐藏）-记住

• 隐藏：display:none;

• 显示：display:block; 将隐藏的元素显示出来

2、visibility显示与隐藏（占位隐藏）

• 占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；

3、overflow溢出隐藏

• overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；

• overflow:scroll; 显示横向和竖向的滚动条显示（不用）；

• overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示（不用）；

在实际工作中overflow:hidden;可以解决两个问题：

01、 解决嵌套的两个盒子的外边距塌陷（给子级盒子添加margin-top父级会跟着下来）我们可以添加overflow:hidden;解决；

02、 可以清除浮动（一个父级盒子里面的子级盒子浮动以后，咩有给父级盒子设置高度，子级浮动以后父级默认的高度为0） 我们可以添加overflow:hidden;去智能的测试子级的高度然后撑开父级盒子；

4、用户界面-鼠标样式

• 鼠标样式：cursor

• 小白（默认） cursor:default;

• 小手： cursor:pointer;

• 移动： cursor:move;

• 文本： cursor:text;

• 禁止： cursor:not-allowed;

5、用户界面-轮廓线

• 表单元素默认选中的时候会有一个蓝色的边框，各个浏览器设置是不一样的，所以我们在开发过程中直接去掉就可以，代码如下：

• outline:none；

6、用户界面-防止拖拽文本域

• Textarea 文本域默认有轮廓线也可以统统outline:none;取消，同时还存在右下角拖拽放大，我们一般不允许，需要设置不能拖拽，可以通过resize:none;进行设置；

7、vertical实现图片和文字垂直对齐

• 常用的取值：top（顶线对齐）bottom（底线对齐）middle（中线对齐）

• vertical-align:middle; 让行内元素、行内块元素垂直居中；

• 常见的行内元素：a、span

• 常见的行内块元素：img、input

注意：如果添加vertical-align:middle; 没有实现垂直居中效果，我们就给父级盒子添加一个行高就可以生效；
8、去除图片底侧空白缝隙

• Html中插入图片的时候由于默认是基线对齐，会出现底部留白的效果，解决方案如下：

• 01 直接给图片添加img{vertical-align:middle/top;}属性实现基线对齐；

• 02 直接将图片的显示模式更改为块级元素img{display:block;}（不推荐使用）

9、溢出的文字省略号显示（会用）

• white-space:normal; 默认处理，文字一行显示不下就折行显示；

• white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：

• text-overflow:clip; 不显示省略号，直接裁剪；

• text-overflow:ellipsis; 隐藏的内容以省略号显示；

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2