自带css-css中常用方法总结

2024-04-27 0 8,741 百度已收录

CSS提供了text-indent属性,可以方便实现文本缩进。 通过使用 text-indent 属性,所有元素的第一行都可以缩进给定宽度,即使厚度可以为负数。 此属性最常见用途是缩进段落的第一行。 在设计网页时,有时为了使页面更具可读性、更美观,会使用letter-spacing属性; letter-spacing属性是减少(值为正)或减少(值为负)字符宽度; 也就是说,应用英语上时,就是缩小或缩小每个字母之间的宽度。 当应用于英文文本时,它是每个字符之间的宽度。

例子

div.header h2 {
    letter-spacing: 30px;
    text-indent: 30px;
}

使每个字符的宽度为30px,text-indent使第一个字符缩进30px(通常用居中对齐,字符会向左移动,所以使用缩进进行对齐)。

3、我们自己制作布局时,需要去掉浏览器自带默认布局。 在这种情况下,我们可以使用下面的代码

*{
    margin: 0px;
    padding: 0px;
}

4.方形图片设置

首先将图片设置为正圆样式,然后调整border-radius为100px(上下半圆围成一个圆)

自带css-css中常用方法总结

div.header img{
    width: 200px;
    height: 200px;
    border-radius: 100px;
    margin: 10px;
}

5. CSS3中:nth-​​child伪类实际使用

文本修饰用法

在 CSS 中,您可以使用 text-decoration 属性在文本上方、下方或中间添加装饰线。

文本装饰值:

◼无:无装饰

下划线暂停

◼上划线:上划线

line-through:删除该行

默认情况下,文本是无衬线的,但超链接除外,默认情况下带有逗号事实上,您可以将 text-decoration 属性的值设置为 none,以删除超链接中的逗号。 当鼠标悬停时,添加逗号,提醒用户当前文本是链接文本。like

a {
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}

显示显示属性

none:该元素不会显示

block:该元素显示为块级元素,该元素前后都有换行符

自带css-css中常用方法总结

内联:默认。 该元素将显示为内联元素,元素前后没有换行符。

inline-block:内联块元素盒子阴影的使用

img {
width: 100%;
/*说明:百分数值是相对于其父元素的 width 计算的*/
opacity: 0.8; /*不透明度0.8*/
}

最初的:

图像不透明度为0.8(透明0.2),阴影为浅黄色

键盘移至顶部

图像不透明度为1(恢复正常),阴影为深蓝色

自带css-css中常用方法总结

位置定位属性

◼Absolute:绝对定位,相对于第一个父元素而非静态定位。 如果没有,那就是相对于身体而言的。

绝对定位是相对于第一个定位的父元素,如果没有,则相对于body

•使用绝对定位,您可以将元素放置在页面上的任何位置。 当窗口滚动时,该元素可能会

出去

•绝对定位使元素的位置独立文档流自带css,因此不占用空间

•绝对定位的元素可能会与其他元素重叠

自带css-css中常用方法总结

理解:绝对定位是相对于第一个定位的(绝对或相对)父元素

关于z-index属性:指定元素的堆叠顺序

使用z-index前提条件:元素必须是定位元素

◼z-index默认值为0,其值可以是正值也可以是负值。

◼z-index值较大的元素在上面(在前面

◼Z-index相当于定义一个垂直显示区域的z轴。如果是负数,则远离用户

越近,正数意味着离用户越远。

◼如果没有指定z-index或者值相等,则最后定位的元素将显示在顶部

◼在没有z-index参与的情况下自带css,有position的元素在最上面

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 css 自带css-css中常用方法总结 https://www.wkzy.net/game/201333.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务