总结一下今天所学习的内容,如下:

  • 背景

        • 属性 例子或作用
          background

          background: #00FF00 url(bgimage.gif) no-repeat fixed top;

          background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
          background-color 设置元素的背景颜色。
          background-image 把图像设置为背景。url(),渐变

          linear-gradient(to bottom, orange, yellow)
          background-position 设置背景图像的起始位置。
          background-repeat

          设置背景图像是否及如何重复。值:repeat-x,repeat-y,repeat,no-repeat;

          background-clip

          超出边框如何处理。值:border-box|padding-box|content-box

    • border

      • 属性 描述
        border 简写属性,用于把针对四个边的属性设置在一个声明。
        border-style 用于设置元素所有边框的样式.值:solid /dotted/ dashed/ groove/double/none/
        border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
        border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
        border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。包括border-left/border-right
    • padding  内边距 值:top right bottom left
    • margin    外边距 值:top right bottom left
    • display   改变生成的框的类型 : block(分块), inline(内联)
  • 定位机制
    • position     absolute(绝对定位),fixed,relative,none
    • float           

【CSS 第五天】背景,边框的更多相关文章

  1. CSS(五)- 背景与边框 - 边框圆角与阴影基础用法

    扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ...

  2. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  3. 键盘控制背景边框平滑移动(jquery)

    今天同事让我看了一个动画效果,是由键盘控制背景边框平滑移动,我感觉挺cool,所以我自己也动手制作了一个.目的是为了锻炼自己,看自己是否也能在短时间内实现. 先上图: 一.html代码 <!DO ...

  4. CSS的相关知识——背景,超链接,列表,表格,奇偶选择器

    接着上一篇总结一些css的相关知识 ㈠背景 背景属性 1.background-color 背景颜色   rgb函数设置 2.background-image   背景图片  url(“logo.jp ...

  5. 测开之路九十二:css之背景色和背景

    引用css 设置背景色: 背景图片 整个页面的背景图片 图片当局部背景图 也可以简写 css /* css基本样式 */ /* 设置p标签的文字前景色.背景色 */p{ /*字体颜色为蓝色*/ col ...

  6. css写出0.5px边框(一)

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  7. 用div加css做表格去掉外围边框

    通过div做表格时想加上边框,并且想取点外围边框: <div class="cont"> <div class="row"> <a ...

  8. web—第四章css&第五章

     web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...

  9. css重点章节复习—布局-边框-边距-浮动 (部分)

    css重点章节复习—布局-边框-边距-浮动 在第二个任务中,这一块的后面那条线真的弄了很久.起初也是在html里面写的代码.之后觉得这样不好,想到第一个页面中用到的border-bottom和bord ...

  10. css的img移上去边框效果及CSS透明度

    css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...

随机推荐

  1. GYM 100608G 记忆化搜索+概率 2014-2015 Winter Petrozavodsk Camp, Andrew Stankevich Contest 47 (ASC 47)

    https://codeforces.com/gym/100608 题意: 两个人玩游戏,每个人有一个长为d的b进制数字,两个人轮流摇一个$[0,b-1]$的骰子,并将选出的数字填入自己的d个空位之中 ...

  2. hostapd、/dev/random、/dev/urandom

    在使用hostapd做软ap时,出现了random熵不够的问题,导致节点连接不上这个ap. 下面先解释一下/dev/random和/dev/urandom 先让我们从一个工程中遇到的实际问题开始,先上 ...

  3. LR使用web_add_cookie函数进行cookie模拟

    1    为什么要使用cookie模拟 从日常项目测试过程中的问题说起.比如要进行论坛中的文件下载功能的测试.我们都知道只有登录用户才能进行下载操作,这样我们的测试过程可能就变成了先登录系统,然后再进 ...

  4. SQL优化(面试题)

    因为现在面试经常需要问的需要SQL优化,问的具体操作步骤时候的常见做法,所以网上总结这些操作步骤: SQL优化的具体操作: 1.在表中建立索引,优先考虑where.group by使用到的字段. 2. ...

  5. .net core 接口返回图片并且进行压缩

    背景:  .net core 中默认已经取消可以直接访问图片,因为这样不安全. 导致我们上传的图片无法直接通过url访问. 解决方案:  一: 通过修改项目配置,使可以直接通过url访问.(方法略,可 ...

  6. C# FTP下载图片转为Base64

    public string GetFtpBase64String(string FtpFilePath) { try { string sBase64String = string.Empty; Ft ...

  7. Flink写入kafka时,只写入kafka的部分Partitioner,无法写所有的Partitioner问题

    1. 写在前面 在利用flink实时计算的时候,往往会从kafka读取数据写入数据到kafka,但会发现当kafka多个Partitioner时,特别在P量级数据为了kafka的性能kafka的节点有 ...

  8. pwn学习之二

    刚刚开始学习pwn,记录一下自己学习的过程. 今天get了第二道pwn题目的解答,做的题目是2017年TSCTF的easy fsb,通过这道题了解了一种漏洞和使用该漏洞获取shell的方法:即格式化字 ...

  9. SVM 实践步骤

    主要公式步骤: 原距离问题的函数: 1.将SVM的距离问题转化为拉格朗日函数: 2.原函数问题化成如下问题:   3.对各非拉格朗日参数求偏导来求min值: 4.将上面 令各偏导等于0 的结果带回 拉 ...

  10. php八种常用函数

    八种常用的数学函数: ①  abs(x):求绝对值 ②  ceil(x),floor(x):向上/下取最接近的整数 ③  cos(x),sin(x),tan(x):三角函数 ④  min(),max( ...