黑马程序员技术交流社区

标题: 前段基础分享 [打印本页]

作者: 邹邹邹i 时间: 2020-4-9 00:07
标题: 前段基础分享
在黑马学习这段时间以来，每天都很充实，发现前段基础有许多要记的和练的个人总结了一些相对关键的希望加强记忆：

常见的双标签：

加粗标签：单纯的加粗 语义化强调
倾斜标签：单纯的加粗 语义化强调
删除线标签：<s>单纯的加粗</s> <del>语义化强调</del>
下划线标签：单纯的加粗 <ins>语义化强调</ins>
单选按钮<input type="radio" checked="checkde“ >
复选按钮<input type="checkbox" checked="checkde" >

标签显示模式：

块级元素：自己独占一行；代表标签 div、h标签；
行内元素：一行可以共存多个；代表标签 span 、a；
行内块元素：一行可以共存多个；代表标签 img 、 input；
三种显示模式相互转换
将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;

背景的复合写法：

background:背景颜色 url（）平铺方式是否固定 X轴 Y轴；
display显示与隐藏：
隐藏：display:none; === 属于不占位隐藏
显示：display:block; 将隐藏的元素显示出来

overflow溢出隐藏：

overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
overflow:scroll; 显示横向和竖向的滚动条显示（不用）；
overflow:auto;溢出滚动，将超出固定宽高范围的内容以滚动条的形式显示（不用）；

css实现三角形效果

第一步：设置盒子的宽度高度为0
第二步：设置边框的宽度粗细border-width，最终显示为三角形
边框的线条样式 border-style
第三步：设置边框的颜色 border-color，4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了；
第四步：为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

用户界面- textarea防止拖拽文本域：

Textarea 文本域默认有轮廓线也可以统统outline:none;取消，同时还存在右下角拖拽放大，我们一般不允许，需要设置不能拖拽，可以通过resize:none;进行设置；
vertical实现图片和文字垂直对齐：
vertical-align:middle;让行内元素、行内块元素垂直居中；
常见的行内元素：a、span
常见的行内块元素：img,input
我们一般在css的最顶部设置一个公用样式就可以，能解决2问题：第一个问题图片垂直居中，第二个问题，解决图片底部留白；

盒子边框突出显示效果：

想要实现两条边框重叠我们直接用margin-left:-1px;和margin-top:-1px;来实现，如果想要实现鼠标经过突出当前盒子的线条样式分两种情况：
情况1：如果我所有的盒子都在标准流里面，我们只需要设置鼠标经过当前盒子的时候，给当前盒子添加一个position: relative;相对定位（相对定位是不会改变盒子的显示模式的还占位）实现突出效果；
情况2：如果所有的盒子已经设置了定位属性，我们只需要设置鼠标经过当前盒子的时候更改当前盒子的z-index值，修改盒子的堆叠层次，z-index值越大盒子就会越上面；

去除图片底侧空白缝隙：

1.接给图片添加img{vertical-align:middle/top;}属性实现基线对齐；
2.接将图片的显示模式更改为块级元素img{display:block;}

溢出的文字省略号显示：

第一步：让文字强制一行显示：white-space:nowrap;
第二步：让超出范围的文字隐藏： overflow:hidden;
第三部：隐藏的内容以省略号显示；text-overflow:ellipsis;

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

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