CSS元素显示与隐藏、三角形、用户界面、布局技巧

CSS(3)

元素的显示与隐藏

display

display:none;隐藏对象

display:block;除了转换为块级元素外，还有显示元素的意思。

display隐藏元素，且不占原来的位置

visibility

指定一个元素隐藏还是显示

visibility:visible;元素可见

visibility：hidden;元素隐藏

visibility元素隐藏后，继续占有原来的位置

overflow溢出

指定如果内容溢出，是显示还是隐藏

overflow：visible;元素显示
overflow：hidden；元素隐藏
overflow：scroll；不管超出与否显示滚动条
overflow：auto；超出自动显示滚动条，不超出不显示滚动条

字体图标

遇到结构样式比较简单的小图标，用字体图标；

遇到结构样式较复杂的用精灵图。

CSS三角

.box{
	width:0;
	height:0;
	border-top:10px solid pink;
	border-right:10px solid red;
	border-bottom:10px solid blue;
	border-left:10px solid green;
}

<div class="box"></div>

尖角朝下的粉色三角形：

.box{
	width:0;
	height:0;
	border：50px solid transparent;
	border-top:10px solid pink；
}

用户界面样式

更改用户的鼠标样式

鼠标样式cursor

li{
	cursor:pointer;
}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

<li style="cursor:default;"></li>

轮廓线outline

outline:0;或者outline:none;可以去掉默认边框

input{
	outline:none;
}

防止拖拽文本域resize

textarea{
	resize:none;
}

注：文本域textarea最好写到一行中去

vertical-align属性应用

用于设置图片或者表单（行内块元素）和文字垂直对齐。

vertical-align：baseline|top|middle|bottom

img{
vertical-align:middle;
}

<img src="images.jpg" alt="">文字

解决图片底部默认空白缝隙问题

解决方案：

给图片添加vertical-align：baseline|top|middle|bottom(提倡)

img{
	vertical-align:middle;
}

把图片元素转换成块级元素：display:block;

img{
	display:block;
}

溢出文字省略号显示

单行文本溢出

//先强制一行内显示文本
white-space：nowrap;(默认normal显示不开就换行)
//超出的部分隐藏
overflow:hidden;
//用文字省略号代替超出的部分
text-overflow:ellipsis;

多行文本溢出

多行文本溢出显示省略号，有较大兼容性问题。

overflow:hidden;
text-overflow:ellipsis;
//弹性伸缩盒子模型显示
display:-webkit-box;
//限制在一个块元素显示的文本行数
-webkit-box-orient:vertical;

常见布局技巧

margin负值的运用

边框重叠的地方不会变粗

ul li{
          float:left;
          list-style: none;
          width: 150px;
          height: 200px;
          border:1px solid red;
          margin-left: -1px;
        }

让每个盒子margin往左侧移动-1px正好压住相邻盒子边框；

鼠标经过，框会显示出来:

法1：如果盒子没有定位，则鼠标经过添加相对定位即可。

 ul li:hover{
          position:relative;
          border:1px solid blue;
        }

法2：如果li都有定位，则利用z-index提高层级。

ul li:hover{
          z-index：1；
          border:1px solid blue;
        }

文字围绕浮动元素

文字在图片边：

*{
        margin:0;
        padding:0;
      }
      .box{
        width: 300px;
        height: 70px;
        background-color: pink;
        margin: 0 auto;
        padding:5px;
      }
      .pic{
        float:left;
        width: 120px;
        height: 60px;
        margin-right: 5px;
      }
      .pic img{
        width: 100%;
      }

行内块元素的技巧运用

CSS三角强化

较高的直角三角形：

.box{
        width: 0;
        height: 0;
        border-top:100px solid pink;（上面的三角变细）
        border-right:50px solid skyblue;
        border-bottom: 0 solid blue;（去掉下面的三角）
        border-left:0 solid green;（去掉左面的三角）
      }

新增伪元素选择器

注：before和after创建一个元素，但是属于行内元素；

新创建的这个元素在文档树中是找不到的，所以称为伪元素；

语法：

element::before{}

before和after必须有content属性；

before在父元素内容的前面创建元素，after在父元素内容的后面插入元素；

伪元素选择器和标签选择器一样，权重为1；

green;（去掉左面的三角）
}

## 新增伪元素选择器

[外链图片转存中...(img-ZWqajtdj-1680273006215)]

注：before和after创建一个元素，但是属于行内元素；

新创建的这个元素在文档树中是找不到的，所以称为伪元素；

语法：

element::before{}

before和after必须有content属性；

before在父元素内容的前面创建元素，after在父元素内容的后面插入元素；

伪元素选择器和标签选择器一样，权重为1；

使用场景：伪元素字体图标，仿土豆效果，伪元素清除浮动。