web前端学习第十二天

CSS用户界面样式

什么是界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更换的用户体验

1，更改用户的鼠标样式
2，表单轮廓
3，防止表单域拖拽

1，鼠标样式 cursor

li { cursor : pointer;}
设置或检索在对象上移动的鼠标指针采用何种系统预定的光标形状

属性值：
default ：小白 默认

pointer ：小手

move ：移动

text ：文本

not-allowed ： 禁止

2，轮廓线 outline

给表单添加outline：0；或者 outline：none；样式之后，就可以去掉默认的蓝色边框。

input { outline：none； }

3，防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的

textarea { resize：none; }

4,vertical-align 属性应用

CSS的vertical-align 属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align : baseline /  top  /  middle  /  bottom

值 ：

baseline : 默认，元素放置在父元素 基线上

top ：把元素的顶端与行中最高元素的顶端对齐

middle ：把此元素放置在父元素的中部

bottom ：把元素的顶端于行中最低的元素顶端对齐。

4.1图片，表单和文字对齐

图片，表单都属于行内块元素，默认的vertical-align 是基线对齐

此时可以给图片，表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

4.2，解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

主要解决方法有两种：

1，给图片添加vertical-aligm : middle / top / bottom 等（提倡使用的）

2，把图片转换为块级元素：display : block

5，溢出的文字省略号显示
1，单行文本溢出显示省略号–必须满足三个条件

/*1，先强制一行内显示文本*/
white-space : nowrap; (默认 normal 自动换行)

/*2，超出的部分隐藏*/
overflow : hidden;

/*3，文字用省略号替代超出的部分*/
text-overflow : ellipasis;

6，多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题适合于webkit浏览器或移动端（移动端大部分是文本kit内核）

overflow : hidden;
text-overflow: ellipsis;

/*弹性伸缩盒子模型显示*/
display : -webkit-box;

/*限制在一个块级元素显示的文本的行数*/
-webkit-line-camp:2 ;

/* 设置或检索伸缩盒对象的子元素的排列方式*/
webkit-box-orient: vertical;

7，常见布局技巧

1.margin负值的运用

2.文字围绕浮动元素

3.行内块的巧妙运用

4.CSS三角强化

1.margin负值的运用

1，让每个盒子margin往左侧移动-px 整合压住相邻边框，这样就可以显示盒子上下左右都有边框。

2，鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）

代码如下：

ul li {
            float: left;
            position: relative;
            list-style: none;
            width: 200px;
            height: 200px;
            border: 1px solid red ;
            margin-left: -1px;
        }
        /* 1,如果盒子没有定位，则给鼠标经过相对定位 */
        /* ul li:hover {
            position: relative;
            border: 1px solid blue;
        } */

        /* 2，当盒子有了相对定位，要提高鼠标经过的层级 */
        ul li:hover {
            z-index: 1;
            border: 1px solid blue;
        }

2，文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性。

3，行内块的巧妙运用

<div class="box">
        <a href="#" class="pret">&lt;上一页</a>
        <a href="#">1</a>
        <a href="#" class="centtr">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#" class="ert">...</a>
        <a href="#" class="next">&gt;下一页</a>
        <span>共100页</span>
        到第
        <input type="text">
        页
        <button>确定</button>
 </div>

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
        }
        

        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
        }

        .box .pret,
        .box .next {
            width: 83px;
            height: 36px;
        }
        .box .centtr ,
        .box .ert {
            background-color: #fff;
            border: none;
        }
        .box input {
            width: 36px;
            height: 36px;
            background-color: #ffffff;
            border: 1px solid #ccc;
            outline: none;
            text-align: center;
        }
        .box button {
            width: 54px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;

        }
</style>

4，三角形强化
原理：实现直三角做法

代码：

width: 0;
height: 0;
border-color: transparent  red  transparent   transparent ;
border-style: solid;
border-width: 22px 8px  0 0;

8，CSS初始化

不同浏览器对有一些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

简单理解：CSS初始化是指重设浏览器的样式（也称为CSS reset）

Unicode编码字体：

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

比如：
黑体 \9ED1\4F53

宋体 \5B8B\4F53

微软雅黑\5FAE\8F6F\96C5\9ED1

代码：

/* 把我们内外边距都清零 */
*{margin:0;padding:0}

/* em和i 斜体里面的字体不倾斜 */
em,i{font-style:normal}

/* 去掉li的小圆点 */
li{list-style:none}

img{
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border:0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align:middle}

/* 当我们鼠标经过button 按钮的时候  鼠标变成小手   */
button{cursor:pointer}


a{  
    /* 指定链接的颜色 */
    color:#666;
    /* 取消链接的下划线 */
    text-decoration:none}

/* 鼠标经过链接时候的颜色    */
a:hover{color:#c81623}


button,input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif}


body{
     /* css3 抗锯齿形  让文字显示的更加清晰 */
    -webkit-font-smoothing:antialiased;
    background-color:#fff;

    /* \5B8B\4F53 就是宋体的意思，这样浏览器兼容性比较好 */
    font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}

/* 把我们元素隐藏起来 */
.hide,.none{display:none}

/* 清除浮动， 伪元素 */
.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}

.clearfix{*zoom:1}