请关注公众号：自动化测试实战

css常用属性

  • width
     宽

  • height
     高

  • color
     字体颜色

  • border
     边框

  • background
     背景

lesson3.html

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">

    <title>Css</title>

    <meta name="keywords" content="key1, key2">

    <meta name="description" content="">

    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>

    <div id="div">

        <span>

            这是一个span标签
        </span>

    </div>
</body>
</html>

index.css

/*

    px:意为像素;

*/

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background: pink;
}

上面代码大家会发现我们只定位到`div`层，但是下面的`span`标签也有相同的样式，这就是`css具有继承性`。

现在我们精确到span层，修改字体颜色为绿色：

index.css

/*

    px:意为像素;

*/

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background: pink;
}

div#div span{
    color: green;
}

我们发现字体颜色变为精确设置的颜色，但样式仍然是继承过来的。

边框，边框有上下左右四个属性，如果不需要设置或者四个边框相同，只需要写一条border即可：

/*

    px:意为像素;

*/

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background: pink;    
    border: 1px solid #0000ff;
}

或

/*

    px:意为像素;

*/

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background: pink;    
    border-top: 1px solid #0000ff;    
    border-bottom: 2px solid #000fff;    
    border-left: 3px solid #00000f;    
    border-right: 4px solid #000000;
}

之前我们的background都是简单的颜色，如果要用图片该怎么办呢？我们需要先知道background的几个写法

  • background-color
     背景颜色

  • background-image
     背景图片

  • background-repeat
     如果图片较小，会将图片反复平铺在页面上，通过这个属性可设置图片效果：

      - background-repeat：repeat-X;
    
      图片在水平方向重复
    
  - background-repeat: repeat-Y;
    
      图片在垂直方向重复
    
  - background-repeat：no-repeat；
    
      图片只显示一次

  • background-position
     图片位置。
     background-positon: center center;居中；第一个
     backgroung-position: 0px 0px;第一个值为水平方向值，第二个值为垂直方向值；

项目结构：

/*

    px:意为像素;

*/

div#div{
    color:red;    
    width: 100px;    
    height: 100px;    
    background-image: url("../imgs/pic.png");    
    border: 1px solid #0000ff;
}

明天继续……

 

HTML第三课——css盒子的更多相关文章

  1. web前端学习（三）css学习笔记部分（2）-- css定位+盒子操作

    3.CSS定位 3.1定位 1.CSS定位: 改变元素在页面上的位置 2.CSS定位机制 普通流:元素按照其在HTML中的位置顺序决定排布的过程 浮动 绝对布局 属性 描述 position 把元素放 ...

  2. 后端码农谈前端（CSS篇）第六课：盒子模型

    元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边 ...

  3. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  4. CodeIgniter框架入门教程——第三课 URL及ajax

    本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...

  5. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  6. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

  7. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

  8. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

  9. css盒子模型、文档流、相对与绝对定位、浮动与清除模型

    一.CSS中的盒子模型 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...

随机推荐

  1. js插件---GoJS 如何去水印

    js插件---GoJS 如何去水印 一.总结 一句话总结:把a.Kv=d[w.Jg("7eba17a4ca3b1a8346")][w.Jg("78a118b7" ...

  2. WPF 元素的查找

    预设置元素名字 WPF有两种方式设置元素的Name <StackPanel x:Name="panel"> <Label Name="name1&quo ...

  3. LeetCode--168--Excel表列名称

    问题描述: 给定一个正整数,返回它在 Excel 表中相对应的列名称. 例如, 1 -> A 2 -> B 3 -> C ... 26 -> Z 27 -> AA 28 ...

  4. 多目标跟踪方法：deep-sort

    多目标跟踪方法:deep-sort deep_sort Multitarget tracking data association 读'Simple Online and Realtime Track ...

  5. Leetcode 77

    //这似乎是排列组合的标准写法了已经class Solution { public: vector<vector<int>> combine(int n, int k) { v ...

  6. 处理Oracle EBS R12登录首页跳转出现unexpected error问题(转)

    原文地址: 处理Oracle EBS R12登录首页跳转出现unexpected error问题 经上网搜索,造成此问题的问题有很多,如内存不足.系统参数配置不当.程序代码.系统表空间不足等原因.查询 ...

  7. PaodingAnalysis 提示 "dic home should not be a file, but a directory"

    Exception in thread "main" net.paoding.analysis.exception.PaodingAnalysisException: dic ho ...

  8. AIOps探索：基于VAE模型的周期性KPI异常检测方法——VAE异常检测

    AIOps探索:基于VAE模型的周期性KPI异常检测方法 from:jinjinlin.com   作者:林锦进 前言 在智能运维领域中,由于缺少异常样本,有监督方法的使用场景受限.因此,如何利用无监 ...

  9. Java多线程的同步控制记录

    Java多线程的同步控制记录 一.重入锁 重入锁完全可以代替 synchronized 关键字.在JDK 1.5 早期版本,重入锁的性能优于 synchronized.JDK 1.6 开始,对于 sy ...

  10. （剑指Offer）面试题59：对称的二叉树

    题目: 请实现一个函数,用来判断一颗二叉树是不是对称的. 注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 思路: 对于一棵二叉树,从根结点开始遍历, 如果左右子结点有一个为NULL,那 ...