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
display:属性值;
- block:定义元素为块对象
- inline:定义元素为内联对象
- list-item:定义元素为列表项目
- none:将对象隐藏,同时此元素所占的空间也被清除 元素相当于消失
- 是否显示属性visibility
visibility:属性值;
- visible:定义元素可见
- hidden:定义元素不可见 仍占据原来的位置
- collapse:隐藏列表中的行和列
- 居中显示属性 text-align
text-align:center;
不仅实现了页面内块元素的居中效果,而且实现了块元素内文本的居中效果
盒子模型
盒子的宽:width+padding+border+margin
使用box-sizing:border-box;
盒子的宽:width+margin(width=内容宽+padding+border)
- 垂直方向上相邻边界元素的边界会发生重叠
- 相邻元素水平方向上的边界将会相互加在一起
图片格式
jpg png gif webp
overflow属性
overflow:属性值;
- visible:设置不会剪贴内容,也不会产生滚动条
- auto:设置当需要时产生滚动条
- scroll:设置总是产生滚动条
- hidden:设置不会显示超出内容的部分
:first-of-type//第一个同类型对象
:nth-of-type(n)//第n个同类型对象 n=数字 odd(奇数行) even(偶数行)
.input【type="text"】{
outline:none;//去除边框线
}