CSS属性用法总结

soasme 发布于2019-08-29 12:57 / 1912人阅读

摘要：轮廓不被视为页面的一部分，因此在应用它们时不会导致页面布局被调整。

1.background系列属性

在为元素设定样式的时候，往往需要为该元素设置背景，一般有颜色，背景图片等．

1.1 背景颜色

在CSS类中使用background-color属性为元素设置背景颜色：

    /* CSS */
    .box {
        width: 200px;
        height: 200px;
        background-color: #666;
    }
    a {
        background-color: #999;
    }
    /* HTML */
    
    这是一个a标签

1.2 背景图片

通过background-image属性为元素设置背景图片：

    /* CSS */
    .box {
        width: 200px;
        height: 200px;
        background-image: url(./图片);
    }

1.3 背景图片重复

通过background-repeat属性设置背景图片是否可重复：

    /* 不平铺 */
    background-repeat: no-repeat;
    /* 横向平铺 */
    background-repeat: repeat-x;
    /* 纵向平铺 */
    background-repeat: repeat-y;

1.4 背景定位

当背景图片大小大于容器的时候使用background-position属性设置背景图显示的位置，其参数可以是表示位置的参数由＂左右＂，＂上下＂两部分组成．

/* 前一个参数可以为left center right,表示左右 */
/* 后一个参数可以为top center bottom,表示上下 */
    background-position: center top;

其参数也可以是像素值

/* 第一个参数表示向左移动的值，第二个参数表示向右移动的值，并且支持负值 */
    background-position: 100px, -100px;

雪碧图
网页中往往存在大量的小图标，如果每个小图标多带带一个文件会导致单个页面进行过多的网络请求，性能地下．所以我们可以把页面中使用的图标放在一张图片中，通过定位图标在图片中的位置来过去图标，这样每个页面获取多个图标只需要一个网络请求了．
雪碧图的使用方法，(假设我们有一张集成了多个图标的图片icon.jpg)

为容器设置宽高，即将要引入的图标的大小

通过background-position属性设置图标在图片中左上角的坐标值并取负(假设图标为矩形)

1.5 背景图像是否固定

使用background-attachment:fixed;设置，将背景图片固定．

1.6 综合属性

当要对background的多个属性进行设置的时候可以使用缩写的方式．

/* 引入图片　图片不重复　图像左右定位中间，图像上下定位中间　背景图像固定 */
background: url(./a.jpg) no-repeat center center fixed;

2 position系列属性 2.1 相对定位

设置方法：position:relative;
什么是相对定位？相对定位可以对元素进行微调，相对自己原来的位置进行移动，位置的移动方向通过设置left,right,top,bottom的值来进行移动．
相对定位和下面要说的绝对定位不同，它不会脱标．这种形式的移动相当于形影分离，身体留在原来的位置（本体看不见但还是占有位置），影子移动．
相对定位的常见用途 微调元素或做绝对定位的参考：子绝父相．

2.2 绝对定位

设置方法：position:absolute;
绝对定位根据参考点进行位移，唯一方式于相对定位相同．
参考点:

如果绝对定位的元素没有父元素，则定位元素的参考点是这样的，如果使用top描述，参考点为页面左上角如果使用bottom描述，参考点的是浏览器首屏窗口的左下角

如果绝对定位的元素有父元素，则定位元素参考点这样找，如过父级有定位属性就以父元素为参考，如果父级没有定位，就继续往上层找．

如果一个盒子设置了绝对定位，并且往一个方向上位移，那么与这个方向相同的padding会失效．

绝对定位会使元素脱离标准文档流，如果父元素没有相对定位，那么脱标带来的影响将无法解决．
绝对定位之后，所有标准流的规则都不再适用．所以margin: 0 auto;也会失效．

要使绝对定位的盒子居中: left: 50%; 或者 margin-left: 负的宽度的一半

2.3 固定定位

设置参数为：position:fixed;
固定定位就是相对浏览器窗口定位.页面无论如何滚动，这个盒子显示的位置不变．
并且固定定位的盒子脱标．

2.4 z-index

z-index的值表示谁压着谁．数值大的压着数值小的．

只有定位了元素，才能有z-index值，也就是说相对定位，绝对定位，固定定位都可以使用z-index值．但是浮动的东西不能使用．

从父现象：子元素的z-index再大，如果父元素的z-index小，还是要被压在身下．

2.5 static

position:static;
还可以通过static参数取消定位属性．

3 文本系列属性

color 文本颜色

direction 设置文本方向参数rtl表示从右向左，参数ltr表示从左向右

letter-spacing 设置字符间距 normal为默认值，没有间隙．length定义字符间固定空间允许负值．

text-decoration 文本修饰 none:定义标准文本 underline:下划线 overline:文本上的一条线 line-through:穿过文本的一条线

text-indent 缩进元素中文本的首行　length:定义固定缩进　%:定义父元素百分比的缩进

word-spacing 字间距　normal 定义单词间的标准空间　length:定义单词间的固定空间

4 字体系列属性

font-family 设置字体集

font-size 设置字体大小

font-style 设置字体样式　

font-weight 设置字体粗细

font简写

5 列表样式

list-style-image 使用图像替换列表标记　属性值:url

list-style-position 列表标记位置　属性值:inside outside

list-style-type 列表标记类型

list-style 可以通过简写形式设置

6 轮廓

轮廓是围绕元素边框外绘制的线，outline 属性与 border 属性不同：outline不是元素尺寸的一部分，元素的总宽度和高度不受轮廓宽度的影响。
轮廓不被视为页面的一部分，因此在应用它们时不会导致页面布局被调整。

outline-color 颜色

outline-style 轮廓样式

outline-width 轮廓宽度

outline 支持使用简写方式

7 display(显示)与visibility(可见性) 7.1 display

inline 设置元素为行内

block 设置元素为块级元素

inline-block 设置元素为行内块元素

none 元素消失，且不占据原来的位置

7.2 visibility

通过 hidden 设置元素隐藏，但元素仍然会占有原来的位置．

GPU服务器私有云 css属性 php中css的用法访问CSS属性 position属性，css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112265.html

css文本属性用法总结

摘要：稍稍总结了下文本的一些属性用法，自己忘记的时候也可以用来查查，不用去查网站那么麻烦。稍稍总结了下css文本的一些属性用法，自己忘记的时候也可以用来查查，不用去查网站那么麻烦。下面是部分总结，也希望对其他人有用文本修饰 (1)text-decoration: 文本修饰（横线） 4个属性值 overline line-through underline blink (1)ov...

masturbator 2019-04-23 13:28 评论0 收藏0
CSS 高度(css height)

摘要：同时也无需使用来实现高度自适应。通常默认情况下不用再设置高度值为，对象高度即是自适应高度。高度不能设置百分比高度如设置百分比的高度无效。扩展阅读宽度最小高度最大高度转载来源网址DIV+CSS height高度知识教程篇 DIV CSS高度简介这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX，em等常用使用PX（像素）为html单位。 he...

sf_wangchong 2019-04-23 13:13 评论0 收藏0
CSS用法的一些总结

摘要：黄金档未垂直对齐同一行的一组为的使用了或者是时，如果某个的内部标签中填充一些文字等内容，可能就会出现垂直不对齐的情况。解决方法倒不难的应用会被其他一些属性破坏，例如和，所以与或是属性最好不要同用。工作上，除了Django和一些并不复杂的脚本以外，其余时间写了大量的CSS和jQuery，现在回头看之前的一些代码，写得十分丑陋又低效，其中的CSS就有很大改进空间。正如多数人的认知一样，H...

Anchorer 2019-08-28 18:10 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

lemanli 2019-08-02 15:57 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

xfee 2019-08-21 11:53 评论0 收藏0