盒子模型
(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背景和列表的更多相关文章

  1. 标准W3C盒子模型和IE盒子模型

    标准W3C盒子模型和IE盒子模型   CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(co ...

  2. 15 , CSS 背景与列表

    1.CSS 中背景的使用 2.CSS 中列表的使用 15.1 CSS 中背景的使用 属性名称 属性值 说明 background-attachment scroll 设置背景图像会随视窗滚动 条的移动 ...

  3. CSS盒子模型和IE浏览器

    CSS盒模型图解 下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示. 在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding ...

  4. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

  5. CSS中盒子模型和position(一)

    今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自 ...

  6. 关于css盒子模型和BFC的理解

    CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...

  7. CSS背景与列表

    CSS中背景的使用 CSS中列表的使用 15.1 CSS中背景的使用         属性名称                             属性值                      ...

  8. 标准盒子模型和IE盒子模型

    标准盒子模型 = margin + border + padding + content (content =  width | height) IE盒子模型 = margin + content ( ...

  9. IE盒子模型和W3C盒子模型

    IE盒模型出现在ie5.5以下的版本当中,ie6以上就实行W3C盒模型. box-sizing有两个属性,border-box和content-box. border-box对应传统的盒子模型,即ie ...

  10. w3C盒子模型和IE的盒子模型

    W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分IE 盒子模型的范围也包括 margin.border.padding. ...

随机推荐

  1. 取得SAP服务器主机名(host name)和端口号(port)函数[TH_GET_VIRT_HOST_DATA]

    本文转载至:http://www.baidusap.com/abap/function/4245 是要Vcode开发abap的时候,连接服务器的时候需要端口号,可以用函数TH_GET_VIRT_HOS ...

  2. 如何把高德地图搜索结果导出成excel里?

    前段时间,根据朋友的要求,开发了百度地图里的商家采集工具. 最近,又开发了腾讯地图里的商家采集工具. 来了兴致,干脆把高德地图的采集工具也一并搞定!:) 原理应该差不多,我就查阅了下高德地图的采集规则 ...

  3. postman或浏览器可以访问,java不能访问的post请求,连接超时

    代码中用RestTemplate请求url一直是连接超时 可以修改一下jvm配置 -Djava.net.preferIPv4Stack=true

  4. c#怎样删除指定文件名的文件

    我有一个文件夹,里面有6个文件,我现在要删除字母B开头的三个文件,只需要剩下A开头的文件即可用C#怎样操作??? foreach (string d in Directory.GetFileSyste ...

  5. 谈谈 Redis 的过期策略

    在日常开发中,我们使用 Redis 存储 key 时通常会设置一个过期时间,但是 Redis 是怎么删除过期的 key,而且 Redis 是单线程的,删除 key 会不会造成阻塞.要搞清楚这些,就要了 ...

  6. 怎么在Windows系统中制作Mac系统U盘启动盘?

    想要在Windows系统的电脑中制作Mac系统的U盘启动盘 操作方法: 请预先安装好TransMac并输入注册码) 插入U盘或其它存储介质: 以管理员身份运行TransMac: 在左侧的设备列表中右键 ...

  7. 循环4-for循环

    一.语法 for循环和while类似,常用于执行有限次数的循环,有两种语法结构, 1.变量列表循环 语法: for 变量名 in 变量取值列表 do 指令...... done 变量取值列表中的值,要 ...

  8. 使用Dapr和Tye启动服务

    自 2019 年开源以来,Dapr(Distributed Application runtime )已迅速成为非常流行的构建微服务的开源框架.它提供了分布式应用程序中常用的构建块和已打包的服务,例如 ...

  9. flutter TextField 使用prefixIcon图标和文字间距问题

    可以看到使用prefixIcon图标就出现间距问题.网上看了很多文章,好像是没有什么好的解决办法,也有可能是太简单了,别人懒的发(哭笑). 我把我知道的方法写出来吧 decoration: Input ...

  10. idea常用快捷键记录

    实用编写代码辅助快捷键 Ctrl+Alt+V 提出选中内容为局部变量 Ctrl+Backspace 按单词删除 Ctrl+D 复制行 Ctrl+Y 删除当前行 Ctr+Shift+U 大小写转化 Sh ...