css笔记–css中需要注意的知识点

css尺寸

css的尺寸属性

属性	功能
height	设置元素的高度
width	设置宽度
line-hight	设置元素行高
max-height	设置元素的最大高度
max-width	设置最大宽度
min-height	最小高度
min-width	最小宽度

尺寸属性可以设置为具体的像素单位，也可以设置为相对父元素尺寸的百分比

max-height和max-width属性是当图片的高和宽超过了设定的最大值时，按最大值显示，若没有超过最大值，则最大值不影响大小。

display属性

display属性用于设置元素的状态

display:none或设置visibility:hidden，使元素不可见。但是这两个方法是有区别的，display:none设置后元素不再占用空间，而visibility:hidden设置后，元素还会占用空间，即使它不再显示。

内联元素和块级元素

块级元素：独占一行，比如：<div>div1</div><div>div2</div>会显示成两行。块级元素的width、height、padding、margin属性都是可控制的。即，我们可以给这些属性指定具体的值。
内联元素：相邻的内联元素将显示在同一行，比如：<span>span1</span><span>span2</span>会显示在同一行。内联元素的width、height、padding、margin等都不可改变。

元素分类：

块级元素有：address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, li
内联元素：a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, txtarea, tt, u, var
可变元素：applet, button, del, iframe, ins, map, object, script

虽然元素有其分类，但是我们可以用display元素修改它们的默认分类。

dispaly:block 显示为块级元素
display:inline 显示为行级元素
display:inline-block 显示为内联元素，但是可以修改其高宽、边距等

display:inline-block常常用在<ul>元素，使ul变成水平显示，而且可以调整它的盒子模型

position定位

position属性有5个值

static 使用html默认
relative 相对该元素正常位置的重新定位
fixed 相对浏览器窗口是固定的
absolute 绝对定位，相对父元素的定位
sticky(粘性的) 基于用户的滚动位置来定位。常见的网页中有header，下面有navbar，向上滚动时，navbar会固定在浏览时上方，这种便用到的sticky属性。

sticky属性详细说明

扫描二维码关注公众号，回复： 4395348 查看本文章

元素定义了sticky之后必须指定阈值top，right，bottom，left四个中的一个，以指定固定在浏览器的哪个方向上。否则不会生效。

举例：

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

当为元素指定了position后，有如下的定位属性可选择。

bottom
right
left
top
clip 裁剪一个绝对定位的元素，有三个值:shape,auto,inherit; shape(只有一个形状rect,使用clip:rect (top, right, bottom, left));auto 表示默认值,inherit 从父元素继承
cursor 显示光标移动到指定的类型参考>http://www.runoob.com/css/css-positioning.html
overflow 设置当元素的内容溢出其区域时发生的事情。
overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域
overflow-x
z-index 设置元素的堆叠顺序

该部分参考 >http://www.runoob.com/css/css-positioning.html

float浮动

会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

float:left/right/none/inherit

clear:left/right/both/none/inerit 清除指定元素周围的浮动

设置背景图

background: url(图片地址) 0 0; 后面两个参数表示从什么位置开始裁剪