5.1 id选择器 id选择器使用#引入,它引用的是id属性中的值。 ? ? 5.2 类选择器 类选择器使用时,需要在类名前加一个点号(.) 项目中,绝大部都是用类选择器排版。 ?...【left,center,right】 background-repeat:定义背景图片是否及如何重复 ?...top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量 right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移 left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移 bottom...: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。...border-color:简写属性,定义元素边框中可见部分的颜色,或为四个边分别设置颜色。 border-style:用于定义所有边框的样式,或者单独为各边设置边框样式。
类选择器(重点),允许被任何一个元素的 class 属性进行引用的选择器 语法: .类名{样式声明;} ,引用:类名"> 注意:类名允许包含字母,数字、-、 _ 、,不允许以数字开头...多类选择器,多类选择器的引用方式,允许一个元素同时引用多个选择器 语法: (5)....27. text-shadow 文本阴影 语法:text-shadow: h-shadow v-shadow blur color ①. h-shadow 阴影水平的偏移距离,正值向右偏移,负值向左偏移.... border-collapse 边框合并 语法:border-collapse:value ①. separate 默认值 ②. collapse 合并 37. border-spacing 边框边距...在 td 中,设置文本的垂直对齐方式 ②. 设置行内块元素两边文本的垂直对齐方式 ③.
相关概念 内容区(content) 用于显示文本和图像 内边距(padding) 内容区至边框的边距 边框(border) 内容区的边界 外边距(margin) 两个元素的边距之间的距离...盒子的大小 默认情况下,一个盒子的大小刚好容纳其中的内容(文本、图片等),并根据其中内容的变化而变化。...border-image-source 用于声明元素的边框图片(border-image)的资源 border-image-slice 引用边框图片后,**border-image-slice**属性会将图片分割为...在最终的边框图像中重复,缩放或修改它们以匹配元素的尺寸。 区域 9 为中心区域。它在默认情况下会被丢弃,但如果设置了关键字fill,则会将其用作背景图像。...盒子模型的类型 块级元素 可以设置宽高 内联元素 水平方向的内边距有效的 - 控制文本内容在水平方向的位置 垂直方向的内边距有效的 - 文本内容的位置没有变化,内边距向上和向下进行扩展 垂直方向的外边距无效的
拓展知识点 margin属性: 行内元素是没有上下外边距的,只有左右外边距,所以尽量不要设置行内元素的内外上下边距,设计宽高也是无效的 两个相邻的块级元素一个设置了margin-bottom、另一个设置...嵌套块元素垂直边距合并,当父级元素没有设置border、padding的情况下,父子元素的margin边距会合并,其取值为较大值 css3的新特性 答案解析 常用css3新特性:动画属性animation...可以用来解决子元素浮动,父元素的高度没有了、两栏布局右栏不自适应、垂直方向上两元素边距有误等情况。...box-shadow属性详解 box-shadow:offset-x offset-y blur spread color position //从左到右表示:x轴偏移量、y轴偏移量、阴影的模糊半径...文本系列属性 text-indent:文本缩进 text-align:文本水平对齐 line-height:行高 元素可见性 visibility:控制元素的显示隐藏 列表布局属性 list-style
类选择器 要求: html中的标签有class属性,并且有值.例如 css中使用.引入,它引用的是class属性中的值.例如 .yy1{...}...通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。...top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量 right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移 left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移...bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。...引用类型 引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。从传统意义上来说,ECMAScript 并不真正具有类。
-- 对应以上样式 --> 2、类选择器 通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。...,也叫内边距,如padding:20px;padding是同时设置4个边的,也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom...margin 设置元素和外界的距离,也叫外边距,如margin:20px;margin是同时设置4个边的,也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right...*/ padding:20px 40px; /* 设置上下内边距为20px,左右内边距为40px*/ padding:20px; /* 设置四边内边距为20px */ 设置外间距margin ...定位元素的偏移 定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜 id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。...1、边偏移 边偏移属性 描述 top 顶端偏移量,定义元素相对于其父元素上边线的距离 bottom 底部偏移量,定义元素相对于其父元素下边线的距离 left 左侧偏移量,定义元素相对于其父元素左边线的距离...在静态定位状态下,无法通过边偏移属性(top、bottom、left或right)来改变元素的位置。 PS: 静态定位其实没啥可说的。...对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍然保留。...如下图所示,即是一个相对定位的效果展示: 注意: 相对定位最重要的一点是,它可以通过边偏移移动位置,但是原来的所占的位置,继续占有。
很多人喜欢这个属性,如果你正在建立一个网格系统,或任何其他需要水平对齐类型的布局项目,这可以是更直观的工作方式。 边距重叠 当边距意外重叠当时候,真的令人很困惑,因为你不知道发生了什么。...当两个或多个相邻的垂直边距接触时,边距有时会发生重叠,并且不会用填充或边框分隔。如果子元素的边缘扩展到父元素的边缘,并且不会被填充分隔开,那么就会出现边距重叠的现象。...如果元素采用的是绝对定位、浮动定位或者有一个不一样的 格式化上下文时,边距不会发生重叠现象,以及在其他一些不太可能的情况下。 如果你感到困惑,没关系。边距不会发生重叠的规则是复杂的。...您需要知道的主要事情是当元素没有填充或边框时,垂直边距可能会重叠。 如果你想了解的更详细, CSS Tricks 有一篇很好的 边距重叠释义的文章推荐你看一下。...具有重叠偏移的定位元素可以导致元素占用相同空间而发生重叠问题。堆叠上下文可以解决这个问题。 层叠上下文 堆叠上下文决定事物呈现到页面的顺序。 你可以想象一个堆叠上下文,如图层。
每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。...外边距重叠 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距,其大小为单个边距的最大值(或如果它们相等,则仅为其中一个),这种行为称为边距折叠。..."; display: table; } 当上下同时取外边距的时候取上下两者的最大值 ---- padding padding CSS 简写属性控制元素所有四条边的内边距区域。...static 定位祖先元素的偏移,来确定元素位置。...绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
,默认以'html'即额外的DOM节点展示tooltip;此外还可以设置为'richText'表示以富文本的形式渲染,渲染的结果在图表对应的Canvas中(目前SVG尚未支持富文本),这对于一些没有DOM...当图表外层的dom被设置为'overflow:hidden',或者移动端窄屏,导致tooltip超出外界被截断时,此配置比较有用 appendToBody: false,...)指定 tooltip 的 DOM 节点的 CSS 类。..., // 提示框浮层内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距...// 文本显示高度 textBorderColor: '#333', // 文字本身的描边颜色 textBorderWidth: 2
SnapKit简介 SnapKit是一个优秀的第三方自适应布局库,它可以让iOS、OS X应用更简单地实现自动布局(Auto Layout) 下载链接 SnapKit SnapKit配置 使用pods方式引入类库....offset(50)的两级组合,显示找到父view的左边位置,再向右(X轴)移动50点 给控件添加、更新约束、引用约束、停用、启用 添加新的约束 testView.snp.makeConstraints...,声明一个局部变量或者类属性来引用要修改的约束 var topConstraint: Constraint?...dividedBy() 设置属性除以因子后的值 设置控件布局属性 布局属性 说明 尺寸 width、height、size 边距 left、top、right、bottom、leading、trailing...insets) MASEdgeInsets 控件四边相对于参照物偏移多少 offset示例 testView.snp.makeConstraints { (make) in make.left.equalToSuperview
2widthwidth规定元素内容区的宽度。1 边距 元素描述版本marginmargin规定元素中四个方向的外边距属性。1margin-bottom设置元素的下外边距。...1paddingpadding规定元素的内边距,该属性不可为负值,其简写形式可一次性设置四个边的内边距。1padding-bottom设置元素的下内边距。1padding-left设置元素的左内边距。...1padding-right设置元素的右内边距。1padding-top设置元素的上内边距。1 定位 元素描述版本bottom设置定位元素下外边距边界与其包含块下边界之间的偏移。...2top设置定位元素的上外边距边界与其包含块上边界之间的偏移。2vertical-align设置元素的垂直对齐方式。...单个值,设置所有的边框;两个值,分别设置水平和垂直的边距。
定义由细到粗的字体400等于normal,700等于bold 3.3 文本样式 属性 说明 color 文本颜色 text-align 元素水平对其方式 text-indent 首行文本的缩进 line-heighr...文本的行高 text-decoration 文本的装饰 3.3.1 color RGB RGBA 3.3.2 text-align 元素水平对其方式 值 说明 left 把文本排列到左边 right...posotion:渐变方向(可以时任意角度,向上的0deg) 4、盒子模型 4.1 盒子模型元素 元素 说明 margin 外边距 border 边框 padding 内边距 height 高 width...4.3 内外边框 4.3.1 margin 外边距 margin-top margin-right margin-bottom margin-left 4.3.2 外边距妙用 外边距妙用,网页居中对齐...--清除这个元素两边的浮动--> } 6、定位 posotion属性 6.1 relative 相对定位 相对自身原来位置进行偏移,偏移设置:top、left、right、bottom; 相对定位的规律
FractionalOffset中的Size偏移量,用于表示TextDirection.ltr文本中的左侧偏移量和TextDirection.rtl文本中的右侧偏移量,而无需了解当前的文本方向。 ?...EdgeInsets.all() 如果需要在所有方向增加边距 Center( child: Container( color: Color.fromARGB(255, 66, 165, 245...EdgeInsets.symmetric() 如果您需要添加具有对称垂直和/或水平偏移的边距 Center( child: Container( color: Color.fromARGB(...EdgeInsets.fromLTRB() 如果需要从左侧,顶部,右侧和底部的偏移量增加边距。...EdgeInsets.only() 如果您需要添加给定方向的边距。
框架:方便在页面中引用站外的页面内容。 的标识名" src="引用的页面地址"> 23....如果将元素的margin设为负值,则元素会变大。 (块元素可以把左右页边距设置为”自动”中心对齐。...subject=主题名称 &body=邮件内容"> 的文本">链接显示的文本 超链接伪类 a:link 访问前 a:visited 访问后...边距宽度"> 文本状态"> 表格可以添加标题和摘要标签进行优化...引用、及标签定义: 缩写 地址联系信息 文字方向(设置dir=”rtl”为从右到左显示) 长文本引用(不会自带双引号,但会两边自动缩进
作用 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。...优点: 代码简洁 缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。...+ 边偏移在 CSS 中,通过 top、bottom、left 和 right 属性定义元素的「边偏移」:(方位名词) 边偏移属性 示例 描述 top top: 80px 「顶端」偏移量,定义元素相对于其父元素...固定定位(fixed)」 固定定位是绝对定位的一种特殊形式; 完全脱标–完全不占位置; 只认浏览器的可视窗口–浏览器可视窗口+边偏移属性来设置元素的位置 跟父元素没有任何关系;单独使用 不随滚动条滚动...绝对定位absolute 完全脱标,不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用 固定定位fixed 完全脱标,不占有位置 相对于浏览器移动位置 能 单独使用,不需要父级 注意: 边偏移
background-repeat 设置背景图片的重复方式 repeat 全部重复 repeat-x 横向重复 repeat-y 纵向重复 no-repeat 不重复 background-attachment...规定文本的垂直对齐方式 text-decoration 规定添加到文本的装饰效果 text-indent 规定文本首行的缩进 tex-transform 控制文本的大小写 unicode-bidi 设置文本方向...规定元素的定位类型 bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移 right 设置定位元素右外边距边界与其包含块右边界之间的偏移 left 设置定位元素左外边距边界与其包含块左边界之间的偏移...top 设置定位元素上外边距边界与其包含块上边界之间的偏移 overflow 规定当内容溢出元素框时发生的事情 cursor 规定要显示的光标的类型 float 规定框是否应该浮动 display 规定元素应该生成的框的类型...vertical-align 设置元素的垂直对齐方式 visibility 规定元素是否可见 z-index 设置元素的堆叠顺序 ---- CSS 伪类(Pseudo-classes) 属性 描述
形状边缘 当与 CSS 形状结合使用时,形状边距指定浮动元素形状周围的边距,从而可以精确控制文本换行和布局。 .shape { shape-margin: 20px; } 75....滚动边距 滚动边距设置滚动容器边缘和滚动内容开始之间的边距,通过提供滚动缓冲空间来增强用户体验。 .container { scroll-margin-top: 100px; } 76....选项卡大小 滚动边距设置滚动容器边缘和滚动内容开始之间的边距,通过提供滚动缓冲空间来增强用户体验。 pre { tab-size: 4; } 77....轮廓偏移 轮廓偏移调整轮廓和元素边缘之间的空间,从而可以更好地控制轮廓的外观而不影响布局。...文本下划线偏移 调整下划线相对于文本基线的位置,以改进排版细化。 p { text-underline-offset: 3px; } 85.
标签中class属性值为ps的才采用此样式*/ 注意:类选择符可以在网页中重复使用 3. id 选择符 定义: #id名{样式.....} ...*内补白(内补丁) padding: 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px; padding-top...: 检索或设置对象顶边的内部边距 padding-right: 检索或设置对象右边的内部边距 padding-bottom:检索或设置对象下边的内部边距... padding-left: 检索或设置对象左边的内部边距 7....: 检索或设置对象顶边的外延边距 margin-right: 检索或设置对象右边的外延边距 margin-bottom: 检索或设置对象下边的外延边距
# 代表出现1次以上,以逗号隔开,可以选择后面跟大括号的形式,精确表示重复多少次,如#{1,4}。 !...说明: 设置或检索对象中文本的文字是否有阴影及模糊效果。 可以设定多组效果,每组参数值以逗号分隔。 取值: none:无阴影 ①:第1个长度值用来设置对象的阴影水平偏移值。...] 取值: none:无阴影 ①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值 ②:第2个长度值用来设置对象的阴影垂直偏移值。...9个区域:四个角,四边以及中心区域。...width 与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如.
领取专属 10元无门槛券
手把手带您无忧上云