CSS / 三角+界面样式+vertical-align+溢出文字省略号显示+布局技巧+CSS初始化

目录

CSS三角

界面样式

鼠标 cursor

轮廓线 outline

防止拖拽文本域 resize

行内及行内块元素垂直对齐

vertical-align

图片底侧空白缝隙

溢出文字省略号显示

单行溢出文字省略号显示

布局技巧

margin负值的巧妙运用

文字围绕浮动元素

行内块的巧妙运用

CSS三角强化

用三角做价格标签

CSS初始化


CSS三角

给宽高为0的盒子设置边框,并将不需要的三边设置成透明色





    
    
    
    Document
    



    

界面样式

鼠标 cursor

cursor: pointer;

default:小白 默认

pointer:小手

move:移动

text:文本

not-allowed:禁止

轮廓线 outline

outline:none 去掉轮廓线

防止拖拽文本域 resize

resize:none

文本域标签尽量放在一行,否则显示会有很多空格

行内及行内块元素垂直对齐

vertical-align

经常用于设置图片或者表单(行内块元素)和文字垂直对齐

baseline 默认,基线对齐

middle 和中线对齐 垂直居中

top 和顶线对齐

bottom 底线对齐

图片底侧空白缝隙

是因为默认基线对齐,给文字留出了底线到基线的高度

1.给图片设置vertical-align:bottom或middle或top 提倡使用

2.给图片转成块级元素 display:block;

溢出文字省略号显示

单行溢出文字省略号显示

必须满足三个条件

1.先强制一行内显示文本(显示不下也在一行内全部显示)

white-space:nowrap;

(默认是normal,显示不下自动换行)

2.溢出部分隐藏

overflow:hidden;

3.text-overflow:ellipsis;(省略号)

多行溢出文字省略号显示

兼容性较差,适合webkit浏览器或移动端(移动端大部分是webkit内核)

一般由后端开发来写这个效果。直接限制显示多少个字

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;





    
    
    
    Document
    



    
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

布局技巧

margin负值的巧妙运用

1.当每个浮动盒子都有边框时,边框重叠会变宽,用,margin负值来覆盖





    
    
    
    Document
    



    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

2.鼠标经过,让边框变色时,会被压住

如果盒子没有定位,当鼠标经过时变成相对定位

如果盒子有定位,则鼠标经过时提高z-index

    

文字围绕浮动元素

浮动元素不会压住文字





    
    
    
    Document
    



    

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

行内块的巧妙运用

页码块用行内块来做,行内块自带间隔且在一行显示有宽高

只要给父元素添加text-align:center就能使所有行内块和行内元素水平居中显示

shift+alt+鼠标左键下拉可以同时多行输入





    
    
    
    Document
    



    


CSS三角强化

把上边框宽度调大 颜色透明,左和下边框宽度设为0

  • 只保留右边框有颜色
  • 样式都是solid
  • 上边框宽度要大,右边框宽度稍小,其余边框为0




    
    
    
    Document
    



    

用三角做价格标签





    
    
    
    Document
    



    
$199 $299

CSS初始化

重设浏览器的样式 CSS reset

每个网页必须首先进行CSS初始化,保证不同浏览器的兼容性

给body设置样式

unicode编码字体:把中文字体的名称用相应的unicode编码来代替,这样就可以有效地避免浏览器解释CSS代码时候出现乱码的问题

黑体 \9ED1\4F53 宋体 \5B8B\4F53

你可能感兴趣的:(前端学习,css)