border-style的值：

none 无

dotted 点状

dashed 虚线

solid 实线

double 双实线

margin：

垂直方向两个相邻元素都设置了外边距，那么外边距会发生合并

合并高度=两个发生合并的外边距中的较大值

元素的实际高度=上边框+上内边距+内容高度+下内边距+下边框

元素在页面中实际所占的高度是：上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

hover属性实现鼠标悬停时显示子元素：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>display属性</title>

    <style type="text/css">

    div {

        width: 200px;

    }

    /*补充样式*/

    ul{

        margin-left:-36px;

    }

    li{

        display: none;

    }

    div:hover li{

        display: inline-block;

        list-style: none;

    }

    </style>

</head>

<body>

    <div>

        <h2>家电</h2>

        <ul>

            <li>冰箱</li>

            <li>空调</li>

            <li>洗衣机</li>

        </ul>

    </div>

</body>

</html>

inline将元素显示为内联元素，元素前后没有换行符

行内元素无法设置宽和高，外边距只能设置左右的，无法设置上下的

列表demo：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>display属性</title>

    <style type="text/css">

    *{margin:0;padding:0;}

    .wrap {

        width: 220px;

        background-color:#f2f4f6;

        border:1px solid #ececec;

        margin:0 auto;

    }

    .list{

        width:100%;

        height:150px;

        background-color:#040a10;

        text-align:center;

        color:#fff;

        line-height:150px;

        font-size:20px;

        font-weight:bold;

    }

    li{

        list-style: none;

        border-bottom:1px solid #d9dde1;

        font-size:14px;

        line-height:1.5em;

        margin:0 15px;

        padding:10px 5px 5px 5px;

    }

    li:last-child{

        border-bottom:none;

    }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="list">

            <p>前端课程排列</p>

        </div>

        <ul>

            <li>

                <p>HTML+CSS基础课程</p>

                <span>456605人在学</span>

            </li>

            <li>

                <p>HTML+CSS基础课程</p>

                <span>456605人在学</span>

            </li>

            <li>

                <p>HTML+CSS基础课程</p>

                <span>456605人在学</span>

            </li>

        </ul>

    </div>

</body>

</html>

鼠标悬停显示demo：

<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

          *{margin:0;padding:0;}

          .big{width: 150px;margin: 10px auto 0 auto;background: #f2f4f6;border: 1px solid #ddd;}

          h3{height: 40px;line-height: 40px;text-align: center;}

          .div1 h3{border-bottom: 1px solid #ddd;}

          .div2 h3{border-bottom: 1px solid #ddd;}

          ul{background-color:#fff;display: none;}

          ul li{ height: 30px;line-height: 30px;margin-left: 58px;list-style: none;}

          .div1:hover .elec{display: block;border-bottom: 1px solid #ddd;}

          .div2:hover .wash{display: block;border-bottom: 1px solid #ddd;}

          .div3:hover .clothes{display: block;border-top: 1px solid #ddd;}

        </style>

    </head>

    <body>

    <div class="big">

        <div class="div1">

            <h3>家电</h3>

            <ul class="elec">

                <li>冰箱</li>

                <li>洗衣机</li>

                <li>空调</li>

            </ul>

        </div>

        <div class="div2">

            <h3>洗护</h3>

            <ul class="wash">

                <li>洗衣液</li>

                <li>消毒液</li>

                <li>柔顺剂</li>

            </ul>

        </div>

        <div  class="div3">

            <h3>衣物</h3>

             <ul class="clothes">

                <li>衬衫</li>

                <li>裤子</li>

                <li>卫衣</li>

            </ul>

        </div>

      </div>

</body>

</html>

background-color:transparent 透明，是默认值

背景区包括内容+内边距+边框，不包括外边距

background-repeat：repeat、no-repeat、repeat-x、repeat-y、inherit

background-attachment:scroll（默认）/ fixed

background-position:

值(x y)(x% y%)(只有一个参数代表第二个默认居中)/top/bottom/left/right/center（水平垂直居中）

background简写：后面的属性值不分顺序

有序列表样式：

list-style-position:inside（嵌入文本中）/outside（在所有文本左侧）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <style>

     li{

         list-style-image:url(http://climg.mukewang.com/58dc9e4e0001ba9000160016.png);

     }

    </style>

</head>

<body>

    <ul>

        <li>电视</li>

        <li>冰箱</li>

        <li>洗衣机</li>

        <li>空调</li>

    </ul>

</body>

css基础-盒子模型+背景和列表的更多相关文章

  1. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  2. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  3. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  4. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  5. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  6. CSS 弹性盒子模型

    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...

  7. HTML和CSS的盒子模型(Box model)

    本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css ...

  8. css属性 盒子模型

    一.    css属性相关 1.宽和高    1.width可以为元素设置宽度 2. height可以为元素设置高度 3.只有块级标签才可以设置宽度和高度,内联标签并不能设置宽度和高度,及时设置了也不 ...

  9. 前端开发HTML&css入门——盒子模型以及部分CSS样式

    CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...

随机推荐

  1. .net 项目更改默认命名空间

    这个项目是我去年毕业设计做的项目,项目创建的时候由于手抖把Landlordtenant写成了 LandloRdtenant(R大写了),当时不知道如何改回来又担心改完之后报错也就没管了. 今天尝试使用 ...

  2. oracle问题之SYSTEM表空间不足 （二）

    杂症二.SYSTEM表空间不足报错 一.杂症: PLSQL登录,报错: ORA-00604: 递归 SQL 层  出现错误 ORA-01653: 表.无法通过(在表空间中)扩展 ORA-02002: ...

  3. 使用信号管理nginx的父子进程

    master进程 通过CHLD监控worker进程,worker异常退出,通过CHLD信号拉起worker进程. 接收信号 TERM,INT信号表示立刻停止worker进程 QUIT信号表示优雅的停止 ...

  4. Java装箱和拆箱的基本概念及使用

    Java装箱和拆箱的基本概念及使用 要理解装箱和拆箱的概念,就要理解Java数据类型 装箱:把基本类型用它们相应的引用类型包装起来,使其具有对象的性质.int包装成Integer.float包装成Fl ...

  5. FFMPEG结构体分析：AVCodecParameters

    /** * This struct describes the properties of an encoded stream. * * sizeof(AVCodecParameters) is no ...

  6. sql server如何判断数据库是否存在

    如何判断数据库是否存在       执行下列的SQL,获得一张表,根据表的行数来判断. select * from master..sysdatabases where name=N'所查询的数据库名 ...

  7. java4选择结构 二

    public class jh_01_为什么使用switch选择结构 { /* * 韩嫣参加计算机编程大赛 * 如果获得第一名,将参加麻省理工大学组织的1个月夏令营 * 如果获得第二名,将奖励惠普笔记 ...

  8. Entity Framework 实体状态

    从今天开始我们开始讲解EF中的实体状态和数据操作,这篇文章先讲解实体状态. 我们通过前面的学习,知道EF通过上下位负责跟踪实体的状态,实体状态的位置是在命名空间 System.Dat.Entity 里 ...

  9. mapreduce清洗数据

    继上篇 MapReduce清洗数据 package mapreduce; import java.io.IOException; import org.apache.hadoop.conf.Confi ...

  10. Spring Boot从入门到精通（二）配置GitHub并上传Maven项目

    简单介绍一下GitHub,它是一个面向开源及私有软件项目的托管平台,因为只支持git作为唯一的版本库格式进行托管,故名GitHub. GitHub于2008年4月10日正式上线,除了Git代码仓库托管 ...