CSS拓展

最新推荐文章于 2022-12-21 21:56:34 发布

榕树先生

最新推荐文章于 2022-12-21 21:56:34 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/Departuretree/article/details/102772779

版权

CSS中颜色的设定
颜色名称定义
十六进制定义

opacity:50%;//透明度

长度单位
em px
em的实际大小受字体尺寸的影响

背景的设置

background-attachment:scroll/fixed;//背景图片随内容滚动/背景图片固定不动

边框的设置

border-radius:a b c d;//左上 右上 右下 左下
border-radius:50%;//表示圆或者椭圆

鼠标图标的设置

cursor:pointer;//鼠标图标成手状

浮动属性
浮动属性不是指元素相对于相邻元素的浮动，而是相对于其父元素的浮动

float:none/left/right;//元素不浮动/左浮动/右浮动

固定相邻元素
当两个相邻固定元素设置浮动属性后，其执行效果和这两个元素的位置有关。
设置两个相邻的元素
1.第一个元素不浮动，第二个元素左浮动，执行后浮动元素在固定元素的下面显示
2.若第一个元素浮动，第二个元素不浮动，执行后浮动元素在固定元素的前面显示
两个浮动元素相邻
当页面中两个浮动元素相邻时，第二个浮动元素会在第一个浮动元素后面显示
多个浮动元素相邻
当页面中多个元素相邻时，这些元素会按照出现的顺序排列在一行，直至宽度超过包含他的容器宽度时才换行显示

清除浮动

clear:none/left/right/both;
//设置两边都有浮动属性/设置左边有浮动属性/设置右边有浮动属性/设置两边都没有浮动属性

按照css规范，浮动元素会被移出文档流，不会影响到块状盒子的布局，而只会影响内联盒子的排列，
因此当其高度超出包含容器时，一般容器不会自动伸长以闭合浮动元素。

定位模式
定位模式即position属性，是一个不可继承的属性。

position：取值；

static:设置元素按照普通方式生成，按照HTML的规则进行定位
设置元素时几乎不用这个值，除非用来覆盖之前的定义
relative:这是元素保持原来的大小偏移一定的距离
absolute:设置元素将从页面元素中被独立出来，使用边偏移来定位脱离文档流
一般应用在一个相对定位的元素里面放一个绝对定位的元素。子元素可以通过top right bottom left 来定位，定位的参考目标就是其具有相对定位属性的父级元素,并且设置这些偏移后，产生的空隙会被后面的元素填充（如果后面的元素尺寸足够的话）
子元素的absolute属性，相当于从文档流中抽取出来，浮动在原平面排版上，形成“层”，如果有多个层，层与层之间就必然会有谁覆盖谁、谁在上谁在下的竞争关系，因此为解决这个竞争关系，就产生了Z-index(空间坐标系的Z轴)属性，谁的值大，谁就在上面。
如果父级元素没有设置relative，那么子元素就会以body作为参考点
父元素的relative属性，在设置片以后产生了空隙，其周围的元素并不会填充这些空隙，即使他们尺寸足够。
fixed:设置元素将从页面元素中被独立出来。但其位置不是相当于文档本身，而是相对于屏幕本身

内容控制属性

display:属性值;

visibility:属性值；

text-align:center;

不仅实现了页面内块元素的居中效果，而且实现了块元素内文本的居中效果

盒子模型
盒子的宽：width+padding+border+margin
使用box-sizing:border-box;
盒子的宽：width+margin(width=内容宽+padding+border)

图片格式
jpg png gif webp

overflow属性

overflow:属性值；

:first-of-type//第一个同类型对象
：nth-of-type(n)//第n个同类型对象 n=数字  odd(奇数行) even(偶数行)

.input【type="text"】{
	outline:none;//去除边框线
}

关注