盒子模型和CSS背景和列表
(1)宽度
-width:长度值 | 百分比 | auto
-max-width:长度值 | 百分比 | auto
-min-width:长度值 | 百分比 | auto
(2)高度
-height:长度值 | 百分比 | auto
-max-height:长度值 | 百分比 | auto
-min-height:长度值 | 百分比 | auto
(3)其他可以设置高度和宽度的元素
-块级元素:<p>、<div>、<h1>~<h6>、<ul>、<li>……
-替换元素:<img>、<input>、<textarea>……
(4)边框:border
-边框宽度(border-width)
-边框颜色(border-color)
-边框样式(border-style)
也可以加设左右单边框或者上下
(5)padding内边距
-padding-top:长度值 | 百分比
-padding-right:长度值 | 百分比
-padding-bottom:长度值 | 百分比
-padding-left:长度值 | 百分比
(6)margin外边距
-margin-top:长度值 | 百分比 |auto
-margin-right:长度值 | 百分比 |auto
-margin-bottom:长度值 | 百分比 |auto
-margin-left:长度值 | 百分比 |auto
·垂直方向,两个相邻元素都设置外边距,外边距会发生合并
合并后外边距高度=两个发生合并外边距的高度中最大值
(7)盒子计算
盒子在页面中所占的宽度
是由左边距+左边框+左填充+内容宽度
+右填充+右边框+右边距组成
是由上边距+上边框+上填充+内容高度
+下填充+下边框+下边距组成
(8)display
display属性:
-inline:元素将显示为内联元素,元素前后没有换行符
-block:元素将显示为块级元素,元素前后会带有换行符
-inline-block:行内块元素,元素呈现为inline,具有block相应特性
-none:此元素不会被显示
CSS背景和列表
1.背景样式
·background-color:设置元素的背景颜色
·background-image:把图像设置为背景
说明:
-url地址可以是相对地址也可以是绝对地址
-元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距
-默认的,背景图像位于元素的左上角,并在说和垂直方向上重复。
(1)背景图片重复:background-repeat
background-repeat:repeat | no-repeat | repeat-x | repeat-y
·background-position:设置图像的起始位置
·background-attachment:背景图像是否固定或随着页面的其余部分滚动
-background-attachment:scroll | fixed
scorll:默认值,背景图片随滚动条而滚动
fixed:当页面的其余部分滚动时,背景图片不会移动
·background-repeat:设置背景图像是否重复计及如何重复
·background:简单属性,作业是将背景属性设置在一个声明中
2.列表样式
·list-style-type:设置列表项标志的类型
none | 关键词
·list-style-image:将图像设置为列表项标志
URL | none
·list-style-position:设置列表中列表项标志的位置
-inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐
-outside:默认值,列表项目标记放置在文本以外,且环绕文本不根据标记对齐
·list-style:简写属性。用于 把所有列表的属性设置于一个声明中
盒子模型和CSS背景和列表的更多相关文章
- 标准W3C盒子模型和IE盒子模型
标准W3C盒子模型和IE盒子模型 CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(co ...
- 15 , CSS 背景与列表
1.CSS 中背景的使用 2.CSS 中列表的使用 15.1 CSS 中背景的使用 属性名称 属性值 说明 background-attachment scroll 设置背景图像会随视窗滚动 条的移动 ...
- CSS盒子模型和IE浏览器
CSS盒模型图解 下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示. 在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding ...
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
- CSS中盒子模型和position(一)
今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自 ...
- 关于css盒子模型和BFC的理解
CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...
- CSS背景与列表
CSS中背景的使用 CSS中列表的使用 15.1 CSS中背景的使用 属性名称 属性值 ...
- 标准盒子模型和IE盒子模型
标准盒子模型 = margin + border + padding + content (content = width | height) IE盒子模型 = margin + content ( ...
- IE盒子模型和W3C盒子模型
IE盒模型出现在ie5.5以下的版本当中,ie6以上就实行W3C盒模型. box-sizing有两个属性,border-box和content-box. border-box对应传统的盒子模型,即ie ...
- w3C盒子模型和IE的盒子模型
W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分IE 盒子模型的范围也包括 margin.border.padding. ...
随机推荐
- 关于邮箱怎么验证是不是真实的企业邮箱(java汉字和英文呼唤)
企业邮箱的域名一般都是zhangsan@公司域名,或者zhang_san@公司域名这种形式.这里我只列举zhangsan@公司域名这种形式. 公司要我做一个企业邮箱的模糊匹配和验证,刚接到以为很难.结 ...
- C与C++字符串比较
#include<iostream> #include<string> using namespace std; int main() { char a[] = "a ...
- 必备技能,MySQL 查找并删除重复行
本文讲述如何查找数据库里重复的行.这是初学者十分普遍遇到的问题.方法也很简单.这个问题还可以有其他演变,例如,如何查找"两字段重复的行"(#mysql IRC 频道问到的问题) 如 ...
- centos7.9重启后,主机名会变为IP地址
现象: centos7.9重启后,主机名会变为IP地址 当关闭DHCP功能,则主机名修改生效,否则重启后,主机名依旧变为图示的IP地址 解决方法:经过排查,由 /etc/sysconfig/netwo ...
- 多线程学习(第一天)java语言的线程
一.并发与并行 并发:处理器不停的切换有操作的线程. 并行:多个处理器同时执行有操作线程. 二.启动线程 无论是A,B哪种方式实现多线程,都需要通过Thread.start方法启动线程. A.Thre ...
- 解决从PLSQL导出到CSV文件的时候提示 is not a valid date and time的问题
操作下面步骤的时候,报出[XXXXXis not a valid date and time]的错误 问题原因:以前嫌弃任务栏右下角的时间显示格式不好,手动手改了一下,导致Oracle的日期格式与现在 ...
- Python 面试题整理
一.语言特性 1.什么是Python?使用Python有什么好处?Python和其他语言的区别? Python是一种编程语言,它有对象,模块,线程,异常处理和自动内存管理. 好处:开源.简洁.简单.方 ...
- C++ primer笔记 -标准库类型
最重要的两个标准库类型:string和vector string 类型的输入操作符: 1.读取并忽略开头所有的空白符 2.读取字符直至再次遇到空白字符,读取终止 string对象的基本操作: stri ...
- .net ef 链接 mysql
https://blog.csdn.net/weixin_30394975/article/details/114168133
- APP数据指标体系分析
一.APP的数据指标体系主要分为五个维度,包括用户规模与质量.参与度分析.渠道分析.功能分析和用户属性分析. 1.用户规模和质量 用户规模和质量是APP分析最重要的维度,其指标也是相对其他维度最多,数 ...