css基础-盒子模型+背景和列表
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基础-盒子模型+背景和列表的更多相关文章
- 深入理解CSS系列（一）：理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- CSS 弹性盒子模型
CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
- HTML和CSS的盒子模型(Box model)
本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css ...
- css属性 盒子模型
一. css属性相关 1.宽和高 1.width可以为元素设置宽度 2. height可以为元素设置高度 3.只有块级标签才可以设置宽度和高度,内联标签并不能设置宽度和高度,及时设置了也不 ...
- 前端开发HTML&css入门——盒子模型以及部分CSS样式
CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...
随机推荐
- P4语言环境安装（一）前端编译器p4c、后端编译器p4c-bm2-ss
这个P4安装环境是在2020-2-8安装的,安装环境卡了我好几天,把遇到的问题记录下来,有需要的同学可以参考一下,要是说错了或者有问题的话,评论或mail:guidoahead@163.com联系我都 ...
- Kali桥接模式下配置ip
以管理员身份运行虚拟机 打开控制面板-->网络和Internet-->更改适配器 再在虚拟机处桥接到这个WLAN2 点击 编辑-->编辑虚拟网卡 没有网卡就点上图的添加网络作为桥接网 ...
- [Redis-CentOS7]Redis列表操作(三)
LPUSH添加列表 127.0.0.1:6379> LPUSH websites www.baidu.com (integer) 1 LRANGE 获取全部值 127.0.0.1:6379> ...
- 全文检索框架---Lucene
一.什么是全文检索 1.数据分类 我们生活中的数据总体分为两种:结构化数据和非结构化数据. 结构化数据:指具有固定格式或有限长度的数据,如数据库,元数据等. 非结构化数据:指不定长或无固定格式 ...
- win10配置CUDA+Tensorflow2.0的一些经验
目录 问题描述 安装 tensorflow-cpu-2.0 编译 Nvidia Samples 问题描述 网上已经很多关于配置CUDA的文章,自己这篇文章只是个大致的安装步骤,文章重点是安装和配置的一 ...
- 微信小程序仿朋友圈功能开发（发布、点赞、评论等功能）
微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...
- C#基础知识学习（1）方法的重写和隐藏
做了1年多了C#,发现些项目过程中很多基础东西都不是很清晰,基础不够牢固.现在开始复习基础知识并做重点记录 方法需要被重写的时候,可以在方法前加入virtual使方法变成虚方法. 这样我们可以重新写个 ...
- Linux内存管理解析(三) : 内核对内核空间的内存管理
内核采用 struct page 来表示一个物理页,在其中记载了诸多物理页的属性,比如 物理页被几个线程使用(如若没有则表示该页可以释放),页对应的虚拟地址. 首先需要知道的是,分配物理页可以分为两个 ...
- JavaScrip流程控制之switch选择，for循环
swith根据表达式的值来case ,break执行跳转语句 <!DOCTYPE html> <html lang="en"> <head> & ...
- 复制表结构创建分表 再设置自增ID
CREATE TABLE table_name1 LIKE table_name ALTER TABLE test AUTO_INCREMENT=x