writing-mode是一个强大的CSS属性，能让文字竖排（实际上能让任何东西竖排，因为能改变默认布局流），例如：
作为程序猿的我们，书写代码也需要大量的技巧。一份良好的代码能让人耳目一新，让人容易理解，同时也让自己成就感满满。因此，在这里简单的整理一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。
层叠样式表。(Cascading Style Sheets) CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。
譬如 margin、padding，它们就会有 margin-left、margin-right 或者是 padding-left、padding-right。还有定位中的 left、top、right、bottom，它们表示了上下左右不同的方位。
2、align-self多了个auto（默认值），表示继承自flex容器的align-items属性值。
来源 | https://juejin.im/post/6844903908440014861
写本文的起因是，一天在群里有同学说误打误撞下，使用负的 outline-offset 实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-offset 实现加号呢？
在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界；而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。
我们使用float浮动做了很多其本职工作以外的事情，于是我们会混淆，我们会回看不清float真正的面目。浮动真正的意义在哪里呢？要知道这个问题的答案很简单，假设现在CSS中没有浮动(float)属性，那么会变成一个什么样子。我们会发现，目前流行采用浮动方法实现的无论是分栏布局，还是列表排列我们都可以用其他一些CSS属性（不考虑table）代替实现，唯一一个实现不了的就是“文字环绕图片”，我是想不出来能有什么方法可以让文字环绕图片显示。好，这个替代不了的作用才是float真正的意义所在。此作用类似于word中的版式，很基础的原始的作用：
color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白 三、CSS符号属性 list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/ list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/ 四、CSS背景样式 background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置 background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/ 五、CSS连接属性 a /*所有超链接*/
在实际工作的过程中经常遇到图片文字的混排，需要图片与一段文字垂直居中，这个实现方法以前一直非常复杂，而flex是解决这个问题比较好的办法；
前面一篇文章整体介绍了 CSS 的布局知识，其中说到 float 布局是 CSS 不断完善的副产物。而在 2023 年的今天，flex 这种布局方式才是未来！那么今天我们就来学习下 flex 弹性布局。
shape-outside 是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域：
一个元素可以拥有多个类名 类名和类名之间用空格隔开 多类名选择器可以让我们解决更复杂的一些需求
你肯定经历过耗费数个小时，换着花样地尝试所有可能起作用的 CSS 属性、一遍遍地从 Stack Overflow 上复制粘贴代码，寄希望于误打误撞地赌中那个能实现预期效果的魔幻组合。
在pages下新建页面flex-direction，并在pages.json中将flex-direction页面设为首页
Flex布局的出现是为了弥补float、position等布局属性的不足（比如控制多个子元素的排列方式）。
我是法医，一只治疗系前端码猿🐒，与代码对话，倾听它们心底的呼声，期待着大家的点赞👍与关注➕，当然也欢迎加入前端猎手技术交流群😛，文末扫码我拉你进群，一起交流技术以及代码之外的一切🙆♀️ 📢 嘿！大家好，我是法医，一只治疗系前端码猿🐒，与代码对话，倾听它们心底的呼声，期待着大家的点赞👍与关注➕ 啥是食物系虚拟流光键盘？键盘不是分什么轴嘛，啥时候键盘还有食物系？能吃吗？ 废话不多说，有请今天的主角儿 👀 怎么样？是不是很炫？其实这个效果我是在袁老师的公开课上看到的，第一眼看到就情不自禁地迷上了😍，特
附图：提示框浮层内容格式器 formatter: '{b0}: {c0}{b1}: {c1}' 格式化
Flex 布局有时候会用到，但是始终分不清楚其中的部分属性及其含义，所以用这篇博客专门总结一下 Flex 布局。
CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。
HTML5学堂：移动端从2012年走到今日，已经占领了互联网的半壁江山。网站开发也从PC平台向移动端平台开发发展。作为一个优秀的前端开发者，除了能够处理传统平台的网站，还需要能够处理移动端的网页。可是，新的事物伴随着各个浏览器，也就冒出了各种兼容问题。第4步——“百变”盒模型。 “百变”盒模型 学过HTML和CSS的同学都知道，盒模型是由width、height、border、padding、margin这几个属性共同组成的。一个元素在网页文档中占据的真正空间是盒模型的大小，而非简简单单width和heig
本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。
1. 说下行内元素和块级元素的区别？行内块元素的兼容性使用（IE8 以下） Q1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。 块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。 Q2)兼容性：display:inline-block;display:inline;zoom:1; 2.清除浮动有哪些方式？比较好的方式是哪一种？ 1）父级div定义height。 2）结尾处加空
大家好，我是架构君，一个会写代码吟诗的架构师。今天说一说html的css代码_html通用css代码大全,希望能够帮助大家进步!!!
css在前端的学习中是一个绕不过去的课题，他决定如何显示的你网页内容，初学css你也许会觉得它很容易，无非就是控制元素的位置，大小，颜色等等表现层面的东西，但当你真正使用它去做一些事前的时候，往往会出现无处下抓的现象，这么多属性，我该使用哪个属性来实现想要的效果呢，更有时候自己以为的效果跟实际出来的效果又有很大差异，有人说css是感性的，确实，它不像javasctipt这种有很强逻辑性的语言，它的很多特性毫无逻辑可以，你只能试出来，从这个角度而言，其实css是很难学的，你需要积累很多很多的场景，才能说可以灵活的使用css，这篇文章就css中最常见的场景---布局，介绍一下集中常见的布局方法。
Author：Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力，都不会被生活辜负 不忘初心，方得始终 有多大能力 就要担负起多大的责任 一直不想去担负这种责任 所以找工作的时候都尽量做普通员工 只需要做好自己本职工作 不用去想公司的发展 不用去规划员工的工作计划 不用去为业绩而烦恼 然而 当年纪越来越大 阅历越来越广 不得不去，或者说是被强行推上管理岗位 当站到这个位置上时 才发现有多难 每周需要统筹员工工作安排 审核上周工作进度 拓展新的渠道和平台 统计销售数据 处理遇到的各种困难 多少次因为业绩不好
长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 float 和 position。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。
Row这个Widget其实就是一个布局组件，类似于前端中flex-direction: row;。作用就是可以使Row中的子元素在水平方向上面排列，可以用来做走马灯轮播等效果。
display:inline-block某种意义上的作用就是包裹(wrap)，而浮动也有类似的效果。举个常见例子，或许您有实现宽度自适应按钮的经验，实现宽度自适应的关键就是要让按钮的大小自适应于文字的个数，这就需要按钮要自动包裹在文字的外面。我们用什么方法实现呢？一就是display:inline-block；二就是float。
我们经常把网页常用的一些小的图标，做成精灵图，然后通过background-position去调整位置，但是这个需要引入图片，并且图片大小改变之后如果失真。在CSS3中可以使用字体图片，即使用图标跟使用文字一样。
浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型，并不是二维的。元素在页面上的排列，从我们的角度看是二维的，元素的位置可以用x，y轴坐标来表
前言 盒子模型作为CSS基础中的基础，曾一度以为掌握了IE和W3C标准下的块级盒子模型即可，但近日在学习行级盒子模型时发现原来当初是
文本垂直操作：vertical-align的使用图示。middle设置居中。 vertical-align 只对行内元素、行内块元素和表格单元格（table-cell）元素生效：不能用它垂直对齐块级元素。
使用 标签作为父盒子 , 其中容纳三个 链接 标签 , 每个链接标签中包含一个 标签 ;04
1. flex (弹性布局) 主要提供简便、完整、响应式布局解决方法，设置flex布局后元素的 float、clear、vertical-align属性将失效 主要参数： flex-direaction 决定主轴的方向 - 参数： - row(默认值): 主轴为水平方向，起点在左端 - row-reverse： 同上，起点在右端 - column： 主轴为垂直方向，起点在上方 - column-reverse： 同上，起点在下方 f
1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素：浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；浮动元素不在文档
常见的块级元素有：div；p；form；ul；li；ol；dl；hr；table；h1~h6；
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
个人认为 weui-flex 在小程序布局方面发挥了重大的作用。为开发人员提供了极其便利的布局环境，尤其对于我们我种代码怪来说，前端布局很多时候是有一些困难的，但有了weui-flex页面布局从此不在是问题 。
网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！
另外推荐：前端常用到的6种精美纯CSS3丝带效果： http://www.jq22.com/webqd3850
23 0 0 50道CSS基础面试题 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性
其中对于+和~，这种兄弟选择器 必须两者有共同父节点，~区别于+的是，~不需要两者紧邻
最终的效果如下图所示，下面小编一一为大家解析每个部分如何实现，并附上最终的实现代码。
作为一个广受好评的浏览器引擎，其网页布局的质量(包括速度、效率、符合标准度等)往往是其关键，那么WebKit究竟是如何布局网页上的所有元素(包括滚动条、文字、图片、按钮、下拉框等)呢？其主要数据结构及流程都包括哪些呢？其布局的基本概念及标准都有哪些呢？下面分别介绍WebKit对其实现及运用。我们首先从关于布局的基本概念及标准的认识开始。
这就是普通的文档流采用的定位方式，块元素默认占满一行，块元素之间从上到下排列，垂直排列，块元素有div，p，h1等，如下图，6个div，每个div占满一行
CSS中float属性会使元素浮动，使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
