css样式 向下补白,CSS尺寸与补白
尺寸与补白
width
语法:
width:长度值 | 百分比 | auto
默认值:auto
适用于:除非置换内联元素,table-row, table-row-group之外的所有元素
继承性:无
动画性:当值为 长度值 | 百分比 时
计算值:指定的值
媒 体:视觉
取值:
auto: 无特定宽度值,取决于其它属性值
长度值: 用长度值来定义宽度。不允许负值
百分比: 用百分比来定义宽度。百分比参照包含块宽度。不允许负值
说明:
定义元素的宽度。
对于img元素来说,若仅指定此属性,其height值将会根据图片源尺寸进行等比例缩放。
width属性是盒模型的重要组成部分。
对应的脚本特性为:width。
min-width
语法:
min-width:长度值 | 百分比
默认值:0
适用于:除非置换内联元素,table-row, table-row-group之外的所有元素
继承性:无
动画性:当值为 长度值 | 百分比 时
计算值:指定的值
媒 体:视觉
取值:
长度值: 用长度值来定义最小宽度。不允许负值
百分比: 用百分比来定义最小宽度。不允许负值
说明:
定义元素的最小宽度。
当min-width属性的值小于width时,min-width属性将会被忽略。
当min-width属性的值大于width时,min-width属性将会被忽略,同时width会忽略自己的值定义而使用min-width的值作为自己的使用值。
当min-width属性的值大于max-width时,max-width属性将会被忽略。
对应的脚本特性为:minWidth。
max-width
语法:
max-width:长度值 | 百分比 | none
默认值:none
适用于:除非置换内联元素,table-row, table-row-group之外的所有元素
继承性:无
动画性:当值为 长度值 | 百分比 时
计算值:指定的值
媒 体:视觉
取值:
none: 无最大宽度限制
长度值: 用长度值来定义最大宽度。不允许负值
百分比: 用百分比来定义最大宽度。不允许负值
说明:
定义元素的最大宽度。
当max-width属性的值小于width时,max-width属性将会被忽略,同时width会忽略自己的值定义而使用max-width的值作为自己的使用值。
当max-width属性的值大于width时,max-width属性将会被忽略。
当max-width属性的值小于min-width时,max-width属性将会被忽略。
对应的脚本特性为:maxWidth。
height
语法:
height:长度值 | 百分比 | auto
默认值:auto
适用于:除非置换内联元素,table-row, table-row-group之外的所有元素
继承性:无
动画性:当值为 长度值 | 百分比 时
计算值:指定的值
媒 体:视觉
取值:
auto: 无特定高度值,取决于其它属性值
长度值: 用长度值来定义高度。不允许负值
百分比: 用百分比来定义高度。不允许负值
说明:
定义了元素内容区(Content Area)的高度
对于img元素来说,若仅指定此属性,其width值将会根据图片源尺寸进行等比例缩放。
width属性是盒模型的重要组成部分。
对应的脚本特性为:height。
min-height
语法:
min-height:长度值 | 百分比
默认值:0
适用于:除非置换内联元素,table-row, table-row-group之外的所有元素
继承性:无
动画性:当值为 长度值 | 百分比 时
计算值:指定的值
媒 体:视觉
取值:
长度值: 用长度值来定义最小高度。不允许负值
百分比: 用百分比来定义最小高度。不允许负值
说明:
定义元素的最小高度。
当min-height属性的值小于height时,min-height属性将会被忽略。
当min-height属性的值大于height时,min-height属性将会被忽略,同时height会忽略自己的值定义而使用min-height的值作为自己的使用值。
当min-height属性的值大于max-height时,max-height属性将会被忽略。
对应的脚本特性为:minHeight。
max-height
语法:
max-height:长度值 | 百分比 | none
默认值:none
适用于:除非置换内联元素,table-row, table-row-group之外的所有元素
继承性:无
动画性:当值为 长度值 | 百分比 时
计算值:指定的值
媒 体:视觉
取值:
none: 无最小高度限制
长度值: 用长度值来定义最大高度。不允许负值
百分比: 用百分比来定义最大高度。不允许负值
说明:
定义元素的最大高度。
当max-height属性的值小于height时,max-height属性将会被忽略,同时height会忽略自己的值定义而使用max-height的值作为自己的使用值。
当max-height属性的值大于height时,max-height属性将会被忽略。
当max-height属性的值小于min-height时,max-height属性将会被忽略。
对应的脚本特性为:maxHeight。
margin
简写属性语法:
margin:[ 长度值 | 百分比 | auto ]{1,4}
默认值:看每个独立属性
适用于:所有元素,除非 table | inline-table | table-caption的表格类元素之外
继承性:无
动画性:看每个独立属性
计算值:看每个独立属性
媒 体:视觉
分拆纵向独立属性语法:
vertical-margin:长度值 | 百分比 | auto
vertical-margin = margin-top,margin-bottom
默认值:0
适用于:所有元素,除非 table | inline-table | table-caption的表格类元素和非替代行内元素之外
继承性:无
动画性:当取值为 长度值 | 百分比 时
计算值:指定的百分比或绝对长度值
媒 体:视觉
分拆横向独立属性语法:
horizontal-margin:长度值 | 百分比 | auto
horizontal-margin = margin-right,margin-left
默认值:0
适用于:所有元素,除非 table | inline-table | table-caption的表格类元素之外
继承性:无
动画性:当取值为 长度值 | 百分比 时
计算值:指定的百分比或绝对长度值
媒 体:视觉
取值:
auto: 水平(默认)书写模式下,vertical-margin计算值为0,horizontal-margin取决于包含块的剩余可用空间。
长度值: 用长度值来定义外补白。可以为负值
百分比: 用百分比来定义外补白。水平(默认)书写模式下,参照其包含块的width进行计算,其它情况参照height,可以为负值
说明:
简写属性。为元素设置所有四个方向(上右下左)的外边距。
margin属性接受1~4个参数值。如果提供四个参数值,将按上、右、下、左的顺序作用于四边;提供三个,第一个用于上,第二个用于左、右,第三个用于下;提供两个,第一个用于上、下,第二个用于左、右;只提供一个,同时用于四边。
非替代(non-replaced)行内元素可以使用该属性定义horizontal-margin;若要定义vertical-margin,必须改变元素为块级或行内块级。
外延边距始终透明,即不可见也无法设置背景等任何样式。
某些相邻的margin会发生合并,我们称之为margin折叠:
h2{margin:10px 0;}
div{margin:20px 0;}
......
这是一个标题
这是又一个标题
本例中,第1个h2的margin-bottom,div的margin-top,第2个h2的margin-top是相邻的,三者会被合并取其中最大的那个值作为最后的间隙,所以它们之间的margin间隙最后是(20px)。
如果给上例中的div加上border的话:
h2{margin:10px 0;}
div{margin:20px 0;border:1px solid #aaa;}
......
这是一个标题
这是又一个标题
本例中,第一个h2的margin-bottom(10px),div的margin-top(20px)将被合并,但第二个h2的margin-top不与它们合并,因为它被border分隔,不与它们相邻。
margin折叠常规认知:
margin折叠只发生在块级元素上;
浮动元素的margin不与任何margin发生折叠;
设置了属性overflow且值为非visible的块级元素,将不与它的子元素发生margin折叠;
绝对定位元素的margin不与任何margin发生折叠;
根元素的margin不与其它任何margin发生折叠;
对应的脚本特性为:margin。
分拆纵向独立属性。为元素设置上、下外边距。
替代(Replaced)行内元素可以应用该属性;非替代(non-Replaced)行内元素要使用该属性必须改变元素为块级或行内块级。
水平(默认)书写模式下,margin 合并只发生在vertical-margin上。
对应的脚本特性分别为:marginTop, marginBottom。
分拆横向独立属性。为元素设置上、下外边距。
所有的行内元素均可以应用该属性。
默认情况下,horizontal-margin不会发生 margin 折叠,除非将书写模式改变为纵向。
对应的脚本特性分别为:marginRight, marginLeft。
padding
简写属性语法:
padding:[ 长度值 | 百分比 ]{1,4}
默认值:看每个独立属性
适用于:所有元素,除table-row-group | table-header-group | table-footer-group | table-column-group | table-row外
继承性:无
动画性:看每个独立属性
计算值:看每个独立属性
媒 体:视觉
分拆独立属性语法:
padding-*:长度值 | 百分比
padding-* = padding-top,padding-right,padding-bottom,padding-left
默认值:0
适用于:所有元素,除table-row-group | table-header-group | table-footer-group | table-column-group | table-row外
继承性:无
动画性:是
计算值:指定的百分比或绝对长度值
媒 体:视觉
取值:
长度值: 用长度值来定义内补白。不允许负值
百分比: 用百分比来定义内补白。水平(默认)书写模式下,参照其包含块的width进行计算,其它情况参照height,不允许负值
说明:
简写属性。为元素设置所有四个方向(上右下左)的内边距。
padding属性接受1~4个参数值。如果提供四个参数值,将按上、右、下、左的顺序作用于四边;提供三个,第一个用于上,第二个用于左、右,第三个用于下;提供两个,第一个用于上、下,第二个用于左、右;只提供一个,同时用于四边。
需要注意的是,当我们为行内元素定义纵向内补白(padding-top/padding-bottom)时,虽然不需要将之转化为行内块或者块级,但是给行内元素设置纵向内补白并不会影响布局。内补白会在当前元素的行框基础上向顶部和顶部外延,但是这些外延不会拓展新的布局大小(你甚至可以把它想象成类似outline)。
对应的脚本特性为:padding。
分拆独立属性。为元素单独设置上、右、下、左4个方向的内边距。
对应的脚本特性分别为:paddingTop, paddingRight, paddingBottom, paddingLeft。
来源:https://www.cnblogs.com/lx-pricking/p/13199983.html
css样式 向下补白,CSS尺寸与补白相关推荐
- dw在html中删除css样式表,DW里CSS的详细介绍
单击"确定". 类 型 属 性 [定义 CSS 类型属性]使用"CSS 样式定义"对话框中的"类型"类别能够定义 CSS 样式的基本字体和类 ...
- dw怎么让html使用css样式,dw怎么用css样式?
dw怎么用css样式? 首先介绍一下CSS样式的属性: CSS样式属性被分为八大类:类型,背景,区块,方框,边框,列表,定位,扩展. 类型主要定义文本的字体,大小,颜色,行高和修饰等.如图所示: 方法 ...
- 用CSS样式下载器 下载CSS里面的图片路径配对问题
2019独角兽企业重金招聘Python工程师标准>>> 用CSS样式下载器 下载CSS里面的图片路径配对问题 路径如下图: 这时候在CSS样式下载器选择[相对路径加网址前缀]然后在输 ...
- css样式 向下补白,DIVCSSpadding内补白(内边距)leftrighttopbottom_html/css_WEB-ITnose
DIV CSS padding内补白(内边距)left right top bottom语法应用案例教程 Padding是比较常用CSS样式,可以利用padding内边距设置上.下.左.右对象内容与四 ...
- css样式lighter的意思,css常用的属性
CSS------属性值篇 display: none | block | inline(默认值) | inline-block(css2新增) | inherit none :此元素不会再显示 {注 ...
- Day03_css选择器、css样式大全、引入css样式表、常用标签属性、形变和动画
03.01_css选择器-属性选择器 针对中写明了某些属性的标签进行设置 选择器[属性名]{属性名称1:值1:属性名称2:值2:....}选择器[属性名="属性值"]{属性名称1: ...
- html css样式div属性,div css
DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是 ...
- 网页css样式中英对照,css中文样式(含中英文对照表).doc
css中文样式(含中英文对照表) CSS学习网站: /css/css_reference.asp / /thread-265-1-1.html 1.[类型]主要针对网页中的文本 [背景]是在网页的元素 ...
- bootstrap起步 全局css样式概览 全局css样式_栅格 全局css样式_排版
http://www.bootcss.com/基本模板 https://v3.bootcss.com/getting-started/#template bootstrap起步 <!DOCTYP ...
最新文章
- 小知识六、CALayer动画
- python字符串与文本处理技巧(3):字符剔除、字符对齐、字符拼接、字符插入变量
- 分析师分析业务维度,(个人制作分析思维导图Xmind)
- php语法中可以输出调试信息,怎么优雅的输出PHP调试信息
- yarn-cli 缓存(转)
- 谷粒商城高级篇爬坑笔记--错误异常信息乱码问题
- 2015蓝桥杯C++A:方程整数解;星系炸弹(3种解法)
- 汇编语言软件延时1s
- 如何在使用 Spotify 时更好地保护您的隐私?
- 大学生创新创业计划-2020
- 计算机创新发展战略,计算机行业投资机会报告:智能汽车创新发展战略发布
- (己解决)黑苹果驱动英特尔核显疑问记录
- 进程间通讯的四种方式
- html如何修改title前的小图标
- 彻底解决Chrome自动更新方案
- 基于jmeter+perfmon的稳定性测试记录
- 【考试记录】阿里云DevOps助理工程师(ACA)
- 加班的程序员:996 没有未来
- Simulation?Emulation?模拟?仿真?
- win系统在虚拟机中启动黑屏的处理办法