CSS常见样式2

作者: Sketch | 来源:发表于2017-10-24 00:40 被阅读9次

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

text-align CSS属性定义行内内容（例如文字）如何相对于它的块父元素对齐，它并不控制块元素自己的对齐，只控制它的行内内容的对齐，其属性值有：

start:如果内容方向是左至右，则等于left，反之则为right。
end:如果内容方向是左至右，则等于right，反之则为left。
left:行内内容向左侧边对齐。
right:行内内容向右侧边对齐。
center:行内内容居中。
<string>:第一个出现的该（单字符）字符串被用来对齐。跟随的关键字定义对齐的方向。例如，可用于让数字值根据小数点对齐。
justify:文字向两侧对齐。
match-parent:和inherit类似，区别在于start和end的值根据父元素的direction确定，并被替换为恰当的left或right。

text-align:center作用于行内元素，使行内元素居中。

此外，在定位模式中，在上级容器块中设置text-align:center;，可以使内容水平居中对齐。

水平居中对齐

IE 盒模型和W3C盒模型有什么区别?

W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border

IE盒模型

width = border + padding + 内容的  width，
height = border + padding + 内容的 height。

W3C盒模型

尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。

W3C盒模型在IE中的解决办法：

在代码顶部加如下的 doctype 声明，使页面以W3C盒子模型渲染。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

将W3C标准盒模型转化为IE盒模型

使用box-sizing属性

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

其属性值有：

content-box：默认值，W3C标准盒子模型。
border-box：width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式时Internet Explorer使用的盒模型。
padding-box：width 和 height 属性包括内容和内边距，但是不包括边框和外边距。只有Firefox实现了这个值，它在Firefox 50中被删除。

参考信息：信息来源

*{ box-sizing: border-box;}的作用是什么？

将W3C标准盒模型转化为IE盒模型。

line-height: 2和line-height: 200%有什么区别?

line-height: 2：行高是盒子模型里的content行高的两倍；

line-height: 200%：行高是父元素行高的两倍。

inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

特性：

既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高，内外边距)

缝隙问题的处理

内容之间不包含空格或者转行：

<span>Hello</span><<span>World</span>

将父级元素的字体大小设置为0，子元素再设置字体大小：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
    body {
        text-align: center;
    }

    .content {
        font-size: 0;
    }

    .box {
        border: 1px solid black;
        display: inline-block;
        font-size: 16px;
        width: 100px;
    }
    </style>
</head>

<body>
    <div class="content">
        <span class="box">Hello</span>
        <span class="box">World</span>
    </div>
</body>

高度不一样的inline-block元素如何顶端对齐?

vertical-align:top;

CSS sprite 是什么?

如果在一个页面上使用大量图片，每一张图片的加载一般都会给页面显示增加一定时间的延迟，同时也会给服务器增加负载，所以我们将多个图片组合到一个图片上，这个文件就称为CSS精灵图。

目的

减少http请求数，加速内容显示。
因为每请求一次，就会和服务器连接一次，建立连接是需要额外时间的。

使用场景：

静态图片，不随用户信息的变化而变化
小图片，图片容量比较小
加载量比较大
一些大图不建议拼成精灵图

实现原理

css的background-position属性来实现精灵图的显示。

控制一个层，可显示的区域范围大小；
通过一个窗口，进行背景图的滑动。

实现方式

photoshop手动拼图；
使用sprite工具自动生成：
- windows：CSS Gaga
- 通用在线工具：访问地址

缺点

无法缩放
不好修改

CSS sprite练习：查看链接

Icon Font（把字体做成图标）

制作字体文件

一般由设计师设计制作，并可上传至http://www.iconfont.cn进行使用。这里介绍网站上已有资源的使用。

打开网站http://www.iconfont.cn，搜索所需图标，选中后添加至购物车，点击购物车按钮并将选定的图标添加至项目（如果没有项目需进行新建），进入项目中便可进行相关信息查看，也可将文件进行下载使用。

声明font-family
- 使用本地链接
  将文件下载到本地进行引用。
- 使用第三方链接
  在http://www.iconfont.cn项目中可以直接点击查看在线链接生成链接。
使用font-family
- 使用HTML实体
- 使用CSS:before

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Icon Font</title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
    @font-face {
        font-family: 'iconfont';
        /* project id 373290 */
        src: url('//at.alicdn.com/t/font_xu5ex3nf63onipb9.eot');
        src: url('//at.alicdn.com/t/font_xu5ex3nf63onipb9.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_xu5ex3nf63onipb9.woff') format('woff'),
        url('//at.alicdn.com/t/font_xu5ex3nf63onipb9.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_xu5ex3nf63onipb9.svg#iconfont') format('svg');
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 200px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .iconfont:hover {
        color: #D81E06;
    }

    .other-iconfont:before {
        content: "\e605";
    }
    </style>
</head>

<body>
    <!-- 使用HTML实体进行显示 -->
    <span class="iconfont">&#xe605;</span>

    <!-- 使用CSS:before进行显示 -->
    <span class="iconfont other-iconfont"></span>
</body>

Icon Font练习：查看链接

让一个元素"看不见"有几种方式？有什么区别?

opacity: 0; 透明度为0，但仍然在文档流中
visibility: hidden; 使对象在网页上不可见，但该对象在网页上所占的空间没有改变
display:none; 对象脱离文档流，不给它保留其物理空间，即该对象在页面上彻底消失
background-color: rgba(0，0，0，0.2); 只是背景色透明
text-indent:-9999px；将内容移动到看不见的地方
z-index:设置为无限大的值如9999;或-9999让其覆盖或者被其他元素覆盖

模仿练习：icecream

网友评论

本文标题：CSS常见样式2

本文链接：https://www.haomeiwen.com/subject/blgzuxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！