A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[前端与移动开发] 学习心得

© vns132 初级黑马   /  2019-4-21 21:00  /  631 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

元素的显示和隐藏(重点记住)

• 隐藏:display:none;
• 显示:display:block; 将隐藏的元素显示出来
一般情况下我们显示和隐藏配合定位属性实现一些列的小效果
让元素visibility显示与隐藏(了解)
占位隐藏:visibility:hidden; 盒子隐藏之后原来的位置还是在的;
overflow溢出隐藏

取值不同表示意思不一样
overflow:hideen; 溢出隐藏,将超出固定宽高范围内的内容隐藏起来,不是删除了;
overflow:scroll; 显示横向和竖向的滚动条显示(不用);
overflow:auto;溢出滚动, 将超出固定宽高范围的内容以滚动条的形式显示(不用);
overflow:hideen;的常用技巧(重点)

01 overflow:hideen;可以让超出固定范围的内容隐藏掉;
02 overflow:hideen;可以清除浮动,布局的时候我们做左右或者左中右布局,都是父级嵌套子级盒子,然后将子级盒子浮动,但是如果没有给父级添加固定的高度,子级浮动以后父级的高度为0,不占位,会影响后面的布局,就给父级添加overflow:hideen;来解决;
03 overflow:hideen; 嵌套的父子级盒子出现外边距塌陷问题,两个嵌套的盒子,都没有浮动或者定位,给子级盒子添加了margin-top就会出现父级跟着掉下来的塌陷问题,就给父级添加overflow:hideen;来解决;
用户界面-鼠标样式鼠标样式:cursor

小白(默认) cursor:default;
小手: cursor:pointer;  常用一般是用在一些提示要点击的样式,不能跳转的时候;
移动: cursor:move;
文本: cursor:text;
禁止: cursor:not-allowed;
取消表单默认的蓝色交互框(记住)

表单元素默认选中的时候会有一个蓝色的边框,各个浏览器设置是不一样的,所以我们在开发过程中直接去掉就可以,代码如下:
outline:none;
防止拖拽文本域textarea

Textarea 文本域默认有轮廓线也可以统统outline:none;取消,同时还存在右下角拖拽放大,我们一般不允许,需要设置不能拖拽,可以通过去除图片底侧空白缝隙进行设置;
vertical实现图片和文字垂直对齐

• vertical-align:middle; 让行内元素、行内块元素垂直居中;
• 常见的行内元素:a、span
• 常见的行内块元素:img
  

注意:line-height 只能让文字垂直居中;
处理行内元素或者行内块元素和文字给父级添加line-height后不垂直居中的问题;
去除图片底侧空白缝隙

Html中插入图片的时候由于默认是基线对齐,会出现底部留白的效果,解决方案如下:
01 直接给图片添加img{vertical-align:middle/top;}属性实现基线对齐;
02 直接将图片的显示模式更改为块级元素img{display:block;}
注意:如果将img转化为块会出现一些问题,所以我们建议大家使用第一种
溢出的文字省略号显示

必须是单行文显示
white-space:normal; 默认处理,文字一行显示不下就折行显示;
white-space:nowrap; 强制一行显示,文字一行显示不小就强制显示,要配合overflow:hidden; 使用,然后想要出现省略好配合下面属性:
text-overflow:clip; 不显示省略号,直接裁剪;
text-overflow:ellipsis; 隐藏的内容以省略号显示;

步骤(重要常用记住):

01 设置强制一行显示white-space:nowrap;

02 将强制一行显示后溢出固定盒子宽度的内容隐藏overflow:hidden;

03 将隐藏的内容用省略号显示text-overflow:ellipsis;


CSS精灵技术

好处

• 使用css精灵技术可以减少对服务器的请求次数;
• 可以将多个小图标合并成一张图片,成为css精灵图或者css雪碧图;
Css精灵图的技术核心:

利用北京图片定位设置X轴(水平方向)和Y轴(垂直方向)的位置;
background-position: X轴   Y轴;
复合写法:background:背景颜色 url(背景图片路径) 是否平铺 X轴 Y轴;
使用精灵图的重要步骤:

第一步,精确测量盒子的宽高和在X轴,Y轴的位置
第二步,然后设置图片定位的X轴和Y轴的位置;
滑动门原理

• 一个父级盒子(必须设置为行内块元素display:inline-block)嵌套一个子级盒子,父级盒子放左侧的圆角,子级盒子放右侧圆角,装内容;
• 设置父级盒子的背景图片,设置图片的左对齐默认即可;
    background: url(images/to.png) no-repeat;
• 盒子的宽度是内容撑开的,需要给父级盒子和子级添加padding-left和padding-right;
• 子级盒子盛放内容,然后设置子级盒子的背景图片,设置图片右对齐;
    background: url(images/to.png) no-repeat top right;
一句话总结:一个a标签嵌套一个span标签,span里面放文字,a要转换为display:inline-block;设置固定的高度:
      01 给a设置背景图片和距离左侧的间距;

Margin区负值

margin可以取负值,一般设置-1px可以设置描边的叠加;


Css实现三角效果

01 设置一个盒子的宽高都为0
02 每一个边都要写不能省略
03 将不现实的边设置为transparent
div {
/*我们用css 边框可以模拟三角效果*/
width: 0; height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
}
div {
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 10px;
     border-color: transparent transparent transparent red;
     font-size: 0;
     line-height: 0;
}
border-color: 上   右    下   左;不显示的区域透明,需要显示区域设置颜色,箭头的方向和方位英文相反;
上箭头:border-color:transparent transparent red transparent;
右箭头:border-color:transparent transparent transparent red;
下箭头:border-color:red transparent transparent transparent;
左箭头:border-color:transparent red transparent transparent;

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马