盒子模型和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. ...
随机推荐
- linux重置密码和单用户模式
CentOS7.9 CentOS7系统root密码丢失找回方法(史上最好) 1. 重新启动或开启CentOS7系统,在选择进入系统Grub菜单界面如下图1-1,根据提示按"e"小写 ...
- Objectarx2016在VS2012里面创建失败的解决办法
在网上找了很多办法,有说需要管理员权限运行msi的,还有什么ucs的,经过我的尝试,最后找到了办法 解决办法是,在vs2012的根目录下>>vc>>vcprojects> ...
- EasyExcel工具使用
pom文件: <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel< ...
- ubuntu 16.04 Chrome安装
打开终端 输入 命令1:sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/apt/sources.list ...
- 【5】python之基础语法
1.编码格式 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串. 当然你也可以为源码文件指定不同的编码: # -*- coding: cp-1252 ...
- Mysql数据库基础第二章:(八)子查询经典案例
Mysql数据库基础系列 软件下载地址 提取码:7v7u 数据下载地址 提取码:e6p9 mysql数据库基础第一章:(一)数据库基本概念 mysql数据库基础第一章:(二)mysql环境搭建 mys ...
- Python标准库模块之heapq
创建堆 heapq有两种方式创建堆, 一种是使用一个空列表,然后使用heapq.heappush()函数把值加入堆中,另外一种就是使用heap.heapify(list)转换列表成为堆结构 #创建堆方 ...
- ASP.NET Core连接字符串中的特殊字符如何处理?多实例如何连接?
ASP.NET Core连接字符串中的特殊字符,如数据库密码,有时会有特殊字符,如password&1234, 如何直接使用会报连接错误,只需用单引号阔起来即可,如下'password& ...
- Linux 看进程的线程数
pstree -p 12345|wc -l 看进程的线程数 centos7默认并没有安装pstree,所以会有pstree:command not found 安装一下 yum install psm ...
- Nginx 配置https的单向或双向认证
一.自制https认证证书 1. 制作CA证书 A. 生成CA私钥:openssl genrsa -des3 -out ca.key 2048,注意要输入两次密码,若去除密码使用openssl rsa ...