静态定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed 设置偏移值: 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可（如果四个标签都写...方向 属性名 属性值 含义 水平 left 数字+px 距离左边的距离 水平 right 数字+px 距离右边的距离 垂直 top 数字+px 距离上边的距离 垂直 bottom 数字+px 距离下边的距离...四、溢出部分显示效果： 属性：overflow： 属性值 效果 visible 默认值，溢出部分可见 hidden 溢出部分隐藏（⭐常用） scroll...无论是否溢出，都显示滚动条 auto 根据是否溢出，自动显示或者隐藏滚动条 五、显示隐藏 元素本身隐藏 让某元素本身在屏幕中不可见。...: 水平 垂直 设置背景图大小：background-size ：宽度 高度
清除浮动的方法 额外标签法,在最后一个浮动元素后面添加一个空的标签代码: div style="clear: both">div> 使用after伪元素进行清除浮动. .clearfix:after...: 当对象内文本溢出,显示(....)...:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); 浮动(float...: baseline |top |middle |bottom 溢出的文字隐藏 white-space normal : 默认处理方式 nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇...，而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记 如果看了觉得不错 点赞！转发！ 达叔小生：往后余生，唯独有你 You and me, we are family !
，要么写在连写的里面 文本样式 文本缩进：text-indent:2em;//两字符 文本水平对齐方式：text-align 文本修饰：text-decoration underline:：...（分隔父子元素的margin-top） 给父元素设置overflow：hidden 转换成行内块元素 设置浮动 行内元素加margin和padding只有水平生效 ---- 附加：父盒子中小盒子居中方法...➢ 常见标准流排版规则： 块级元素：从上往下，垂直布局，独占一行 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行 ---- 浮动 例如word里的图片环绕文字四周。...例如：a，input，span…… 2.浮动 可以让原本垂直布局的 块级元素变成水平布局,子元素嵌入进父元素上方，父元素内容环绕浮动子元素，上方有介绍，类似于图层的概念或微软word中图片环绕文字四周概念...例如：某些网页的导航固定在头部 ---- 装饰 垂直对齐 小时候用英语本练英语时，都知道单词书写规范如下： 所以前端也是按照这样，处理行内块和行内元素时按照文字特点解析，以基线为基准对齐。
常见块级元素、行内元素、行内块元素的特点和区别 块级元素 (常见的块级元素div，p，h，form，li) 一行显示一个; 宽度默认为容器的100%； 可以设置高度宽度内外边距 块级元素可以包含其他的块级元素和文本...溢出文字的省略显示 单行文本 white-space: nowrap //(强制一行显示) overflow: hidden //(溢出隐藏) text-overflow: ellipsis //(显示省略标记...隐藏超出范围的文本） 11....13. div水平垂直居中的几种方式。...绝对定位水平垂直居中(margin:auto实现绝对定位元素的居中) div class="center">这里是divdiv> .center {
writing-mode 属性：实际上定义了文本水平或垂直排布以及在块级元素中文本的行进方向，在块布局、内联布局中有不同效果。...direction 属性：实际上用于设置文本、表格列和水平溢出的方向, 对于从右到左书写的语言（如希伯来语或阿拉伯语），应将该属性设置为 rtl；对于从左到右书写的语言（如英语和大多数其他语言），则应将该属性设置为...顺时针旋转水平书写的字符 90°，将垂直书写的文字自然布局。...text-orientation 属性 - 定义有溢出内容隐藏的标识 描述：此属性用于确定如何提示用户存在隐藏的溢出内容，其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。...语法参数: # 文本以适当的字符换行（例如空格，在英语等使用空格分隔符的语言中），以最大限度地减少溢出, 默认值 text-wrap: wrap; # 文本不换行，它将溢出包含的元素，而不是换行。
创建水平导航栏后，我们可以在设置垂直滚动条之前将其样式设置为垂直侧边栏。...下面的截图显示了侧边栏与正常内容流分开：固定溢出的侧边栏上面的侧边栏具有固定位置。页面的正文继续滚动，但侧边栏保持在用户的视图中。...将overflow-y属性的值设置为auto后，如果没有内容超出容器的边界，浏览器将隐藏滚动条。恭喜您！您已成功创建了一个垂直滚动条。如果需要的话，可以休息一下。...在大多数情况下，您可能希望在整个网站的所有垂直和水平滚动条上保持一致的样式。...为了实现所有滚动条的统一定制，我们可以按如下方式应用样式：在不选择任何特定元素、标签或类名的情况下应用滚动条样式在网站同时具有水平和垂直滚动条的情况下，为两个属性的height和width同时赋值。
text-align 属性 应用场景：text-align 主要用于文本对齐，它决定了 行内元素 或 块级元素中的文本 如何在水平方向对齐。...text-align：用于 文本或行内元素的水平方向对齐，一般适用于块级元素中的文本内容，而不是布局中的子元素。 示例对比： 这个示例演示了 align-items 用于垂直居中，align-content 用于多行内容的均匀分布，text-align 用于段落文本的水平居中。...ne-resize、nw-resize、se-resize、sw-resize：表示对角方向调整大小。 **none**：隐藏光标。...例：text-align: center; （文本居中对齐） overflow属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。 值描述visible默认值。
（重点）： 开发中经常会通过 display属性完成元素的显示隐藏切换 display：none；（隐藏）、 display：block；（显示） visibility：hidden 隐藏元素本身，隐藏后的元素还占有位置...display：none 隐藏元素本身，隐藏后的元素不占有位置 ---- 垂直方向居中： 第一种： 第二种：left: 50% 第三种...宽度和margin：0 auto 定位元素 === left: 50% translateX(-50%) 溢出隐藏：overflow 默认值 overflow: visible 溢出部分溢出 overflow...，不能换行） text-overflow: ellipsis;（规定当文本溢出时，显示省略号来代表被修剪的文本） ---- 边框圆角：border-radius 让盒子四个角变圆润 数字+px 、百分比...设置vertical-align: middle ---- 垂直的用法： 文本框和表单按钮无法对齐 input和img无法对齐 div中的文本框，文本框无法贴顶问题 div不设高度由img标签撑开，此时
css也可以调整文本排版方向，是通过什么属性控制的呢？ writing-mode 属性定义了文本在水平或垂直方向上如何排布。...即 top-bottom-right-left vertical-lr：垂直方向内内容从上到下，水平方向从左到右 sideways-rl：内容垂直方向从上到下排列 sideways-lr...倍 } image.png 文本溢出控制 文本溢出处理不管是PC或者是H5，都是非常常见的，非详情页面都会经常用到。...文本溢出处理分为：单行文字溢出 和 多行文字溢出。下面看看具体示例： 单行文字溢出 div class="ellipsis">昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。...div> scss样式 .ellipsis { width: 200px; overflow: hidden; // 溢出隐藏 text-overflow: ellipsis
设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。...# 盒子阴影 语法格式： box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影； 值 说明 h-shadow 必需的。水平阴影的位置。...auto : 超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条 应用:溢出的文字隐藏 .hid-kk...先强制一行内显示文本*/ white-space: nowrap; /*2. 超出的部分隐藏*/ overflow: hidden; /*3....# CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 注意： 1.
垂直方向，水平方向？任何元素，任何时间，任何地点？CSS-Tricks 有篇好文 讲到了各种居中的技巧。 注意： IE11 对 flexbox 的支持有点 bug。...逗号分隔列表 使列表的每项都由逗号分隔： ul > li:not(:last-child)::after { content: ",";} 因最后一项不加逗号，可以使用 :not() 伪类。...固定比例盒子 要创建具有固定比例的一个盒子，所有你需要做的就是给 div 设置一个 padding： .container { height: 0; padding-bottom: 20%; position...与视口宽度无关，子元素的div将保持其宽高比（100％/ 20％= 5:1）。...隐藏没有静音、自动播放的影片 这是一个自定义用户样式表的不错的技巧。避免在加载页面时自动播放。
示例： p { text-indent: 2em; } 效果： 书写模式 CSS 中的书写模式是指文本的排列方向，包括水平、垂直和混合模式。...（用逗号分隔）阴影效果，以增强文本的可读性或创建独特的设计效果。...h-shadow：水平阴影的位置。可以为正值（向右偏移）或负值（向左偏移）。 v-shadow：垂直阴影的位置。可以为正值（向下偏移）或负值（向上偏移）。 blur：可选。...visible：文本不会溢出，会完全显示出来。 hidden：文本溢出时，会被隐藏。 scroll：文本溢出时，会显示滚动条，用户可以滚动文本来查看全部内容。...auto：文本溢出时，会根据元素的宽度和高度来决定是否显示滚动条。
：使用图片来绘制边框 box-shadow 设置元素阴影，设置属性如下： 水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影 其中水平阴影和垂直阴影是必须设置的 背景 新增了几个关于背景的属性...能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色 text-decoration CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置： text-fill-color: 设置文字内部填充颜色...LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。 8. 怎么实现单行、多行文本溢出隐藏？...单行文本溢出 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出用省略号显示 white-space: nowrap...; // 规定段落中的文本不进行换行 多行文本溢出 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; /
参数是visible时候，溢出的内容出现在父元素之外。 参数是hidden时候，溢出隐藏。...43、CSS3文本属性 text-shadow:2px 2px 8px #000;参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色 text-overflow:规定当文本溢出包含元素时发生的事情...如：transform:translateY(20px): 三、缩放scale 缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（...也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1...如transform:scaleY(2): 四、扭曲skew 扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形
，二级菜单显示，鼠标移出一级菜单时，二级菜单隐藏 （1）元素显示使用display:block属性，隐藏使用display:none属性 2、二级菜单显示在一级菜单的右侧 （1）给一级菜单和二级菜单共同的父元素设置相对定位...4、一级菜单的文字和二级菜单的文字垂直居中显示 5、一级菜单的每一项和二级菜单的每一项有下边框，边框为点线（dotted） 6、一级菜单的最后一项和二级菜单的最后一项没有下边框（可以使用li:last-child...，二级菜单隐藏 2、二级菜单显示在一级菜单的右侧 一级菜单 1、一级菜单的文字水平居中显示 2、一级菜单的文字垂直居中显示 3、一级菜单的每一项有下边框，边框为点线（dotted） 4、一级菜单的最后一项没有下边框...二级菜单 1、二级菜单的文字水平居中显示 2、二级菜单的文字垂直居中显示 3、二级菜单的每一项有下边框，边框为点线（dotted） 4、二级菜单的最后一项没有下边框 效果 <!...*/ } ul>li { border-bottom: 1px dotted white; /* 处理文本内容溢出后的情况
语法：倾斜文本内容 倾斜文本内容 7.水平分隔线 语法： 8.上标和下标 语法：上标： 上标 下标： 下标 ※9...作用：无语义标签，主要用来布局和划分板块 语法： div>…div> 三、span 语法： … 作用： a)标签没有固定的格式表现。...); 三、单行文本省略号的设置 四个条件缺一不可： （a）设置固定的宽度 width:value; （b）设置文本强制在一行显示 white-space:nowrap; （c）设置容器溢出隐藏 overflow...eg: border-image-repeat:round stretch; 代表水平方向铺满，垂直方向拉伸 四、文本阴影 语法： text-shadow:水平偏移量 垂直偏移量 模糊度 颜色值; eg...: text-shadow:5px 5px 3px black,8px 8px 5px #999; 注：a) 多组阴影的值用逗号分隔 b) 水平偏移量向右为正，向左为负，垂直偏移量向下为正，向上为负 c
普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略 white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow...class='demo'>这是一段很长的文本div> 实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字 这种实现具有以下优点...：和1结合使用，将对象作为弹性伸缩盒子模型显示 -webkit-box-orient: vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 overflow: hidden：文本溢出限定的宽度就隐藏内容...地址：https://blog.csdn.net/weixin_45822171/article/details/114289990 应用场景 实现元素水平垂直方向的居中，以及在两栏三栏自适应布局中...BFC 内部的块级盒会在垂直方向上一个接一个排列 同一 BFC 下的相邻块级元素可能发生外边距折叠，创建新的 BFC 可以避免外边距折叠 每个元素的外边距盒（margin box）的左边与包含块边框盒（
如何让单行文本在容器内垂直居中 #test { height: 25px; line-height: 25px; } // 只需设置文本的行高...如何使文本溢出边界不换行强制在一行内显示 #test { width: 150px; white-space: nowrap; } // 设置容器的宽度和...; text-overflow: ellipsis; } // 首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow: hidden截断，并以text-overflow...如何让未知尺寸的图片在已知宽高的容器内水平垂直居中 #test { display: table-cell; /* vertical-align只支持内联（inline）元素或表格单元格...class="test"> 以图换字之内容隐藏法 div> // 使用display:none或visibility:hidden将内容隐藏
css3基础 1、本章目标 掌握CSS3设置边框、背景、文本效果 理解并会使用CSS3自定义字体 2、CSS3边框 border-radius 用于创建圆角 border-image 使用图片创建边框...对角线 一个值 ：四个圆角值相同 --> div class="a">adiv> div class="b">bdiv>...class="box">div> 3、box-shadow属性 值 说明 h-shadow 必需，水平阴影的位置，允许负值 v-shadow 必需，垂直阴影的位置...水平方向偏移量 v-shadow：垂直方向偏移量 blur: 模糊度 color:颜色 h-shadow 必需，水平阴影的位置，允许负值 v-shadow 必需，垂直阴影的位置，允许负值 blur 可选...，在同一行继续 overflow:hidden 溢出隐藏 text-overflow:ellipsis 用省略号来代表被修剪的文本 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
