css深入学习
-
背景
background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment] 背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 把图像设置为背景。 background-position 设置背景图像的起始位置。 background-repeat 设置背景图像是否及如何重复 -
链接
-
a:link - 正常,未访问过的链接
-
a:visited - 用户已访问过的链接
-
a:hover - 当用户鼠标放在链接上时
-
a:active - 链接被点击的那一刻
-
-
盒子模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素
-
就像这个图一样
-
Margin(外边距) - 清除边框外的区域,外边距是透明的。
-
Border(边框) - 围绕在内边距和内容外的边框。
-
border-style
-
值 描述 none 定义无边框。 hidden 与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。
-
-
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
-
Content(内容) - 盒子的内容,显示文本和图像。
-
总元素的宽度=margin+border+padding+content
-
-
轮廓(outline)
- 主要有outline、outline-color、outline-style、outline-width四个属性
-
margin
- 主要只有设置宽度没有其他的属性
-
padding
- 与margin相似只有宽度属性
-
display与visibility
- 隐藏元素:把display属性设置为"none",或把visibility属性设置为"hidden"
-
position
-
static
- 默认情况,遵循文档流对象
-
relative
- 相对定位元素的定位是相对其正常位置,但是正常的位置还是会被占有
-
fixed
-
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动(固定死的位置)
-
-
absolute
-
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:
-
absolute 定位使元素的位置与文档流无关,因此不占据空间。
-
absolute 定位的元素和其他元素重叠。
-
-
sticky
-
与fixed相似但是页面不滚动改变,没有滚动类似relative滚动类似fixed
-
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
-
-
-
overflow
-
控制内容溢出元素框时在对应的元素区间内添加滚动条
-
值 描述 visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
-
-
float
-
使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动,下面的文本流将环绕在它左边:
-
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
clear 属性指定元素两侧不能出现浮动元素。
-