1.盒模型
margin:0 auto;一个有宽度的元素在浏览器中横向居中。
input{outline:none;}去掉input在鼠标点击时显示的外边线。
padding:
- 用来调整子元素在父元素中的位置,padding需加在父元素上;
- padding是额外加载元素原有大小之上的,添加了padding值需对原有的盒子大小进行删减。
margin值的解析:
- 两个盒子左右边界累加,正常文档流的上下边界重合;
- 在正常文档流下,子元素块直接写margin-top时,会将margin-top的属性值加上父元素身上。(子元素或父元素不设置任何浮动及定位的属性,或父元素不设置边框的情况下。
单行文本的溢出(...):文字超出设定的范围后,以省略号进行显示。
- 首先设置盒子宽度width;
- white-space:nowrap; //使超出宽度的文字不换行,在一行内显示;
- overflow:hidden; //超出的文字隐藏
- text-overflow:scroll;//使超出文字为“...”
2.元素类型
块状元素:
- 可定义宽、高;
- 独占一行;
- 可容纳其他内联元素和其它块状元素(p标签是一个块元素,但他只能作为内联元素的容器)。
内联元素:
- 行内逐个显示;
- 无自己形状,不能定义高度和宽度;
- 遵循盒模型基本规则,可定义padding,border,margin,background等属性,padding,border,margin上下的值无实际功能。
元素类型转换
display:block/inline/inline-block(img,input)/none/list-item(li)
1)block:块状显示;
2)inline内联显示;
3)inline-block行内块元素;
4)none隐藏元素,此元素不会被显示;
5)list-item:将元素转换成列表,li的默认类型;
6)当元素设置了float属性后,就相当于该元素加了display:block。
不是所有的内联元素默认值都为inline
eg:img/input为inline-block
不是所有的块状元素的默认值都为block
eg:table为table,td为table-cell
置换元素与非置换元素
- 元素本身一般拥有固有尺寸的元素,无实际的内容,即空元素,浏览器根据元素的属性和属性值来决定元素的具体显示内容;eg:img、input为置换元素;
- 非置换元素:除置换元素外的元素。