zoukankan      html  css  js  c++  java
  • html css的简单学习

    html css的简单学习


    css的内边距:
    padding (auto、length、%)(顺序:上、右、下、左)
    padding-top
    padding-left
    padding-right
    padding-bottom

    示例:
    *{padding:10px 20px 30px 40px} //顺序:上、右、下、左
    ===========================================================
    css中的外边距:
    margin (auto、length、%)(顺序:上、右、下、左)
    margin-top
    margin-left
    margin-right
    margin-bottom
    =============================================================
    css的定位:
    普通流、浮动、绝对定位。
    使用浮动元素或者元素定位后,会生成一个块级框,不论本身是何种元素。

    css的定位属性:
    position 把元素放置到一个静态的、相对的、绝对的、固定的位置中。
    top 定义了一个定位元素的上边距边界与其包含块上边界之间的偏移。
    right 定义了一个定位元素的右外边距边界与其包含块右边界之间的偏移。
    bottom 定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
    left 定义了一个定位元素的左外边距边界与其包含块左边界之间的偏移。
    overflow 设置元素的内容溢出其区域时发生的事情。
    clip 设置元素的形状,元素被剪入这个形状之中,然后显示出来。
    vertical-align 设置元素的垂直对齐方式。
    z-index 设置元素的堆叠顺序。

    position属性:
    static 默认值,没有定位,占用页面空间;
    relative 相对定位,占用页面空间,基于父级的定位,可能会覆盖其他元素;
    absolute 绝对定位,不占用页面空间。
    fixed 固定定位,不占用页面空间。

    示例:
    .box{
    100px;
    height:100px;
    border:1px solid red;
    position:relative;
    top:20px;
    left:20%;//基于父级
    }

    浮动:可以使块级元素变行级元素。
    float (left、right)
    clear 清除浮动,(left、right、both),浮动会造成不占用父级空间,清除后可以
    把父级撑起来。

    示例:
    .box{100px;height:100px;float:left}
    ============================================================================
    cursor:pointer;//鼠标移上去,显示小手

    设置弧度/曲面(x轴位移 y轴位移 阴影宽度 颜色 内部/外部 )
    box-shadow:0px 5px 20px #1F4612 inset;

    设置圆角:
    border-radius:5px;//一个值就是四个角都圆角
    border-top-left-radius:5px;//只设置左上角为圆角

    overflow:hidden; //允许子级元素撑开父级元素,超出部分隐藏

    .clear{-ms-zoom:1} //针对IE,
    .clear:after{content:'';display:block;clear:both;}//使用伪类,撑开父级元素
    clear类放在父级元素上。
    ========================================================================
    width和max-width:
    设置width,浏览器的宽度发生变化时可能会出现滚动条。
    max-width不会出现滚动条。
    ========================================================================
    background-position:0 30px;//设置背景的位置
    ===================================================================
    谷歌浏览器插件---谷歌访问助手:
    http://www.ggfwzs.com/230/chrome.zip
    ==============================================================
    Subline text3插件:
    ctrl+shift+p 显示控制台
    =================================================
    Atom是一款免费的编辑器。
    ====================================================================
    搭建BrowserSync运行环境,浏览器不刷新就可以看到效果:
    1、下载node.js;
    2、安装BrowerSync包;
    3、切换到项目目录;
    4、启动BrowerSync服务。
    网址:www.browersync.cn
    ===================================================================

  • 相关阅读:
    软工实践寒假作业2
    nginx前端代理配置文件
    个人作业——软件工程实践总结&个人技术博客
    个人作业——软件评测
    结对第二次作业——某次疫情统计可视化的实现
    结对第一次—疫情统计可视化(原型设计)
    软件工程实践寒假作业(2/2)
    软工实践寒假作业(1/2)
    毕设11.2
    毕设计划(11.1-11.8)
  • 原文地址:https://www.cnblogs.com/gyfluck/p/10103795.html
Copyright © 2011-2022 走看看