这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮； HTML表单和常规HTML文档的主要区别在于，大多数情况下，表单收集的数据被发送到web服务器； form表单 所有的..." method="post"> 这个元素正式定义了一个表单，就像和标签，它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。...它的所有属性都是可选的，但实践中最好至少要设置action属性和method属性。...textarea默认是等宽字体 */ font: 1em sans-serif; /* 使所有文本输入框大小相同 */ width: 300px; box-sizing: border-box...*/ height: 5em; } .button { /* 把按钮放到和文本输入框一样的位置 */ padding-left: 90px; /* 和label的大小一样 */ } button
属性是作用在块级元素上让里面的文本居中： 我要居中我要居中我要居中 //若想要上面的文本居中，对应的CSS样式因如下所示编写 div{ text-align...但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的 Web页面时，他改变了浏览器的字体大小（虽然一般人不会去改变浏览器字体大小），这时会使用我们的Web页面布局被打破，这时就提出了使用“em”来定...相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。一般都是以body的font-size为基准。...所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。...比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
此空间的大小也由默认样式控制：p 标签的顶部和底部都有 margin。 你也会注意到按钮列表的圆点，以及列表的缩进行为。这些也都是默认样式。我们马上就要修改这些默认样式了。...margin 和 padding 那…… 为什么用 margin 而不用 padding？为什么要设置在头像右侧，而不是文字内容左侧呢？...（在 StackOverflow 查看更多详解） 横排按钮 要横排按钮有好几种方式。 一种就是设置 Flex 子项的对齐方式。你应该对设置对齐方式很熟悉，每个富文本编辑器顶部都有这种功能的按钮： ?...一个单位的 em 等于 body 标签上的以像素为单位的字号大小。body 标签的默认字号为 16px（16 像素高），所以本例中的 1em 相当于 16px。...em 随字号改变而改变，因此可以用 1em 来表达 “我想让文字下方的 margin 和文字的高度一样，不论文字高度是多少”。 现在的效果如下： ? 现在让我们把图片缩小一些，并将其设置为圆形。
注意： 我们文字大小以后，基本就用px了，其他单位很少使用 谷歌浏览器默认的文字大小为16px 但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。...p{ font-family:"微软雅黑";} 网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体...尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 CSS Unicode字体 ? 为什么使用 Unicode字体 在 CSS 中设置字体名称，直接写中文是可以的。...使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。 font-family: "\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。...1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度 p { /*行间距*/ line-height: 25px; /*首行缩进2个字 em
: #00a1d6; } /* 设置在 .form 下的所有 a元素的颜色为 这个颜色 */ .form { width: 980px; margin: 1em auto; }.../* 设置 .form 的宽度 然后margin： 1em(距上面一个字体距离) auto(水平居中)； */ .form h2 { text-align: center; /*...{ border-color: #00a1d6; } /* 这里是 设置那个下拉框和 文本框在一起的那个一个表单 */ /* 使用浮动将他们放置在一列 还有定高 */ ....width: 100%; /* 这里同样是为了撑满 那个定宽 */ box-sizing: border-box; } /* 这是最后那个 已有帐号，直接登录 那个 直接设置为文本靠右就可以啦...*/ font-size:14px; /* 使用IE盒模型（个人取舍，我一般设置width是这是盒子的真实大小，包括padding和border） */ box-sizing: border-box
盒子的大小 默认情况下，一个盒子的大小刚好容纳其中的内容(文本、图片等)，并根据其中内容的变化而变化。...通过CSS的width属性和height属性可以设置盒子显示的宽度和高度，从而改变盒子的大小。....盒子模型的类型 块级元素 可以设置宽高 内联元素 水平方向的内边距有效的 - 控制文本内容在水平方向的位置 垂直方向的内边距有效的 - 文本内容的位置没有变化，内边距向上和向下进行扩展 垂直方向的外边距无效的...该模型设置元素在HTML页面中所占区域为盒子的大小+外边距。. ? 外边距常见的问题 外边距重叠 外边距重叠的问题只出现在上外边距和下外边距中 左外边距和右外边距之间不存在外边距重叠 ?...解决方案: 简单的解决方案有两种: 为上一个元素设置下外边距为300px 为下一个元素设置上外边距为300px 网上的方法 可以在两个元素中间再添加一个新的元素.但不推荐.因为 为了解决间题增加无用的元素和内容
如果我们加多一个div来包裹原先的div，然后设置其字体大小为 1.25em呢? 我们包裹的 div 继承根元素字体大小 16px ，并乘以它自己的 1.25em 的字体大小。...这将设置包裹 div 字体大小为 20px，即 1.25 x 16 = 20。...根据我们上面的例子，设计组件比如按钮，菜单和标题可能会有自己明确的字体大小。...当你修改字体大小的时候，你希望整个组件都适当缩放 通用属性这一准则将适用于在非默认字体大小的元素上的padding、 margin、 width、 height和line-height等值。...我们可以想到的例子是一个使用 em 字体大小的下拉菜单，我们有第二个级别的菜单项文本大小取决于第一级字体大小。 另一个例子可能是用在按钮里面的字体图标，字体图标的大小跟按钮的文本大小有关。
背景尺寸是行高的2倍 注意em单位 white-space：设置或检索对象内空格的处理方式 normal：默认处理方式 pre：用等宽字体显示预格式化的文本，空白字符会被浏览器保留 nowrap：文本不会换行...，直到遇到标签为止 pre-wrap：用等宽字体显示预格式化的文本，空白字符会被浏览器保留，文本会换行 pre-line：保持换行符，合并空白符 示例代码： <meta charset...利用tab-size指定tab的大小 示例代码 Document ... 五、现实中的文字效果 text-shadow实现的效果不能退化，如果浏览器不支持则看不见，可以用filter实现，但支持得更好（但可以退化样式） text-shadow设置多个值...CSS 六、自定义复选框 系统自带复选框美化 利用css3提供的:checked伪类选择器实现 宽、高、对齐等设置单位最好用em，让按钮变得更为灵活
如果不设置position，就是像block1、block3一样，和block2的样式相同哦！... 相对位置 当position属性为relative，上例这时表示相对定位。...固定定位 固定定位比较类似于绝对定位，当页面长度超出浏览器窗口时，此时会出现滚动条。...float: left; /* 定义在左侧的浮动层 */ color: white; /* 设置文本的颜色 */ background: #060; padding...: 1em; margin: 0; /* 设置边距大小 */ } 一月一日 领导者必须正直 组织的精神是自上而下树立起来的
： 所有浏览器都支持line-height，但ie不支持 line-height 的 inherit 值 line-height 不允许设置负值 未设高度的空div中的文字之所以有高度，是因为...设置相同即可 单行文本的垂直居中，line-height = height 多行文本的高度固定居中, display:table和display:table-cell的使用方法，前者必须设置在父元素上，...如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。...去除inline-block元素之间的空隙 造成空隙的原因：因为元素之间有空格或者换行 解决办法 除掉空白符; 但缺点是代码风格和结构都不美观 font-size：0; 空白符也是字符，设置字体大小为0...word-spacing/letter-spacing: 使用负值，设置的负值是和字体大小有关系，但是如果设置过大的话，会造成重叠 postCss 详细解释：https://www.ibm.com/developerworks
important 可以提高某种样式的重要性，让它的优先级高于其他没有加该声明的所有样式。 让我们进一步扩展我们的数据集，看看当用户将浏览器的字体大小设置为最小 2em 时会发生什么: ?...布局的目的是在Box Tree中调整所有盒子的大小和位置，使它们为绘制做好准备。 下面示例可以更容易地理解Box Tree是如何构建的。...在本例中，它使用文本布局一个按钮，因此其最窄的大小(包括所有其他CSS框)将是最长单词的大小。在最宽的地方，它将是一行的所有文本，加上 CSS Box。注意:这里按钮的颜色不是文字的颜色。...因此，如果我们从前面的“SHARE IT”按钮开始，并遵循这个过程，它绘制过程大致如下: ? 完成后，它将转换为位图，最终每个布局元素（甚至文本）都成为引擎中的图像。 ...合成程序的工作是创建一个或多个层，并将位图呈现到屏幕上供最终用户查看。 此时一个合理的问题是，“为什么任何站点都需要不止一个位图或合成层?”，根据我们目前看到的例子，我们真的不会这么做。
左侧的距离，从而决定了蒙版的大小 当我们设置为 inset(0 0 0 0)时，表示蒙版作用区域大小跟元素标签一样大，如下图所示（红色边框表示蒙版的作用区域） ?...此时我们的文字是可以完全展示出来的，因为蒙版的作用区域就是我们标签元素的大小 然后我们再来看一下，如果我们的设置为 inset(30px 0 0 0) ，则测试表示，蒙版的作用区域距离标签元素的上侧 30px...，用于遮挡我们的标签元素 */ background: black; /* 给before伪元素的文本添加左侧2px大小的红色文字阴影 */ text-shadow:2px 0...，用于遮挡我们的标签元素 */ background: black; /* 给before伪元素的文本添加右侧2px大小的蓝色文字阴影 */ text-shadow: -2px...before 和 after，分别定位到跟父元素同样的位置，然后分别向左、右侧移一点点的距离，制作一个错位的效果，然后都将背景色设置为与父元素背景色一样的颜色，用于遮挡父元素。
1.像素单位px，使用像素直接定义字体的大小，是绝对单位，如12px。 2.字体大小em，一个字体的大小就是1em，在任何浏览器中，默认的字体大小都是1em。...修饰页面文本和页面背景的属性 background，将背景属性设置在一个声明中 background-color，设置页面对象的背景颜色 background-image，引用图像，将其设置为背景 background-repeat...用来和content属性一起使用 E:after/E::after，设置在对象后发生的内容，用来和content属性一起使用 E::selection，设置被选择时的颜色 文本 文本阴影 text-shadow...:取值;} font-family: 设置文本的字体名称 font-style: 设置文本样式 font-variant: 设置文本是否大小写 font-weight: 设置文本的粗细 font-stretch...：设置文本是否横向的拉伸变形 fontsize: 设置文本字体的大小 src: 设置自定义字体的相对路径或绝对路径 opactity属性 opacity: | inherit //
属性的标签的父标签设置 font-size : 0 去掉图片底部默认的3像素空白间隙 vertical-align: top 下面的css样式表示文本的字体为宋体，文本的字体大小为14px，文本的行高为...24px font: 14px/24px "宋体" 如果给line-height的值只设置一个数字，没有加单位，此时元素的行高为元素的字体大小乘以那个数字如给元素设置两个属性 line-height:...div标签下的第n(n为从1开始的正整数)个标签，并且这个标签必须是p标签才会被选中 div p:nth-child(n) 下面的代码表示选中div标签下的第n(n为从1开始的正整数)个p标签 div...，并且这个标签必须是p标签才会被选中 div p:nth-child(odd) -webkit-margin-before: 1em表示元素的上边距的高度 = 元素的字体大小 X 1，当元素的font-size...[endif]--> 大部分主流浏览器浏览器中默认的字体大小都为16px direction: ltr将文本的显示方向设置为从右往左显示 flex-basis设置弹性盒的初始长度 当输入框中的单词拼写错误时
; } 上面的代码看起来有些霸道，将所有元素的内外边距都设置为0了，而正是没有了这些默认内外边距的影响，使得我们后面的CSS设置会更加的容易。...将所有元素都设置为border-box，可以更轻松的改变元素的大小，而不必担心padding或者border值会将元素撑开变形或者换行显示。...9.不要重复设置 大多数CSS属性的值都是从DOM树中向上一级的元素继承的，因此才被命名为级联样式表。以font属性为例-它总是从父级继承的，您不必为页面上的每个元素都单独设置。...; } 15.Em, Rem与px 设置元素与文本的大小应该用哪种单位，em，rem，还是px？...然而，虽然没有固定的规则，但是每种单位还是有一些要注意的地方的： em - 设置元素为1em，其大小与父元素的font-size属性有关。
在排版上，一个 em 等于当前字体大小。 如果你将字体大小设置为 32pt（“pt”是另一个仍然有时使用的旧排版术语），那么 1em 就是32pt。...如果当前字体大小为 20px ，那么 1em = 20px。 在网页上，默认字体大小为 16px 。一些用户从不更改默认设置，但许多人会更改。...好的，那就是单位的含义和来源。现在让我们回答为什么使用哪个单位很重要。 为什么这一切都很重要 再次强调的误解是：既然 1em 和 16px 相等，那么选择哪个单位并不重要。...文本、线条和间距都变大了4倍；它们相对于彼此的大小保持不变： 当涉及到缩放时， px 、 em 或 rem 之间没有真正的区别。但缩放并不是用户使网站更易用的唯一方法。...如果用户设置了非常大的字体大小，则可能不是这种情况，将媒体查询设置为 rem 而不是 px 可以帮助我们避免这种假设并响应用户的偏好。 我在这个网站上遇到了这个问题；我把所有的断点都设置在 px 上。
左侧的距离，从而决定了蒙版的大小 当我们设置为 inset(0 0 0 0)时，表示蒙版作用区域大小跟元素标签一样大，如下图所示（红色边框表示蒙版的作用区域） 此时我们的文字是可以完全展示出来的，因为蒙版的作用区域就是我们标签元素的大小...然后我们再来看一下，如果我们的设置为 inset(30px 0 0 0) ，则测试表示，蒙版的作用区域距离标签元素的上侧 30px，距离其它的边 0px，如图所示 图中蓝色边框的部分不是蒙版的作用区域...，用于遮挡我们的标签元素 */ background: black; /* 给before伪元素的文本添加左侧2px大小的红色文字阴影 */ text-shadow:2px 0...，用于遮挡我们的标签元素 */ background: black; /* 给before伪元素的文本添加右侧2px大小的蓝色文字阴影 */ text-shadow: -2px...before 和 after，分别定位到跟父元素同样的位置，然后分别向左、右侧移一点点的距离，制作一个错位的效果，然后都将背景色设置为与父元素背景色一样的颜色，用于遮挡父元素。
而后，就需要设计师决定设计中可能涉及的文本字体大小，定义出大致的设计范围： 默认值为（1em）的标准文本，在营销类网站或UI设计中是非常常见的字体尺寸。...当然，设计师也可通过这些已定的间距值定义一定的宽度、高度和行高，以便可以在设计和调整按钮、输入表单、头像和其他类似组件时，重用这些尺寸大小。...文字间距 如前所述，字体大小不是定义文本组件所需的惟一样式属性。文字间距则是设置文本组件的另一个有效属性，以达到收紧大标题或间隔标题的作用，避免页面拥挤。...下面，我们使用上面的样式库中定义的样式来构建一些常见的组件： 常见的按钮组件 下面我们从简单的按钮组件开始，来说明如何使用在样式库中预先定义的样式来构建： 其它组件 同样，以上提及的颜色、字体大小、阴影和填充值都可以直接通过上面预定义的样式库中的样式设置而来...由于页边距在不同的案例中设置有所不同，因此设计师最好还是在页面样式表中使用“div”和“wrapper”代码单独进行定义。
领取专属 10元无门槛券
手把手带您无忧上云
