CSS
蓬莱老仙
这个作者很懒,什么都没留下…
展开
-
CSS-滑动门技术
所谓滑动们技术就是元素内容增加时背景图片也跟着变宽(不会变形),不需要设置盒子的宽,不需要修改背景图大小;想要使用滑动门技术图片要足够宽才行<!-- 基本 DOM 结构(其他元素也可以) --><a href="#" class="box"> <span>span</span></a>主要思路:a 标签是行内元素需要转成行内...原创 2019-10-17 10:20:10 · 207 阅读 · 0 评论 -
CSS-文本溢出的显示效果,如何处理溢出的部分,空白部分的处理,如何实现单行文本溢出显示省略号
text-overflowtext-overflow 设置在文本溢出时的显示效果属性值作用clip对溢出的文本进行修剪ellipsis使用使用省略号来显示溢出的文本string使用给定的字符来表示溢出的文本(string 为指定的字符)该样式属性需要与 overflow 结合使用overflowoverflow 设置内容溢出元素时如何处理溢出的部...原创 2019-10-17 09:56:37 · 530 阅读 · 0 评论 -
CSS-如何设置行内元素的垂直对齐方式,清除img标签底部空白缝隙,行高的设置
vertical-align 用于设置行内元素的基线相对于该元素所在行的基线的垂直对齐(设置行内元素和行内块级元素的垂直对齐方式)属性值说明baseline基线对齐,默认值top元素的顶端与行中最高元素的顶端对齐middle把此元素放置在父元素的中部bottom元素的顶端与行中最低的元素的顶端对齐默认基线对齐:.box { backgro...原创 2019-10-16 21:59:38 · 1008 阅读 · 0 评论 -
CSS-如何设置相邻边框合并,设置单元格边框间的间隔,设置空白单元格边框是否显示
在 CSS 中可以通过 border-collapse 样式属性来设置表格的相邻边框是否合并属性值作用separate默认值,边框会被分开,不会忽略 border-spacing 和 empty-cells 样式属性collapse相邻边框会合并成一条单一的边框,边框宽度不变border-spacing 设置相邻单元格边框间的距离,只在边框未合并的情况下有效...原创 2019-10-16 20:31:00 · 4280 阅读 · 0 评论 -
CSS-如何设置元素的宽高用户是否可调
resize 用于规定用户是否可以调整元素的宽高(例如:文本域的宽高)属性值作用none用户无法调整元素的宽高both宽高均可调整horizontal宽度可调vertical高度可调/* 宽高不可调 */textarea:first-child { resize: none;}/* 宽高均可调 */textarea:nth-of-t...原创 2019-10-16 19:37:34 · 237 阅读 · 0 评论 -
CSS-设置或消除边框外围轮廓线
outline 用于设置元素边框外围的轮廓线,是一个综合性的属性,可以设置边框线的颜色、样式和粗细属性:outline-color 设置轮廓线的颜色;属性可以是 颜色单词、十六进制颜色值、rgb 等outline-style 轮廓线的样式;属性值可以是 solid、dashed、dotted 等outline-width 轮廓线的粗细简写形式:outline: outline-co...原创 2019-10-16 18:56:21 · 1961 阅读 · 0 评论 -
CSS-鼠标样式的设置,手形、移动、禁用、文本等
在 CSS 中可以通过 cursor 样式属性来设置光标的样式;比如放在链接上的样式,光标在文本上的样式,移动时的样式等属性值作用default光标样式为一个箭头,是默认的样式pointer手形的鼠标样式move移动时的鼠标样式(四个箭头组成的十字)text文本光标allowed禁止时的样式ul li { width: 200px;...原创 2019-10-16 18:32:19 · 2186 阅读 · 1 评论 -
CSS-设置元素的不透明样式,设置背景半透明效果的几种方法
opacity 用于设置元素的不透明度,属性值的范围 0 到 1 之间;0 表示完全透明,1 表示完全不透明,想要设置半透明的效果将其值设置为 0.5 即可,在实际开发中一般 0 可以省略直接设置为 .5示例:.box { width: 200px; height: 200px; background: skyblue;}<div class="box">内容&l...原创 2019-10-15 11:55:21 · 2707 阅读 · 0 评论 -
CSS-设置元素的堆叠顺序(显示的层级)
堆叠顺序(z-index)在使用定位布局时,可能会出现盒子重叠的情况;加了定位的元素,默认层级会高于普通元素;通过 z-index 层叠等级属性可以调整盒子的堆叠顺序z-index 相关特性该属性的属性值为数值类型是正整数,可以是正数、负数、0、或负整数,不需要加单位默认值为 0数值越大层级越高,值最大的显示在最前面如果属性值相同,后设置的显示在最前面需要注意的是:z-index...原创 2019-10-05 15:03:45 · 6994 阅读 · 0 评论 -
CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解
CSS 提供了三种基本的定位机制:普通流、浮动和定位;通过这三种方式可实现页面的排版布局普通流普通流中的元素的位置由元素在 (X)HTML 中的位置决定块级元素独自占一行,在文本流中从上到下一个接一个地排列行内元素在一行中并排排列,遇到父元素的边沿会换行继续排列浮动浮动会让元素脱离标准文档流,不再占原来的空间,可以让多个块级元素并排显示定位定位是将元素定在某个位置,...原创 2019-10-05 13:32:38 · 2074 阅读 · 0 评论 -
CSS-清除浮动的7种方法详解
在实际的开发过程中很多情况下父级盒子不方便给高度,但是子级元素设置了浮动就不再占有原来的空间,如果父级元素中没有别的子级元素最后父级盒子高度为 零,就会影响下面的标准流盒子的布局;所以为了解决这种问题就要清除元素浮动后带来的影响清除浮动主要是通过 CSS 的 clear 属性,常用的属性值如下:属性值作用left在左侧不允许浮动元素(清除左侧浮动的影响)right...原创 2019-10-04 22:51:16 · 530 阅读 · 0 评论 -
CSS-什么是标准文档流,元素的浮动,浮动元素的特点
在以前浮动多来控制图片,实现文字环绕图片的效果(字围效果);现在主要利用浮动的特性(脱离标准文档流)来实现页面的布局标准文档流:元素在排版布局过程中会默认自动从上往下,从左往右的流式排列;最终页面自上而下分成一行行,并在每行中从左至右的顺序排放元素标准文档流由块级元素和内联元素两类元素组成,在标准文档流中块级元素独自占一行,从上向下的顺序进行排列;行内元素按从左往右的顺序进行排列,遇到父级...原创 2019-10-04 16:44:21 · 976 阅读 · 0 评论 -
CSS-外边距合并问题,相邻块元素的垂直外边距的合并现象,嵌套块元素垂直外边距的合并现象及对应的解决办法
在“标准文档流中” 通过 margin 定义块元素的垂直外边距时,可能会出现外边距的合并现象;合并的情况有两种:一种是相邻块元素垂直外边距的合并,另一种是嵌套块元素垂直外边距的合并相邻块元素的垂直外边距的合并现象当上下相邻的两个块元素都设置外边距(margin),如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top,则他们之间的垂直间距不是 marg...原创 2019-10-03 18:24:35 · 3147 阅读 · 0 评论 -
CSS-盒子内边距产生的问题,指定宽度的盒子水平居中(块级元素),文本、行内元素、行内块级元素水平居中, 如何清除元素的默认边距
内边距产生的问题在标准盒子模型中,如果盒子设置了宽高后再给盒子设置 padding 就会改变原来盒子的大小,解决办法:用设置的宽高值减去对应的 padding 值,再将盒子的宽高设置为计算后的值即可指定宽度的盒子水平居中(块级元素)想要盒子水平居中,首先盒子的宽度必须是已知的(设置了宽度),然后将盒子左右的 margin 值设置为 auto 即可如下的几种写法都可以:margin-le...原创 2019-10-03 17:51:41 · 528 阅读 · 0 评论 -
CSS-盒子模型,标准盒子模型,IE 盒子模型,盒模型之间的转换
我们可以把每一个HTML标记,都看成是一个"盒子";这个"盒子"的特征:内容的宽度(width)或高度(height)、边框线(padding)、内填充(padding)、外边距(margin)。CSS 中 width 指的是内容的宽度,而不是盒子的宽度。同样 height 指的是内容的高度,而不是盒子的高度盒模型组成盒子模型由元素的内容、边框(border)、内边距(padding)、和外...原创 2019-10-03 11:01:27 · 2371 阅读 · 0 评论 -
CSS-列表样式属性的用法,表格样式属性border-collapse的使用
CSS列表属性list-style-typelist-style-type: disc; 用于设置列表项的标记属性值说明disc圆,默认值circle圆环square正方形decimal十进制(有序列表)none无标记对应的属性值有很多但是不常用;在实际开发中,多数情况是祛除列表项的标记list-style-positionl...原创 2019-10-02 20:44:52 · 705 阅读 · 0 评论 -
CSS-基础选择器,标签选择器、id 选择器、类选择器、通配符 *的用法详解
概述想要实现对 HTML 页面中的元素进行一对一,一对多或者多对一的控制,这就需要用到 CSS 选择器;CSS 选择器有很多,大致可分为:基础选择器、组合选择器、伪类选择器和 CSS3 选择器基础选择器标签选择器(就是标签的名字)所有的标签,都可以是选择器。比如 div、span、ul、li、dt、dl、dd、input 等无论这个标签藏的多深,一定能够被选择上标签选择器,...原创 2019-09-28 20:40:52 · 5639 阅读 · 2 评论 -
CSS-高级选择器,后代选择器、交集选择器、并集选择器,伪类选择器的用法详解
常见的高级选择器有后代选择器、交集选择器、并集选择器后代选择器选择器之间用空格隔开就是后代选择器选择的是后代元素,不一定是儿子元素,后代选择器描述的是祖先结构使用规则:外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,再写儿子孙子示例:<div class="box"> <ul> <li> <p>段落<...原创 2019-09-28 23:28:41 · 1189 阅读 · 0 评论 -
CSS-属性选择器的用法详解
属性选择器可以为拥有指定属性的 HTML 元素设置样式;属性选择器通过 [] 来定义,[] 内部为元素的属性el[attr=val] 选择 attr 为 val 的 el 元素/* 选择 div 下的 p 标签的 class 属性值为 blue 的元素 */div p[class="blue"] { background: blue;}<div> <p cl...原创 2019-09-29 18:02:41 · 7175 阅读 · 3 评论 -
CSS-常见的伪元素选择器的用法详解
:before 与 :after 分别在被选择元素的内容之前和内容之后插入元素,所以必须在双标签中使用伪元素选择器,在单标签中无效;使用伪元素选择器时必须要设置 content 属性来指定要插入的内容,若内容为空将其属性值设置为 '' 空字符串即可;通过伪元素选择器插入的内容默认以行内元素的形式显示;想要使其成为块元素,通过样式属性 display 转换即可;为了与伪类选择器进行区分,通常在使用时...原创 2019-09-30 09:25:45 · 904 阅读 · 0 评论 -
CSS-常见字体样式属性的用法详解
CSS 字体属性 fontfont-sizefont-size: 16px; font(字体),size(大小),用于设置文字的大小;值为数值型,单位有绝对长度单位也有相对长度单位相对长度单位单位说明px像素,是一个确定的长度单位,大小为固定的值,常用的单位em相对于父级元素的字体大小倍数,例如2em表示设置为父级的2倍大小rem相对根元素(html)的...原创 2019-09-30 18:06:40 · 968 阅读 · 0 评论 -
CSS-常见外观(文本)样式属性的用法汇总
colorcolor: #f00; 用于设置文本的颜色属性值描述color_name颜色名称,例如:red、green、yellow 等hex_number十六进制的颜色值,例如:#ff0000、#00ff00、#0000ff 等rgb_number通过 rgb 代码表示的颜色,可以是具体值也可以用百分比,例如: rgb(255,0,0) 或 rgb(10...原创 2019-09-30 19:05:16 · 1343 阅读 · 0 评论 -
CSS-标签的显示模式,块级元素特点、行内元素特点、行内块级元素的特点,块元素、行内元素、行内块元素之间的转换
HTML 中的标签分为三种:块级元素、行内元素、行内块级元素;通过 CSS 中的样式属性 display 可转换元素的显示模式块级元素(block-level)块级元素独占一行,可以设置宽、高、对齐等属性,如果不设置宽度块级元素的宽度默认为浏览窗口的宽度(父级元素宽度的 100%);块级元素在实际开发中多用于网页的排版布局%常见的块元素:<h1>~<h6>、<...原创 2019-09-30 21:37:27 · 373 阅读 · 0 评论 -
CSS-综合样式属性,背景样式属性的使用详解
background 属性用于给元素添加背景,可以是背景色,也可以是背景图background 属性是一个系列属性(综合属性),可以单独设置某个属性也可以综合性的设置;常见的属性有:background-color 背景颜色background-image 背景图片background-repeat 背景图像是否重复background-position 背景图像位置backgrou...原创 2019-10-01 12:24:02 · 890 阅读 · 0 评论 -
CSS-常见的伪类选择器的用法详解
:first-child:first-child 相对于父级元素做参考,选择所有子元素中的第一个子元素,第一个子元素必须是规定的元素类型,如果不是则不会被选择示例:<dl> <dt>我的颜色</dt> <dd>颜色</dd> <dd>颜色</dd> <dt>我的颜色</dt>...原创 2019-10-01 20:31:53 · 613 阅读 · 0 评论 -
CSS-三大特性,CSS层叠性、CSS继承性和CSS优先级,权重的计算,!important 的用法详解
CSS 层叠性所谓层叠性是指多种CSS样式的叠加,当一个元素设置了多个相同的样式属性,一个属性就会覆盖另外一个属性这是浏览器处理冲突的一种能力,如果一个元素通过多个相同选择器设置了相同的样式属性,那么这个时候一个属性就会将另一个属性层叠掉(覆盖掉)层叠性主要遵循的是就近原则,在不考虑优先级的情况下,在多个样式属性中最终生效的样式是离标签最近的只要样式不冲突就不会进行层叠;当一个元素被多个...原创 2019-10-02 13:23:35 · 515 阅读 · 0 评论 -
CSS-综合样式属性,边框样式属性的用法详解
border 样式属性用于设置元素的边框,属于综合属性,可以单独设置边框的某一类样式也可以进行综合设置边框的样式组成:border-width 设置边框粗细;常用的属性值为像素(px)border-style 设置边框线型属性值描述solid实线dashed虚线dotted点状线border-color 设置边框颜色;属性值可以是 颜...原创 2019-10-02 16:09:11 · 3121 阅读 · 0 评论 -
CSS-区块属性,宽、高、内边距、外边距样式属性的使用详解
CSS 区块属性width、height设置元素宽高width 设置元素的宽度height 设置元素的高度单位可以是 px 、%(相对于父级元素的宽高的百分比)、autopadding设置元素内填充,元素的边沿到内容之间的距离;该样式属性是一个综合属性,可以统一设置也可以单独设置padding 该样式属性有 1 到 4 个值;不同个数的值有着不同的作用...原创 2019-10-02 17:14:40 · 1701 阅读 · 0 评论 -
CSS-初识cs 层叠样式表,引入样式的三种方式
概述Cascading(级联) Style(样式) Sheets(工作表) 层叠样式表;CSS 负责页面样式,属于网页中的样式层;CSS 规则是由“选择器” 和 “格式语句” 组成,通过 “选择器” 查找页面中指定的 HTML 元素,结合 “格式语句” 来控制元素的样式;所谓的 “格式语句” 就是CSS的属性,CSS的属性有很多类别,例如:尺寸、文本、背景、边框等;目前 CSS 的最新版本是 c...原创 2019-09-28 10:22:32 · 1036 阅读 · 0 评论