盒子模型和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. ...
随机推荐
- 清空kafka全部数据
1.停止机器上的kafka,停止业务系统 docker容器执行命令: docker stop 容器名称 2.删除kafka存储目录(server.properties文件log.dirs配置,默认为& ...
- ORACLE之自治事务
在创建存储过程时,可以用关键字: PRAGMA AUTONOMOUS_TRANSACTION 创建自治事务. 常用场景: 触发器抛错导致事务回滚,日志的记录需要用自治事务进行记录 代码抛错,导致数据库 ...
- postman或浏览器可以访问,java不能访问的post请求,连接超时
代码中用RestTemplate请求url一直是连接超时 可以修改一下jvm配置 -Djava.net.preferIPv4Stack=true
- yii框架中 不能正确正常使用phpredis 路径安装好后还是报 Class yii\redis\Connection does not exist!
1,成功解决方案 在yiisoft / extensions.php 中添加如下数组 指向目录 'yiisoft/yii2-redis' =>array( 'name'=>'yi ...
- 解决uniapp 使用自带 switch 双向绑定视图不更新的问题
使用 this.$set( a, b, c) a:需要更新视图属性对象 b:具体的属性值(就是你要更新视图的属性值) c:传递的参数 this.$set(this.gwjSelet,this.gwj ...
- WPFGroupBox控件自定义
先上效果图 直接上代码(直接在Window.Resources里面添加这段代码) <Style TargetType="GroupBox"> <Setter Pr ...
- Wps调用dll操作Excel表格转PDF
起始原因:wps编辑创建的文档在microsoft office 中打开,会报内容存在异常是否恢复,因此wps文件被微软设定为破损文件,无法对原有文档进行操作运行,故在此使用wps对Excel进行操作 ...
- 当FTP不能满足大文件、海量文件传输时,有没有好的替代方案?
很多企业存在大文件.海量文件的传输需求,如涉及到图像数据采集和回传.海量用户数据收集和同步等业务,一般情况,企业还是会采用传统的FTP传输,或者以此为基础,使用脚本或结合其他办公工具来解决传输需求. ...
- kiaba启动报 FATAL ResponseError: access_control_exception,ES报:java.lang.SecurityException: access denied ("java.io.FilePermission"“文件地址”)
查了许多博客,找的头都大了还是没有发现问题的根源,之前以为是插件包文件名改了之后还是一样,当我差点放弃的时候 一位博主的瞬间把我点醒https://www.cnblogs.com/personblog ...
- Software--电商平台系统--P1 需求分析
2018-01-11 13:58:43 电商平台 需求 1. 网站的页面展示 页面的布局: Product Catalog (商品目录浏览功能): 首页显示"置顶" 商品: ...