js学习笔记六(css)

91 阅读1分钟

-三种主要的选择器 元素选择器 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不会改变内容大小)