css简单快速入门 · python-网页到放弃

>[success] # 简单的css 快速上手 >[danger] ##### 三种css样式使用 ~~~ 1.内联样式 <a stytle="backgoroud:red"></a> 2.<head> 标签内的 <style> 标签 3.<link> 标签中的外联 ~~~ >[danger] ##### 三种主要选择器 ~~~ 1.元素选择器 2.class类选择器 3.id 选择器 ~~~ >[danger] ##### 三种样式优先级(从高到低) ~~~ 1.!important 2.内联样式 3.按顺序执行 ~~~ >[danger] ##### 选择器样式优先级 ~~~ 1.!important 2.内联样式 3.id 选择器 4.class 选择器 5.元素选择器 ~~~ >[danger] ##### display -- 决定标签的呈现状态 ~~~ 1.none 隐藏 2.block 块级显示占一行 3.inline 行内 4.inline-block 行内块 ~~~ >[danger] ##### 盒子模型组成 ~~~ 1.content 内容 2.padding 内边距 3.border 边框 4.margin 外边距 ~~~ >[danger] ##### position -- 定位元素 ~~~ 1.static 默认定位 2.relative 相对定位, 相对于自己本来应该在的位置 3.absolute 绝对定位, 行为有点奇怪 4.fixed 固定定位, 相对位置是整个窗口 ~~~ >[danger] ##### top left bottom right 定位 ~~~ 1.非 static 元素可以用 top left bottom right 属性来设置坐标 2.非 static 元素可以用 z-index 属性来设置显示层次 ~~~ >[danger] ##### overflow属性 ~~~ 1.visible 默认 2.auto 需要的时候加滚动条 3.hidden 隐藏多余元素 4.scroll 就算用不着也会强制加滚动条 ~~~ >[danger] ##### 属性缩写 ~~~ margin: top right bottom left margin: (top/bottom) (right/left) margin: top (right/left) bottom background-color: #233; background-image: url(bg.png); background-repeat: no-repeat; background-attachment: fixed; /* 背景图片随滚动轴的移动方式 */ 简写如下, 顺序不要紧 border: 10px blue solid; ~~~ >[danger] ##### 居中设置 ~~~ block 元素居中, 两步走 1, 设置自己的宽度 2, 设置自己的 margin: 0 auto; inline inline-block 元素居中设置父元素的 text-align 属性 text-align: center; ~~~ >[danger] ##### 清除浮动 ~~~ 很重要的 float 属性用 clear float 的方法撑起父元素假设要被撑起来的父元素是 .gua-float .gua-float::after { content: ""; display: block; clear: both; } ~~~ >[danger] ##### 伪元素 ~~~ 创建一个 css 生成的元素 ::after ::before ~~~