CSS样式表
关注
分享
扫一扫
极客研究者
空余时间喜欢研究、钻研技术,入行不久的一枚菜鸟
展开
-
Select下拉菜单选中后,文本居中显示
select { text-align: center; text-align-last: center; }亲测可用原创 2020-06-05 15:00:47 · 1154 阅读 · 0 评论 -
CSS之过渡效果的实现
过渡:transition指定一个属性发生变化时的切换方式可以通过过渡创建一些非常好的效果,提上用户的体验transition-property:指定指向过渡的属性多个属性之间用逗号隔开如果所有属性都需要过渡,则使用关键字all大部分属性都支持过渡效果,注意过渡时必须是:从一个有效值向另外一个有效值进行过渡(auto不行)<!DOCTYPE html><html...原创 2020-04-17 11:11:25 · 343 阅读 · 0 评论 -
CSS之缩放
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2020-04-17 11:06:48 · 804 阅读 · 0 评论 -
CSS之变形平移(2)
Z轴平移:Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2020-04-17 11:04:27 · 147 阅读 · 0 评论 -
CSS之变形平移(1)
变形:指的是通过CSS来改变元素的形状和位置变形不会影响页面的布局transform用来设置元素的变形效果平移:translateX() 沿着X轴方向平移translateY() 沿着Y轴方向平移translateZ() 沿着Z轴方向平移平移元素- 百分比:相对于自身进行计算的比如自身的宽度、高度移动元素自己本身,而不会影响其他元素Demo:<!DOCTYPE h...原创 2020-04-17 11:01:44 · 409 阅读 · 0 评论 -
CSS之文本的水平和垂直对齐
Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2020-04-17 10:42:05 · 806 阅读 · 0 评论 -
CSS之行高
line-height:文字占有的实际高度通过使用line-height属性,设置的行高(在块元素中,可以通过行高撑起高度)行高可以直接设置一个大小(px、em)如果是一个整数的话,行高将是字体尺寸乘以数字字体框：就是字体存在的格子,设置font-size实际上就是设置字体框的高度行高会在字体框的上下平均分配可以将行高设置和高度一样,使得单个文字在一个元素中垂直居中<!DOCT...原创 2020-04-17 10:19:54 · 342 阅读 · 0 评论 -
CSS之通过伪元素添加图标字体
这里使用的是Font Awesome图标字体库通过伪元素设置图标字体：1.找到要设置图标的元素通过before或after选中2.在content中设置字体的编码3.设置字体的样式fab:font-family: ‘Font Awesome 5 Brands’fa,fas:font-family: ‘Font Awesome 5 Free’;font-weight: 900;D...原创 2020-04-17 10:17:06 · 2235 阅读 · 0 评论 -
字体族
设置字体常用属性:color:字体的颜色font-size:字体的大小font-family:字体族(字体的格式)serif:衬线字体sans-serif:非衬线字体monospace等宽字体-指定字体的类别,浏览器会自动使用该类别下的字体font-family:可以同时指定多个字体,多个字体之间用逗号隔开字体生效时优先使用第一个,第一个无法使用则使用第二个,以此类推.京东使用...原创 2020-04-17 10:11:54 · 513 阅读 · 0 评论 -
CSS之元素的层次问题
对于开启定位的元素,可以通过z-index属性指定元素的层级z-index需要一个整数作为参数,数值越大层级越高元素的层级越高,则越优先显示如果元素的层级一样(开启定位的元素,默认层级一样),则优先显示靠下的元素祖先元素的层级再高也不会覆盖后代的元素...原创 2020-04-17 10:07:35 · 375 阅读 · 0 评论 -
CSS之绝对定位的位置以及子元素在父容器的居中显示
元素开启了绝对定位:水平布局：left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的宽度此时规则和之前一样,只是多了left和right这两个值当发生过度约束:如果9个值没有auto,则自动调整right值以使等式成立如果有auto,则自动调整...原创 2020-04-17 10:04:22 · 2133 阅读 · 0 评论 -
CSS之粘滞定位
粘滞定位:当元素的position属性设置为sticky,则开启了粘滞定位和相对定位的特点基本一致不同的是粘滞定位可以在元素到达某个位置时将其固定,不随滚动条滚动而滚动相对于body元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...原创 2020-04-17 09:55:45 · 1547 阅读 · 0 评论 -
CSS之固定定位
固定定位:将元素的position属性设置为fixed,固定定位也是一种绝对定位,大部分性质和绝对定位一样唯一不同点:固定定位永远参照于浏览器窗口进行定位固定定位的元素不会随着滚动条的滚动而滚动(固定在某一位置)Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...原创 2020-04-17 09:50:32 · 1296 阅读 · 0 评论 -
CSS之绝对定位
绝对定位：当元素的position属性设置为absolute后,则元素将开启绝对定位绝对定位的特点:1.开启绝对定位的元素,如果不设置元素的偏移量元素将不会发生变化2.开启绝对定位后,元素将从文档流中脱离出来3.绝对定位会改变元素的性质,行内变成块,块的高度被内容撑开4.绝对定位会使元素提升一次层次5.绝对定位是相对于包含块进行定位的包含块：默认情况下,是离当前元素最近的祖先块元素...原创 2020-04-17 09:47:01 · 248 阅读 · 0 评论 -
CSS之定位-相对定位
定位：定位是一种更高级的布局手段通过定位可以将元素摆放到任意位置使用position属性设置定位可选值:static:默认值(未开启定位)relative:开启元素的相对定位absolute:开启元素的绝对定位fixed:开启元素的固定定位sticky:开启元素的粘滞定位相对定位:当元素的属性position设置为relative时,则元素开启了相对定位(相对于原先位置)相对定...原创 2020-04-17 09:43:25 · 1300 阅读 · 0 评论 -
CSS之解决父子外边距重叠和高度坍塌的问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2020-04-17 09:36:17 · 343 阅读 · 0 评论 -
CSS之高度坍塌的最终解决方案
解决高度坍塌的方法:通过在浮动元素的末尾添加一个空元素,设置clear:both属性浏览器会给该元素添加上下外边框,使其撑起父元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...原创 2020-04-17 09:09:28 · 204 阅读 · 0 评论 -
CSS之Clear属性
元素的clear属性:box1向左浮动,脱离文档流(不再占用位置),box2将自动向上移动,位置发生了改变如果不想让下边的元素的位置发生改变为了解决这个问题:可以设置元素的clear属性:清除浮动元素对当前元素的位置的影响clear:作用:清除浮动元素对当前元素的影响可选值；left:清除左侧浮动元素对当前元素的影响right:清除右侧浮动元素对当前元素的影响both:清除左/...原创 2020-04-17 09:04:34 · 619 阅读 · 0 评论 -
CSS之高度坍塌问题
前提:存在块元素的嵌套,不设置父元素的高度,高度应由子元素撑开,动态变化高度坍塌的问题:在浮动布局中,父元素的高度默认是被子元素撑开的,当子元素浮动后,会完全从文档流中脱,会无法撑起父元素的高度,导致父元素高度的丢失父元素高度的丢失之后,其下的元素会自动向上移动,导致页面布局混乱,这个问题必须解决。解决方法:BFC():块级格式化环境BFC是CSS中的一个隐含的属性,可以为一个元素...原创 2020-04-17 08:40:28 · 120 阅读 · 0 评论 -
网页的简单布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-04-17 00:35:30 · 215 阅读 · 0 评论 -
CSS之浮动
float浮动：通过浮动可以使得一个元素在父元素中向左侧或右侧移动使用flaot属性设置元素的浮动可选值:none:默认值(元素不浮动)left:元素向左移动right:元素向右移动注意:元素浮动之后,水平方向将不再需要满足等式的成立元素设置浮动之后,会从文档流中脱离,不占用文档流的位置所以下边还在文档流中的元素会自动向上移动如果不设置,右边会自动设置margin-right(右...原创 2020-04-17 00:33:38 · 185 阅读 · 0 评论 -
CSS之轮廓和阴影效果
**outline:**为元素添加轮廓格式和border一样轮廓和边框不同点在于:轮廓不会影响可见框大小box-shadow属性：用来设置元素的阴影效果,不会影响页面的布局第一个值:水平偏移量 设置阴影的水平位置 正值向右移动,负值向左移动第二个值:垂直偏移量 设置阴影的垂直位置 正值向下移动,负值向上移动第三个值:阴影的模糊半径第四个值:设置阴影的颜色border-radius:...原创 2020-04-17 00:28:23 · 932 阅读 · 0 评论 -
CSS盒子的尺寸
盒子的尺寸:使用box-sizing属性：值:content-box:默认值,为元素设置的宽高即内容区的大小border-box:设置的是可见框的大小–>内容区、内边距、以及边框的总大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...原创 2020-04-17 00:24:30 · 637 阅读 · 0 评论 -
浏览器的默认样式
默认样式：浏览器都会为元素设置默认样式默认样式的存在会影响网页的布局通常情况下,编写网页时应首先去除默认样式Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de...原创 2020-04-17 00:21:47 · 193 阅读 · 0 评论 -
行内元素的盒模型
行内元素的盒模型:行内元素不支持设置宽和高由内容区决定行内元素可以设置padding,垂直方向的padding不会影响页面的布局可以设置border垂直方向的border不会影响页面的布局可以设置margin垂直方向的margin不会影响页面的布局display:用来设置元素的类型inline:将元素设置为行内元素block:将元素设置为块元素inline-block:将元素设置...原创 2020-04-17 00:19:48 · 454 阅读 · 0 评论 -
CSS之外边距的重叠问题
垂直外边距的重叠:相邻的垂直方向的外边距会发生重叠现象兄弟元素:兄弟元素之间的相邻垂直方向的外边距会取两者之间的最大值特殊情况:一正一负,取两者和都为负,取绝对值最大的一边父子元素:父子元素间的相邻外边距,子元素的会传递给父元素(上外边距)父子元素的外边距的重叠会影响页面的布局,需要进行处理解决方案:1.不使用外边距,采取在父元素中,使用内边距padding-left,然后...原创 2020-04-17 00:13:42 · 232 阅读 · 0 评论 -
CSS之元素的水平方向的布局
元素水平方向的布局:margin-left:border-leftpadding-left:width:padding-rightborder-rightmargin-right一个元素在其父元素中水平布局必须满足下面的等式:margin-left+border-left+padding-left+width+border-right+padding-right+margin-r...原创 2020-04-16 22:45:19 · 603 阅读 · 0 评论 -
CSS盒子模型之外边距
外边距:不会影响盒子的大小,但会影响盒子的位置margin-top:上边距,设置一个正值,元素会向下移动margin-left:左边距,设置一个正值,元素会向右移动margin-right:右边距,设置一个正值,下面的元素会向右移动margin-bottom:下边距,设置一个正值,下面的元素会向下移动元素在页面中是按照自左向右进行排列的默认情况下,我们设置左和上外边距将移动自身...原创 2020-04-16 22:21:01 · 354 阅读 · 0 评论 -
CSS盒子模型之内边距
内边距:内边距的设置会影响盒子的大小盒子的可见大小由内容区(content)、内边距(padding)、边框(border)三部分组成计算盒子的大小,需要将这三部分累加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi...原创 2020-04-16 22:18:06 · 205 阅读 · 0 评论 -
CSS盒子模型之边框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2020-04-16 22:16:27 · 154 阅读 · 0 评论 -
CSS之盒子模型(1)
盒子模型:CSS将页面中的每个元素都设置为一个盒子将元素设置为盒子后,对页面的布局就变成了把不同的盒子放到不同的位置盒子的组成:内容区(content):内边距(padding):边框(border):外边距(margin):内容区:元素中的所有子元素和文本内容都在内容区排列内容区的大小由width和height两个属性组成width:内容区的宽度height:内容区的高度...原创 2020-04-16 22:12:50 · 196 阅读 · 0 评论 -
CSS之文档流
文档流:网页是一个多层的结构,一层叠一层通过CSS可以为每层设置样式作为用户来说,只能看到最顶层我们所创建的元素都在文档流中进行排序元素主要有两种状态:1.在文档流中2.在文档流中(脱离文档流)元素在文档流中的特点:1.块元素:会在页面中独占一行默认宽度是父元素的全部(会把父元素充满)2.行内元素:不会独占一行,一行满了自动换行行内元素的默认宽度和高度都是被内容撑开Dem...原创 2020-04-16 21:54:35 · 156 阅读 · 0 评论 -
CSS之选择器的优先级问题
样式的冲突:当多个选择器对同一元素进行样式的控制发生样式的冲突时,选择哪个样式是由选择器的优先级决定的选择器的优先级:内联样式>id选择器>class选择器和伪类选择器>元素选择器内联样式:1000id选择器:100class选择器和伪类选择器:110元素选择器:1注意:在比较优先级时,会对所有选择器的优先级进行累加计算,优先级越高,则优先显示选择器的累加不会超过...原创 2020-04-16 21:51:00 · 200 阅读 · 0 评论 -
CSS之选择器(6)
链接的伪类选择器:link:表示没有被访问过的连接(正常的链接)visited:被访问过的链接(由于隐私问题,只能用来改变颜色)hover:鼠标移入的链接active:鼠标点击时触发<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...原创 2020-04-16 21:45:16 · 123 阅读 · 0 评论 -
CSS之选择器(5)
伪类选择器:first-child:获取元素的第一个子元素last-child:获取元素的最后一个子元素nth-child(n):获取元素的第n个子元素(n从1开始)特殊值:n 第n个: n:1~正无穷大2n或者even：表示选择偶数位的元素2n+1或odd :表示选择奇数位的元素first-of-type:选择一个上级元素下的第一个同类子元素；last-of-type:择一个上...原创 2020-04-16 21:42:33 · 281 阅读 · 0 评论 -
CSS选择器(4)
属性选择器：[属性名]:选择具有指定属性名的元素[属性名:属性值]:选择具有指定属性名和属性值的元素[属性名^=属性值]:选择以指定属性值开头的元素[属性名$=属性值]:选择以指定属性值结尾的元素[属性名*=属性值]:选择属性值包含某个值的元素Demo:<!DOCTYPE html><html lang="en"><head> <...原创 2020-04-16 21:28:05 · 92 阅读 · 0 评论 -
CSS选择器(3)
父元素:直接包含子元素的元素子元素:直接被父元素包含的元素祖先元素：直接或间接包含后代元素的元素一个元素的父元素也是祖先元素后代元素:直接被祖先元素包含的元素子元素也是后代元素兄弟元素：拥有相同的父元素的元素子元素选择器: 父元素 > 子元素(必须是位于父元素的直接后面):获取父元素下的所有直接子元素(不包括后代元素)后代选择器:父元素 子元素: 获取父元素下的所...原创 2020-04-16 21:24:37 · 106 阅读 · 0 评论 -
CSS之选择器(2)
元素选择器:使用标签名获取指定的元素:标签名{}id选择器:使用id属性值获取指定的元素:#id属性值{}(唯一)class选择器:使用class属性值获取指定的元素(一个或多个元素):.class属性值{}(可重复), 可以为一个class指定多个属性值。通配选择器:获取页面中的所有元素 : *{}交集选择器:选中同时复合多个条件的元素选择器1选择器2选择器3…选择器n注意:如果有...原创 2020-04-16 21:20:29 · 133 阅读 · 0 评论 -
CSS之选择器(1)
CSS选择器:通过选择器可以获取页面中指定的元素基本语法:选择器 声明块声明块:指定元素的样式声明由一键值对组成Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...原创 2020-04-16 21:17:11 · 82 阅读 · 0 评论