position属性
absolute
绝对定位。
1.脱离原来位置进行定位。
2..每个absolute都是一个独立的层。
3.可以使用top
bottom
left
right
进行定位。
relative
相对定位。
1.保留原来位置进行定位。(相当于原位置依然有元素,但元素变为不可见,而新位置也有一个该元素,但元素可见)
3.可以使用top
left
right
进行定位。
absolute
定位的元素,会一层一层的向上找父元素,有没有absolute
或者relative
。如果找到了,就以该元素为参考元素进行定位。如果没有找到,就以浏览器为参考进行定位。
可以使用relative
做坐标系,使用absolute
进行定位。
fixed
:固定定位。
相当浏览器窗口,不会改变位置。
box-sizing
box-sizing
默认是content-box
。实际开发中应改成border-box
。意思是,如果设置了width:100
,那border+margin+padding+content
的总值,就是100``。如果用
content-box,只有```content
会是100
。一般设置在通配符里。
背景色
rgba(0, 0, 0, 0)
opacity: 0
这两个都能给元素设置透明度。rgba只会改变背景色,不会改变文字的透明度。opcity是把背景色与文字颜色一起变透明。
百分比的问题。
1.普通元素的百分比,参考是父元素的content大小。
2.绝对定位元素的百分比,参考是父元素中,第一个绝对定位的padding+content
width
height(因为参考系本身受该元素影响,所以设置无效)
padding
border
marging
设置百分比后,参考的都是参考系的content的宽度。
最大最小宽高
max-width
min-height
等等
当一个元素尺寸会自动变化时,可以设置该属性,不至于让他变的过大过小。
1.例如浏览器的窗口,就是能手动设置大小的。给自己的页面设置min-width
后,就不会再缩的更小了。
2.一般给图片设置max-width。可以防止图片大小超过容器。
当然也可以直接witdh:100%
textArea
不让用户拖动文本框:
resize: none
这是css3
的属性。
both 默认值。上下左右都可以拖动。
horizontal:用户可以调节元素的宽度;
vertical:让用户可以调节元素的高度;
伪类(部分):
元素 | 作用 |
---|---|
:focus | 聚焦用于文本输入框。 |
:hover | 当鼠标移动到该元素上。 |
:disable | 禁用。 |
:checked | 单选或者多选被选中的状态。 |
伪元素(部分):
元素 | 作用 |
---|---|
::placeholder | 对输入框有效。 |
::after | 在结尾追加元素。 |
解决高度坍塌:
1:添加属性:overflow:hidden;
2:在float元素后,添加一个元素。例如<span> display :block clear :both
即可。
一般稍微封装一下:
.clearfix::after {
clear: both;
display: block;
content: '';
}
之后就可以直接使用clearfix了。
解决不在图标文字不在同一行的问题:
vertical-align:
select属性多选:
multiple
label
label与某元素绑定,可以用for属性直接绑定该元素的id
<input type="radio" name="sex" id="woman">
<label for="woman">女</label>
outline外边框
外边框。不包含盒子尺寸,可以自由调试后删除,不影响代码的效果。border就不行。用法与border一致。
outline: 1px solid red
background-position:
值 | 说明 |
---|---|
background-position | 指定背景图像的位置 |
background-position: 200px 200px;
属性计算过程:
-
确定声明值
参考样式表中没有冲突的声明,作为css属性值。
-
层叠冲突
对样式表中有冲突的声明按顺序使用层叠规则:
-. 比较重要性:作者样式表覆盖浏览器样式表。
-. 比较特殊性:比较权重。
-. 比较源次序:谁写后边用谁。
-
使用继承。对依然没有值的属性,若可以使用继承,则继承父元素。
-
使用默认值。
如果对某属性添加inherit
值,相当于直接调用super
方法。会立即当前属性设为父元素的的值。
a标签伪类的使用顺序:
- a:link
- a:visited
- a:hover
- a:active
网友评论