盒子模型和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. ...
随机推荐
- 国际版Office365客户端配置
Email Provider IMAP Settings POP Settings SMTP Settings Microsoft 365 Outlook Hotmail Live.com Serve ...
- abap screen页签开发注意事项
问题描述:我比较懒,开发程序的时候所有的页签都是直接公用主程序的按钮功能,这就导致,当我按了按钮之后,SY-UCOMM里保存的是我自建按钮的code, 如果不进行页签跳转,或者按其他按钮的话,直接按下 ...
- python logger 按时间段滚动
import logging import logging, logging.handlers import time logging.getLogger().setLevel(logging.DEB ...
- composer更新报错
在用composer安装Yii2的扩展插件时,报错: [UnexpectedValueException] Could not parse version constraint <=2.*: I ...
- 【快速学】C/C++编译器
编译器 谁维护 平台 版权 Visual C++ Microsoft https://visualstudio.microsoft.com/ Microsoft Windows 有免费版 GCC C ...
- css初始化、background属性、jquery选择器模糊匹配、canvas
1.css初始化 2.background 3.jquery选择器模糊匹配 4.canvas画多边形 5.通过css设置canvas背景图片 6.js动态生成变量名
- 03 Spark RDD编程基础
1. 准备文本文件从文件创建RDD lines=sc.textFile()筛选出含某个单词的行 lines.filter() 2. 生成单词的列表从列表创建RDD words=sc.paralleli ...
- linux创建数据库以及数据库用户密码
登录linux服务器成功后: 登录mysql: mysql -uroot -p 输入密码:xxxx 创建数据库: create database test 创建用户及密码: create user ' ...
- code的用法
今天写程序的时候用了const,想到之前遇到的code的用法,那是第一次遇到code的那样的用法,查了一下,解释如下: 在单片机使用C语言进行编程的时候,经常使用到code.code是keil C51 ...
- 2022.3.9内部群每日三题-清辉PMP
1.项目经理集合在地理上分散的团队,为一家组织实施新的强制性监管要求.若要获得该相关方的承诺,项目经理应该怎么做? A.设置必要的沟通基础设施 B.召开项目启动大会 C.执行相关方分析 D.让团队集中 ...