Fe-6 CSS

Fe-6-1

三种引入CSS

内联(inline style attribute)

<h1 style='background:red;'>内联(inline style attribute)</h1>

<head> 标签内的 <style> 标签

    <style>
            h1 {
                background: blue !important;
            }

        </style>

<link> 标签中的外联

<link rel="stylesheet" href="fe6.css">

样式优先级(从高到低)
!important
内联样式
<style> 中的样式
link 中的样式

三种选择器

ID
类
元素

.green {
                background: green;
                /*color: white;*/
            }
            h1 {
                background: yellow !important;
                color: red;
            }
            #id-button-test {
                background: lightblue;
            }

选择器优先级(从高到低)
!important
内联样式
id 选择器
class 选择器
元素选择器

display 属性

block
默认 block 的标签有
div p ul ol li h1 h2 h3 h4 h5 h6
inline
inline 只占 content 的尺寸
inline-block
inline-block 是 inline 布局 block 模式
inline-block 对外表现为 inline，所以可以和别的 inline 放在一行
对内表现为 block，所以可以设置自身的宽高
盒模型, inline 元素没有盒模型
内容
padding 盒子里距离
border 盒子
margin 盒子外

Fe-6-2

position 属性用于元素定位
static
relative
absolute
fixed

非 static 元素可以用 top left bottom right 属性来设置坐标
非 static 元素可以用 z-index 属性来设置显示层次

relative 是相对定位只改变自己的位置，对页面没用影响

微信截图_20180106112720.png

absolute 完全绝对定位, 忽略其他所有东西
往上浮动到非 static 的元素
就是什么子绝父绝，子绝父相

这里给了class选择器这个盒子相对定位，否则X会上浮到非static的元素右上角

微信截图_20180106113254.png

fixed 基于 window 的绝对定位, 不随页面滚动改变
一些浮动小广告
后写的会盖住先写的内容
可以设置谁厚度z-index：100 显示在上面，默认是0
overflow属性
visible 默认
auto 需要的时候加滚动条
hidden 隐藏多余元素
scroll 就算用不着也会强制加滚动条

微信截图_20180106114024.png

如果设置overflow;hidden;溢出的部分就会隐藏

微信截图_20180106114130.png

auto是加滚动条

盒模型相关的 CSS

border
border-width
border-style
border-color
3 个属性可以简写为一句
border: 3px red solid;

微信截图_20180106114632.png

border-top
    border-top-width
    border-top-style
    border-top-color

border-right
    border-right-width
    border-right-style
    border-right-color

border-bottom
    border-bottom-width
    border-bottom-style
    border-bottom-color

border-left
    border-left-width
    border-left-style
    border-left-color

margin
    margin-top
    margin-right
    margin-bottom
    margin-left

padding
    padding-top
    padding-right
    padding-bottom
    padding-left

三种缩写, 分别对应有 4 2 3 个值的时候的解释, padding 同理
margin: top right bottom left
margin: (top/bottom) (right/left)
margin: top (right/left) bottom

border-radius 是用来设置圆角度数的
px是半径
它也拥有三种缩写, 对应的含义如下
左上角为 top, 右下角为 bottom

background 相关属性和缩写
background-color: #233;
background-image: url(bg.png);
background-repeat: no-repeat;
background-attachment: fixed; /* 背景图片随滚动轴的移动方式 */
简写如下
background: #233 url(bg.png) no-repeat;

查询属性兼容网站

Caniuse

https://caniuse.com/

居中写法

上下0，左右auto
block 元素居中

margin: 0 auto;

inline inline-block 元素居中

text-align: center;

text-decoration:
underline
overline
line-through
blink(这个值已经废弃了)

链接下划线就是这个属性的underline

微信截图_20180106121048.png

margin 合并特例

上下margin

微信截图_20180106121613.png

outline

基本和border一样，可是不改变盒子大小。可以设置这个属性看盒子大小。