文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端学习自学笔记：day02

在此之前先为大家显示下前端工程师的路线图: 第二天的笔记:HTML AND CSS: 早上所学的内容 标签：[链接外部的资源和样式 例： rel：规定当前文档与被链接文档之间的关系。...注意：可以将多个class应用到一个元素上，只需要在多个class之间用空格隔开。...例： 中午所学的内容： HTML的style属性： background-color（背景颜色） 例： 注意：旧的背景颜色（bgcolor）不建议使用。...text-align（文本水平对齐）,center:居中对齐 例： (居中对齐) 注意：旧的设置文本对齐属性（align）不建议使用。 文本格式化标签： 定义粗体文本。...例：This is del 不建议使用的有：、、 预文本格式： (保留原本在编译器中的文字样子，包括空格都完整保留下来) 例： 这是 预保留格式 它保留了 空格 和换行 "计算机输出"标签：（不同的“计算机输出

878100

CSS学习笔记一

属性： 可以改变字或单词之间的标准间隔，默认（normal）为 0 正数值：加大间隔 负数值：缩小间隔 字符转换： text-transform属性： 处理文本的大小写 none：不进行操作...保留 不允许 pre-wrap 保留 保留 允许 文本方向： direction属性： 块级元素中的文本书写方向，表中列布局的方向…… unicode-bidi属性：行内元素 文本属性： 属性 描述...属性： 将列表项标志设置为一个图像 列表标志位置： list-style-position属性： 简写列表样式： list-style属性： 表格样式： 表格边框： border属性： 设置表格的边框样式...（双线框） border-collapse属性：将双线框折叠为单线框 宽度和高度： width属性： 设置宽度 height属性： 设置高度 表格对齐： text-align属性： （水平对齐） left...：左对齐 right：右对齐 center：居中（和标签不同，后者是对元素操作，而前者只对文本有效） justify“：两端对齐 vertical-align属性： （垂直对齐

3.3K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    css的样式，选择器和框模型

    百分比 text-align：水平对齐，影响一个元素中的文本行互相之间的对齐方式 p {text-indent: left;}左对齐，right：右对齐center：居中 CENTER： 影响父元素的居中...white-space：处理空白符 p {white-space: normal;} normal：正常 pre：保留回车和多个空格和 nowrap：只保留一个空格忽略回车忽略 pre-wrap...：保留多个空格忽略回车,不忽略 pre-line：保留回车忽略多个空格，不忽略 direction：文本方向 p {direction: ltr;} ltr：left to right...image.png 将列表属性写在一起 ul{ list-style:square inside url('/i/arrow.gif'); } 表格 border：边框属性 table,th,...通过margin碰撞合并能使网页最上和最下的边框和元素之间的边框保持一致（如果是同一种类型样式的元素）。而不会中间是上下的两倍。

    1.4K30

    通过动图学习 CSS Flex

    这与 row-reverse 不同，因为它保留了项目的顺序。 Justify Content justify-content 属性负责 flex 项目的水平对齐。...center Space between 意味着所有 内部 项目之间有空格： space-between 下面这个似乎与上面的完全相同。那是因为它的内容同样是整个字母表。...space-around 尽管你在前面看到了这些演示，但你仍然需要在自己的环境中去尝试 flex，这样才能是你真正理解布局。这也是我决定制作本教程的原因。这些动画受限于项目大小。...属性 justify-content（上面的所有示例）和 align-content（下面）采用完全相同的值。它们仅在两个不同的方向上对齐 —— 相对于存储在柔性容器中的项目的垂直和水平方向上。...十多年来，在布局设计中垂直居中的项目已成为一个巨大的问题。 最后用 flex 解决了。 （呃……你也可以用 css grid 来解决。）

    1.3K40

    Web - CSS3基础语法与盒模型

    img标签imgalt$="夜景" 选择有alt属性是夜景结尾的img标签imgalt*="美" 选择有alt属性中含有美的img标签imgalt~="手机拍摄" 选择有alt属性中有空格隔开的手机拍摄字样的...p { line-height: 1.5; }3、text-align设置段落文本的水平对齐方式,left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）等。...p { letter-spacing: 2px; }5、word-spacing设置单词之间的水平间距，长度值，用于调整单词之间的间隔距离。...一些元素比如body、ul、p，都有默认的margin，在开始制作网页的时候，要将他们清除。盒子的水平居中，将盒子的左右两边的margin都设置成auto，盒子将水平居中。...当块级元素div、h、li等没有设置width属性时，它将自动撑满，但这不意味着width属性可以继承。

    10310

    『知识巩固#1』Html、Css基础整理

    、跨列合并colspan 明确合并哪几个单元格 通过左上原则，确定保留谁，删除谁 给保留的单元格设置属性 表单 input系列 type属性值如下： text 文本框，用于输入单行文本 不换行...指定标签的style 一个标签需要多个类名，用空格隔开即可 id 选择器 配合js 诞生，在一个页面中式唯一的，不可替代的 #id {属性名: 属性值} 所有标签上都有id 属性 每一个标签只能有一个...数字+em; 1em为当前font-size的大小 文本水平对齐 text-align 左对齐、右对齐、居中对齐 能让哪些元素水平居中 文本 span 标签 input标签、imp标签 文本修饰...权重叠加计算公式 (0, 0, 0, 0) (行内，id，类名，标签) 之间无进位 只是统计每个复合选择器的对应选项个数 如果都相同 谁在后面谁生效 如果第一级数字相同 再去比较其他 需要结合例子理解...清除默认边距 浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置 常用 * {margin: 0; padding

    4K20

    python入门-2-55个案例吃透python字符串格式化

    ^：居中对齐 2. >：右对齐 3. 对齐 4. +、-：显示正负号 语法形式 常用的语法形式为：%[(name)][flags][width]....[precision] typecode (name)：参数的名称，可以省略；如果使用必须加上() flags：对齐标志位；可以是+、-、“”、0；+右对齐，-左对齐，""填充一个空格；0表示左侧使用0...，浮点数的对齐只保留6位小数： pi = 3.1415926 print("{:^20f}".format(pi)) # 居中 # 默认只保留6位小数 print("{:>20f}".format...**3.1416** ****3.1416 3.1416**** 千位分隔符 和format中的千位分隔符相同，主要是用于金融货币中，自带金钱属性呀。...格式整理 整理下关于对齐、精度、数值类型的符号等知识点： 对齐 对齐（数值默认对齐方式） >：左对齐（字符串默认对齐方式） ^：居中 符号 +：负数前加负号（-），正数前加正号（+） -：负数前加负号

    30620

    全栈之前端 | 8.CSS3基础知识之文本样式学习

    * inter-word: 通过在文本中的单词之间添加空间来实现行对齐（这将会改变 word-spacing 的值），比如英语或韩语就是最适合使用这个属性来用空格分隔单词的语言。... 居中对齐,居中对齐,居中对齐,居中对齐 两端对齐,两端对齐,两端对齐,两端对齐 <p class...*/ font-size: math; 假设浏览器的默认 font-size 为 16px，则单词“outer”将渲染为 25.6px，但单词“inner”将渲染为 40.96px。...word-spacing 属性 - 设置文本单词的间距表现 描述: 此属性 设置标签、单词之间的空格长度。...pre-wrap 保留 保留 换行 挂起 挂起 pre-line 保留 合并 换行 移除 挂起 break-spaces 保留 保留 换行 换行 换行 温馨提示：空格和其他空白分隔符之间存在区别，如果空白字符被挂起

    38620

    【原创】HTML中常用标签

    ②h标签用于align属性，用于设置对其方式，常用值如下： left：左对齐 right：右对齐 center文本居中对齐 justify两端对齐(需要多行文本才可以看出效果) 网页显示效果如下图...： 2.段落标签： 标签：用于包裹段落文本，当p标签包含多行文本时，浏览器会自动忽略源代码中的空格和换行，多行文本间保留一个空格，p标签也可以使用align属性，设置段落对齐方式，如下图:...3.其他标签： ① 标签：包裹在pre标签中的文本会保留空格和换行符。...形 width，用于设置分割线的宽度，设置值的单位是px align，用于设置对齐方式，默认是居中对齐 ④标签：用来组合文档中的行内元素，以便通过层叠样式表（CSS）来格式化它们。...title的属性值，有利于SEO width【可选】:设置图片的宽度，当只设置widht属性时，图片高度会等比例显示，保证图片不失 真。

    2.7K20

    【CSS】CSS 总结 ② ( CSS 字体文本样式 - 大小 字体 粗细 斜体 颜色 对齐 | CSS 标签显示模式 - 块级元素 行内元素 行内块元素 ) ★

    ; 字体样式 属性值 之间 , 使用空格隔开 ; font-size 和 font-family 两个样式必须写 , 其它样式可以省略 ; 选择器 { font:font-style font-weight...: text-align 属性 , 可以设置 文本对齐方式 , 为标签设置该 CSS 样式 , 标签内的内容就会使用相应的对齐方式 ; text-align 属性 取值 : left : 左对齐..., 该值是默认值 ; right : 右对齐 ; center : 居中对齐 ; text-align:center; 文本行间距 : line-height 属性 , 用于 设置 行间距 , 又称为...属性值如下 : none : 默认属性 , 没有装饰 , 取消链接的下划线 ; ( 常用 ) underline : 保留链接的下划线 ; ( 常用 ) overline : 在文本上面划一条线...块级元素 ; 3、行内块元素 行内块元素 标签 是 特殊的标签 , 可以在 一行内显示多个 , 但是同时也可以为其设置 宽高属性 和 对齐属性 ; 图片标签 : 表单标签 :

    2.6K10

    CSS3盒子模型

    各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。...stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。...该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。 flex-end：弹性盒子元素将向行结束位置对齐。...该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。 center：弹性盒子元素将向行中间位置对齐。...space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。

    1.1K20

    web前端学习摘要。

    对齐方式（不管元素如何浮动，始终以父级容器或它前面同层次并列的元素作为参考进行对齐。    2. 一旦元素浮动起来，就可以直接适用CSS盒子模型属性。...无论是否可见，都保留其物理空间。...可以通过添加多组值来设定多重阴影，达到特殊效果，多组值之间用逗号隔开。部分老浏览器版本不支持该属性（IE9及以下），但这并不产生大的影响。...默认情况下，浏览器将行高呈现为字体尺寸的1到1.2倍左右，通常将行高设置我字号的150%到180%之间。 典型应用：单行文本在容器中垂直居中。实现办法：让容器行高等于容器高度。...9. word-spacing：设置单个词语之间的间距。判断单词或词语的依据是文本间的“空格”，指定的间距将被添加到单词或词语之后，但最后一个词除外。通常以字号为参考，使用相对单位来控制间距。

    3.7K30

    dotnet OpenXML 聊聊文本段落对齐方式

    在 Word 和 PPT 的文本段落对齐规则是相同的，对齐的规则比较多，本文将一一告诉大家 文本的段落对齐，需要设置给段落属性上，在 OpenXML SDK 里，使用 TextAlignmentTypeValues...PPT 进行代码生成，然后修改里面的属性，用来测试不同的枚举值的效果。...最大的不同在于 JustifiedLow 对齐修改的是线条，但 Justified 是通过修改空格的宽度对齐 Left 左对齐，对应字符串是 l 的值。...运行效果如下： Center 居中对齐，对应字符串是 ctr 的值。运行效果如下： Right 右对齐，对应字符串是 r 的值。...欢迎转载、使用、重新发布，但务必保留文章署名林德熙（包含链接： https://blog.lindexi.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。

    1.4K30

    前端成神之路-CSS文字文本样式

    font-family;} 注意： 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。...其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。...#f00 代表红色 2.2 text-align:文本水平对齐方式 作用： text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性 其可用属性值如下：...属性 解释 left 左对齐（默认值） right 右对齐 center 居中对齐 注意： 是让盒子里面的内容水平居中， 而不是让盒子居中对齐 2.3 line-height:行间距 作用...： line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

    7.1K10

    关于 vertical-align 你应该知道的一切

    首先我们先讲一下，要实现垂直居中，我们为什么选择 vertical-align 这样一个不起眼的 CSS 属性。...： （1）将图片设置为 display:block （利用 vertical-align 的生效前提） （2）将 vertical-align 设置为 top，bottom，或者 middle 等值（利用属性值的表现行为...这种通过 line-height 定高，元素 vertical-align:middle 垂直居中的方法不仅适用于现代浏览器，连 IE 浏览器也是支持的，但是这里只有在 IE7 中需要注意的是图片后面需要换行或者空格...-- 这里要折行或空格 --> 扩展案例 案例1：任意父级高度的垂直居中 我们给父级设置 line-height 的值等于 height 的值，实现了近似垂直居中的效果。...之间关系产生的影响。

    2.8K20

    Flex弹性布局

    | space-between |space-around; } flex-start（默认值）：左对齐 flex-end：右对齐 center：居中 space-between:两端对齐，项目之间的间隔都相等...所以，项目之间的间隔比项目与边框的间隔大一倍。 align-items属性 align-items属性定义项目在交叉轴上如何对齐。 flex-start：交叉轴的起点对齐。...stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 完美居中 在下面的例子中，我们会解决一个非常常见的样式问题：完美居中。...解决方案：将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中： .flex-container { display: flex...flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。

    1.5K10

    UI篇－CATextLayer和 富文本的交融

    在使用中通过将AttributedString赋值给控件的 attributedText 属性来添加文字样式。有属性的控件有UILabel、UITextField和UITextView。...、字符间距、以及对齐模式,但是注意的是，在设置段落样式的时候，必须保证控件的 numberofline属性必须为0 NSMutableAttributedString* str2 = [[NSMutableAttributedString...;//居中 //NSTextAlignmentLeft //左对齐 //NSTextAlignmentCenter //居中 //NSTextAlignmentRight //右对齐 //NSTextAlignmentJustified...//NSLineBreakByWordWrapping = 0,//以空格为边界，保留单词 //NSLineBreakByCharWrapping, //保留整个字符 //NSLineBreakByClipping...drawAtPoint和drawInRect的区别是后一个可以自动换行，不过代价是 不设置属性，都是默认的属性有时候是无法接受的。

    2.6K10

    vertical-align刨根问底

    例如，可能会遇到，改变元素的vertical-align根本没有改变它自己的对齐方式，但同一行的其它元素（的对齐方式）却变了！...是根据它自身的规则来确定的 含有流内内容但具有计算值为非visible的overflow属性时，baseline是margin-box的底边（中间的例子），所以，它与内联-块元素的底边相同 不含流内内容时...如果这个字符没有以任何方式对齐，它默认将坐在baseline上 在baseline周围，行盒含有我们称之为文本盒（text box）的东西。文本盒可以简单地看做一个没有任何对齐方式的行盒中的内联元素。...我们可以更近一步看看某些场景下的竖直对齐，尤其是我们将那些可能出错的场景 居中小图标 有个烦扰着我的问题：我有一个小图标，想要与旁边的一行文本居中对齐。...内联元素之间的所有空白字符都被合并成一个空格，就是这个空格碍事，例如想让两个内联元素仅挨在一起并都设置width: 50%的话，就没有足够的空间容纳两个50%的元素和一个空格。

    1.2K50
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券