-三种主要的选择器 元素选择器 class 选择器 id 选择器
-样式优先级(从高到低)
!important
内联样式
<style> 中的样式
link 中的样式
-选择器优先级(从高到低)
!important
内联样式
id 选择器
class 选择器
元素选择器
-display 属性:
block
inline
inline-block
-block 独占一行,默认 block 的标签有:div p ul ol li h1 h2 h3 h4 h5 h6
-inline 只占 content 的尺寸,该多大就多大
-inline-block 是 inline 布局 block 模式 inline-block 对外表现为 inline,所以可以和别的 inline 放在一行 对内表现为 block,所以可以设置自身的宽高
-盒模型, inline 元素没有盒模型 内容:
padding
border
margin
-position 属性用于元素定位:
static(默认属性)
relative
absolute
fixed
-非 static 元素可以用 top left bottom right 属性来设置坐标;
-非 static 元素可以用 z-index属性来设置显示层次;
-relative 是相对定位
-absolute 完全绝对定位, 忽略其他所有东西往上浮动到非 static 的元素
-fixed 基于 window 的绝对定位, 不随页面滚动改变
-span标签没有意义,可以用来提取属性
-overflow属性:
visible 默认
auto 需要的时候加滚动条
hidden 隐藏多余元素
scroll 就算用不着也会强制加滚动条
-border-radius 是用来设置圆角度数的
-居中写法:
block 元素居中
margin: 0 auto;
inline inline-block 元素居中
text-align: center;
-text-decoration: underline overline line-through
-background 相关属性和缩写:
background-color: #233;
background-image: url(bg.png);
background-repeat: no-repeat;
background-attachment: fixed; /* 背景图片随滚动轴的移动方式 */
简写如下:
-background: #233 url(bg.png) no-repeat;
-outline: dashed red 1px(增加边框,但与border不同,outline不会改变内容大小)