前端第五天

1.电脑分屏操作：windows+←或者→
2.写html 或者css代码时必须使用半角符号否则将会运行不出来（全半角看符号间距）
3.ul里的li 从竖着变成横向排列 加浮动即可
4.盒子掉下来的情况:把父亲的修改得足够宽能装下一行的盒子即可
5.如果一个盒子有right属性也有left属性会执行left属性;如果同时有top和bottom属性会执行top属性.
6.盒子水平居中left:50% margin-left:宽度的一半

元素的显示与隐藏:
本质:让一个元素在页面中隐藏或者显示出来
1.display用于设置一个元素应如何显示
display:none 隐藏对象,位置不保留
display:block 显示元素和转换为块级元素
.tudou:hover .mask:当鼠标经过土豆这个盒子 让mask显示出来
2.visibility用于指定一个元素应可见还是隐藏
visibility:visible;元素可视
visiblility:hidden;元素隐藏 ,位置保留
3.overflow属性指定了如果内容溢出一个元素的
overflow:visible 不剪切内容也不添加滚动条
overflow:hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
overflow:scroll 不管超出内容否,总是显示滚动条
overflow:auto 超出自动显示滚动条,不超出不显示滚动条

css高级技巧:
精灵图:有效减少服务器接受和发送请求的次数,提高页面的加载速度
原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求即可.
使用方法:background-position
移动距离是这个目标图片的x和y坐标(向上向左是移动是负值)
结构样式比较复杂
字体图标(iconfont):
字体图标的引用:
@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?4t17n’);
src: url(‘fonts/icomoon.eot?4t17n#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?4t17n’) format(‘truetype’),
url(‘fonts/icomoon.woff?4t17n’) format(‘woff’),
url(‘fonts/icomoon.svg?4t17n#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-display: block;
}
引用后复制图标粘贴即可
结构样式比较简单
三角做法;width=0;height=0;border-left-color:pink;
鼠标样式:li{cursor:pointer}
default 默认
pointer 小手
move 移动(方框)
text 文本
not-allowed 禁止

取消表单轮廓:outline:none
纺织拖拽文本域:textarea{resize:none;}
行内元素和行内块元素垂直对齐:vertical-align:
baseline 元素放置在父元素的基线上
top:把元素的顶端与行中最高元素的顶端对齐
middle:把此元素放置在父元素的中部
bottom:把元素的顶端与行中最低的元素的顶端对齐
图片底侧空白缝隙解决方案:
1.给图片添加vertical-align:middle | top | bottom
2.图片转换为块级元素 display:block;

文字溢出:
1.文字显示不开自动换行:white-space:normal
2.强制一行显示:white-space:nowrap
3.单行文本溢出显示省略号:
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
4,多行文本溢出显示省略号:
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-line-clamp: 2;(限制在一个块元素现实的文本的行数,第二行超出显示省略号)
-webkit-box-orient:vertical;(设置或探索伸缩盒对象的子元素的排列方式)

margin负值的使用:用来去除盒子边框双倍
z-index提高层级
文字围绕浮动元素:浮动元素不会压住文字