盒子模型和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. ...
随机推荐
- 手机安装python环境
一.安装Termux环境 1.下载Termux Qpython 安装以后玩爬虫各种报错,也就不纠结了,直接弄Termux 虚拟环境 下载链接:https://wiki.termux.com/wiki/ ...
- mysql在windows下安装
参考博客:https://blog.csdn.net/weixin_43423484/article/details/124408565
- 【Python】语言的控制流程
二.Python语言的控制流程 1.程序的组织结构 1.1 顺序结构:从上到下顺序的执行代码,直到程序结束,没有任何判断和跳转 1.2 选择结构:根据判断条件的布尔值选择性的执行部分代码:if语句 1 ...
- RayLink测评 | 完全免费,功能超越同类付费远程控制软件!!
*本文转载自自媒体[下1个好软件],作者:锋哥. 远程控制软件目前的需求非常大,因为某些原因,你可能得居家办公远程控制公司的电脑,又或者出差不再需要带笨重的笔记本办公,一台平板电脑远程就搞定等等. 但 ...
- svn 报 is not a working copy 错误
当时提交代码 svn 报 is not a working copy ,上网查找问题 要我重新拉代码下来 然后放进修改的代码重新提交,我觉得很不合理,我看了下我提交的代码文件有80多个,我在想是否 ...
- 1140. 石子游戏 II (Medium)
问题描述 1140. 石子游戏 II (Medium) 爱丽丝和鲍勃继续他们的石子游戏.许多堆石子 排成一行,每堆都有正整数颗石子 piles[i].游戏以谁手中的石子最多来决出胜负. 爱丽丝和鲍勃轮 ...
- vue 切换json语言包
1.在asstes文件夹新建 2.在main.js读取本地json语言包 3.在vue页面t这样引用
- 记一次在MyBatis-Plus中 @TableField 自动填充中遇见的坑
先放一张表生成策略对应的结果 值 描述 DEFAULT 默认不处理 INSERT 插入时填充字段 UPDATE 更新时填充字段 INSERT_UPDATE 插入和更新时填充字段 此处需要注意一下,如果 ...
- 几个一看就会的实用JavaScript优雅小技巧
️ 前言 这次我就给大家分享一些一看就会的实用JavaScript优雅小技巧. 「难度:」 「推荐阅读时长:5min」 正片 减少if...else面条代码 一旦当我们写到超过两个if...else的 ...
- pgsql给表字段设置默认值及设置主键
ALTER TABLE pavement_damage_dtl_temp add PRIMARY key(id); ALTER table pavement_damage_dtl_temp alter ...