CSS之操作属性二

作者 : 开心源码 本文共1744个字,预计阅读时间需要5分钟 发布时间: 2022-05-12 共169人阅读

********css样式之属性操作********

一、文本属性

1.text-align:cnter 文本居中

2.line heigth 垂直居中 :行高,和高度对应

3.vertical-align 设置图片与文本的距离

4.text-decoration:none 去掉超链接下划线

5.要是给a标签修改颜色的时候,就定到a标签上,使用继承有时候是搞不定的

由于继承的级别是很低的,假如a标签设置了样式,是不会继承父亲的

6.text-indent:30px首行缩进

7.font-style:oblique 或者者italic….(设置字体的样式为斜体)

二、背景属性

background-color:背景颜色

background-image:url('11.jpg'); 背景图片链接

background-repeat:repeat-x; x轴平铺

background-repeat:no-repeat; 不重复

background-position:400px 200px 调整背景的位置(距左。距右)

background-position: center:center; 背景居中

简写:

background: url('11.jpg') no-repeat center;

三、边框属性

常使用属性

简写:border :1px soild red;

deshed:虚线

只加有一个方向的:border-right :1px soild red;

四、列表属性

去掉列表前面的标志:ul li{list-style:none;}

去掉列表前面的空格:ul{padding:0}

上面两行也可写成下面一行

去掉盒子上面的间隙:\*{margin:0; padding :0;}

五、display属性

display属性

1.将块级标签设置 成内联标签:display: inline;

2.将内联标签设置 成块级标签:display: block;

3.内联块级标签:像块级标一样可设长宽,也可像内联一样在一行显示:display:inline-block

4.display:none;把不想让使用户看到的给隐藏了(很重要的一个属性)

5.visibility:hidden;也是隐藏

注意:与visibility:hidden的区别

visibility:hidden:可以隐藏某个元素,但隐藏的元素仍需占使用与未隐藏之前一样的空间。也就是说,该元素尽管被隐藏了,但依然会影响布局。

display:none:可以隐藏某个元素,且隐藏的元素不会占使用任何空间。也就是说,该元素不但被隐藏了,而且该元素本来占使用的空间也会从页面布局中消失

六、边距的塌陷问题

1.兄弟div

上面的div的margin-bottom和下面的div的margin-top会塌陷,也就是会取上下两者margin里面最大值作为显示值。

2.父子div

假如父级div没有border,padding,inlinecontent,子级div的margin会一直向上找,直到找到某个标签包括border,padding,inline content中的其中一个,而后按此div 进行margin;

![](https://images2017.cnblogs.com/blog/1184802/201709/1184802-20170921170416900-1754321835.png)

处理方法:

这两种会改变结构:

1.加上padding

2.加入border

不改变结构

3.overflow:hidden

溢出问题

处理溢出的方法

overflow:auto;

overflow: hidden;

overflow:scoll; #加上滚动条

七、清理浮动

clear语法:

clear:none | left | right | both

1.clear:left 清理的是左边的浮动

2.clear:both :保证左右两边都没有浮动

注意:

排序的时候是一个标签一个标签的排

假如上一个是浮动的,就紧贴个上一个

假如上一个不是浮动的,就和上一个保持垂直不变

八、float父级的塌陷问题

loat它不是完全脱离,它是半脱离的。像是文字环绕的就是使用float实现的。float是不覆盖文字的

半脱离的,吧文字给挤过去了。

处理方案:

1.

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS之操作属性二

发表回复