css 属性笔记

最新推荐文章于 2025-04-07 18:31:44 发布

smallerCoder

最新推荐文章于 2025-04-07 18:31:44 发布

阅读量225

点赞数

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/id_no_chinese/article/details/80221229

版权

前端开发专栏收录该内容

24 篇文章

订阅专栏

1.calc

width : calc(100% - 50px);   /*注意运算符前后要有空格。*/

width : calc(100% - 2.5rem);   /*注意运算符前后要有空格。*/

2.字段超过长度，显示省略号

.aticle {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

3.rem和em的区别

他们都是相对单位。rem是相对于页根元素html设置的字体大小计算相对单位。em是相对于当前元素的字体大小计算。如果当前元素没有设置字体大小，em会根据继承去获取字体大小。所以有时父元素大小改变了，通过em设置宽高的子元素也相应改变。

html {
    font-size:16px;
}

.rem {
    font-size:20px;
    width:3rem /* 48px */
}
.em {
    font-size:15px;
    width:2em; /* 30px   */
}

4.选择器的优先级：

通用选择器（*）< 标签选择器(h1) < 类选择器(.) < 伪类选择器(:hover) < id 选择器(#)

5.Css属性中text-indent和padding的区别

text-indent是首行缩进效果，第二行又是正常显示。Padding是内边距，所有行都会有左缩进的效果。

6.box-sizing盒子模型应用。

兼容性设置： -webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box;

设置了当前属性的元素：宽高的计算会包括内边距和边框，不包含外边距。利于并列元素宽高的计算。

.indent {
				width:200px;
				height:200px;
				text-indent:35px;
				background-color: #FF5858;
				background: url(../img/eyes.png) 5px 0 no-repeat;
				background-size: 20px 20px;
				border: 1px solid #ff5858;
			}
			.padding {
				width:200px;
				height:200px;
				padding-left:35px;
				background-color: #FFfdsd;
				/*盒子模型，包含边框和内边距*/
				box-sizing:border-box;
				-webkit-box-sizing: border-box;
				-moz-box-sizing:border-box;
				border:5px dotted #000;
				background: url(../img/eyes.png) 5px 0 no-repeat;
				background-size: 20px 20px;
			}
<div class="indent">我是text-indext 我超长了布局应该怎么变化，左侧有文字么？ 是有的</div>
<div class="padding">我是padding，我超长的布局如下所示。左侧有文字么？ 没有的</div>

5,6效果截图如下

7.background属性

控制元素背景。格式 background: url(../xx.png) 5px 50% no-repeat;

第一个参数是背景图片的地址，第二个是图片相对左侧偏移量。第三个是垂直偏移量。设置50%为居中。最后一个是背景图片不重复。可以配合background-size使用。设置背景图片的大小。

background:rgb(158,47,47,0.7) url(../img/eyes.png) 5px 0 no-repeat;  //这里第一个参数加入了背景颜色，第四个参数为透明度。
background-size: 20px 20px;
//截图就是上面截图的蓝色眼睛，第一个参数可以是一个颜色值，就是背景颜色。其余参数依次后移。

8.元素宽高获取

#icon1 {
		position:absolute;
		margin-left:400px;
		width:100px;
		height:100px;
		padding:30px;
		margin:20px;
		border:2px solid #000;
		background:url(../../build/logo.png) 50% 50% no-repeat;
		background-size:100px 100px;
		box-sizing: border-box;
	}
var ele = e.target;
console.log("clientWidth  " + ele.clientWidth);    //元素宽度，content+padding
console.log("left   " + ele.style.left);              //理论上是margin-left的值。但是测试是没有效果
console.log("padding  " + ele.style.padding );       //没有效果
console.log("margin  " + ele.style.margin );              //没有效果
console.log("clientLeft " + ele.clientLeft);         //左边框宽度
console.log("clientOffsetWidth   " + ele.offsetWidth)          //元素宽度，content+padding+ border
var $this = $(e.target);
$this.draggable = true;
console.log("width++" + $this.width());                //content
console.log("innerWidth++" + $this.innerWidth())          //contetn+padding
console.log("outerWidth++" + $this.outerWidth())          //content+padding+border
console.log("outerWidth(true)++" + $this.outerWidth(true))        //content+padding+border+margin