CSS基础知识

最新推荐文章于 2019-05-02 10:09:02 发布

qq_39125445

最新推荐文章于 2019-05-02 10:09:02 发布

阅读量255

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_39125445/article/details/88990698

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.position定位知识

position：static，跟随文档流，默认设置值，没有top,right,bottom,left,z-index等内容。

position:fixed，脱离文档流，可以设置top....等属性，header这种可以固定在上下左右，所以一些导航栏就是这样设置的，高度不用更改html和body就可以设置为100%；

实例：导航栏固定，并且在导航栏下面设置背景图像

一般使用background必须设置高度，因为设置100%的不会有效果，所以很烦躁，那么今天就是解决这个问题

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            width: 100%;
            height: 60px;
            background-color: #2ddf2d;
            position: fixed;
        }

        li {
            list-style-type: none;
            display: inline-block;
            line-height: 60px;
        }

        .background {
            background: url("../HTML-CSS/image1.jpg");
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: -1
        }
    </style>
</head>

<body>
    <div class="background">

    </div>
    <div class="header">
        <ul>
            <li>首页</li>
            <li>班级</li>
            <li>学生</li>
            <li>老师</li>
            <li>权限</li>
            <li>备份</li>
        </ul>
    </div>

position:relative，不会脱离文档流，可以设置top...等，但是top是指的相对于自己的内容top:20px;指的是自身下移20px;

<style>
    .content {
      width: 200px;
      height: 200px;
      background-color: red;
      position: relative;
      top: -100px;
    }
  </style>

例子：使用relative和static内容。relative移动覆盖到static的内容，并且设置static的Z-index也是无效的

<div class="main" style="width: 400px;height: 200px;background-color: #2ddf2d;z-index:2"></div>

<div class="content" style="width:200px;height:300px;background:goldenrod;position: relative;bottom: 200px;"></div>

positon:absolute，1.相对于设置除了static定位的父级元素，进行定位

position:sticky粘性定位，新出的，和很多不兼容。相对定位和绝对定位的混合。

2.CSS命名的规范

wrap：（外套）用于控制外围宽度

header:(头部)

main:(用于中部主体内容)

main-left：左侧布局；

main-right:右侧布局

tag：标签

friendlink：友情链接

logo:标志

brand:商标信息

nav：（导航条）

subnav:二级导航

menu：菜单

submenu：子菜单

content或者container最外层:内容

footer:用于底部内容

layout:可用于布局使用

css文件命名：

master.css,style.css	主要的
module.css	模块
base.css	基本共用
layout.css	布局，版面
themes.css	主题
columns.css	专栏
font.css	文字、字体
forms.css	表单
mend.css	补丁
print.css	打印