CSS
CSS自学笔记
纯情小码哥
越努力,越秃飞猛进,就能猥琐欲为!
展开
-
伸缩布局(CSS3)
伸缩布局(CSS3)CSS3在布局方面做了非常大的改进,使得对块级元素的布局变得十分灵活,适应性非常强,其强大的伸缩性,在响应式中可以发挥极大的作用。主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向。侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向 的。方向:默认主轴从左向右,侧轴默认从上到下;主轴和侧轴并不是固定不变的,通过flex-direction可以互换;Flex布...原创 2019-10-26 11:36:08 · 172 阅读 · 0 评论 -
3D动画(CSS3)-animation
3D动画(CSS3)-animation动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果;通过CSS3,我们能够创建动画,这可以在许多页面中取代动画图片、Flash动画以及JavaScript。第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形(...原创 2019-10-26 08:46:16 · 48133 阅读 · 0 评论 -
3D效果(backface-visibility)
backface-visibility:visible|hidden;说明:定义元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时,该属性很有用。visible:为backface-visibility的默认值,表示反面可见hidden:表示反面不可见代码如下:<!DOCTYPE html><html lang="en"><he...原创 2019-10-20 11:37:33 · 589 阅读 · 0 评论 -
3D变形-移动
3D变形-移动transform: translateZ()数值越大,越靠近人的眼睛。与perspective一起使用才有效果translateZ()为元素到屏蔽的距离,而perspective为眼睛到屏幕的距离;还可以简写成:transform: translate3d(x,y,z);代码如下:<!DOCTYPE html><html lang="en...原创 2019-10-20 11:15:24 · 179 阅读 · 0 评论 -
透视(perspective)
透视(perspective)电脑显示屏是一个2D平面,图像之所以具有3D效果,其实只是一种视觉呈现,通过透视可以实现此目的。透视可以将一个2D平面,在转换的过程当中,呈现3D效果。透视原理:近大远小浏览器透视:把近大远小的所有图像,秀视在屏幕上。perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置;注:1、并非任何情况下需要透视效果,根据开发需要...原创 2019-10-20 10:29:13 · 1781 阅读 · 0 评论 -
3D变形(CSS3)transform-旋转
3D变形(CSS3)transform-旋转坐标:X左边是负的,右边是正的Y上面是负的,下面是正的Z里面是负的,外面是正的3D旋转transform: rotateX()|rotateY()|rotateZ()代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset=...原创 2019-10-20 10:11:01 · 228 阅读 · 0 评论 -
2D变形(CSS3)transform
2D变形(CSS3)transformtransform是CSS3中具有颠覆性的特征之一,可以实现元素的位移translate、旋转ratate、倾斜skew、缩放scale,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。变translate移动translate(x,y)水平方向和垂直方向同时移动translateX(x)仅水平方向...原创 2019-10-20 09:43:42 · 330 阅读 · 0 评论 -
过渡(CSS3)
过渡(CSS3)过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash动画或JavaSctript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。transition:要过渡的属性 花费时间 运动曲线 何时开始;如果有多组属性变化,用逗号隔开;transition-property:规定应用过渡的CSS属性的名称transition-dura...原创 2019-10-19 21:46:30 · 188 阅读 · 0 评论 -
before和after伪元素(详解)
before和after伪元素(详解)之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用如页面元素一样的CSS样式,表面上看上去貌似是页面的某些元素来展现,实际上CSS样式展现的行为,因此被称为伪元素。是伪元素在html代码机构中的展现,可以看出伪元素的结构法法审查;注意:1、伪元素:before和:afte...原创 2019-10-19 21:19:37 · 1772 阅读 · 1 评论 -
滑动门
滑动门为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。最常见于各种导航栏的滑动门;核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏;一般布局是:<li> <a href="#">...原创 2019-10-19 21:18:18 · 188 阅读 · 0 评论 -
字体图标
字体图标优点:1、可以做出跟图片一样可以做的事情,改变透明度、旋转度等2、但是本质其实是文字,可以很随意改变颜色、产生阴影、透明效果等等;3、本身体积小,但携带的信息并没有消减4、几乎支持所有的浏览器5、移动端设备必备良药;svg格式的iconfont.cn里面有很多小图标,可以去里面去查找;icomoon.io网站也可以;操作步骤:1、在样式里面声明字体@font-f...原创 2019-10-19 20:21:26 · 131 阅读 · 0 评论 -
CSS用户界面样式(高级)
CSS用户界面样式(高级)界面样式,就是更改用户操作样式,比如:更改用户的鼠标样式,表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此就放弃了,防止表单域拖拽。鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。cursor: default 小白| pointer 小手| move 移动 | text 文本轮廓outline是绘制于元素周围的一...原创 2019-10-19 09:49:49 · 487 阅读 · 0 评论 -
元素的显示与隐藏(display、visibility、overflow比较)
元素的显示与隐藏(display、visibility、overflow比较)在CSS中有三个显示和隐藏的单词比较常见,分别是display visibility 和overflow他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。最常见的是网站广告,当我们点击类似关闭不见了,但是重新刷新页面,它们又会出现。display 显示display:设置或检索对象是否显示。dis...原创 2019-10-13 19:35:38 · 741 阅读 · 0 评论 -
叠放次序(z-index)
叠放次序(z-index)当对多个元素同时设置定位时,定位元素之间有可能会发生重叠在CSS中,要想调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数、负整数和0。注意:1、z-index的默认属性值为0,取值越大,定位元素在层叠元素中越居上。2、如果取值相同,则根据书写顺序,后来居上3、后面数字一定不能加单位4、只有相对定位、绝对定位、固定定...原创 2019-10-13 10:58:23 · 1695 阅读 · 0 评论 -
固定定位fixed
固定定位fixed固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。当对元素设置固定定位后,它将脱离标准流的控制,始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化,该元素都会始终显示在浏览器窗口的固定位置。固定定位有两点:1、固定定位的元素跟...原创 2019-10-13 09:44:49 · 1553 阅读 · 0 评论 -
绝对定位的盒子水平、垂直居中
绝对定位的盒子水平、垂直居中普通的盒子是左右margin改为auto就可以,但是对于绝对定位就无效了。定位的盒子也可以水平或者垂直居中,有一个算法。1、首先left50%2、然后走自己外边距负的一半值就可以了。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2019-10-13 09:02:25 · 381 阅读 · 0 评论 -
元素的定位属性
元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。1、边偏移top:项端偏移,定义元素相对其父元素上边线的距离bottom:底部偏移,定义元素相对其父元素下边线的距离left:左侧偏移,定义元素相对其父元素左边线的距离right:右侧偏移,定义元素相对其父元素右边线的距离2、定位模式(定位的分类)在CSS中,position属性用于定义元素的定位模式,其基本语法格式如下...原创 2019-10-13 19:21:19 · 2081 阅读 · 0 评论 -
标签选择器(元素选择器)
标签选择器(元素选择器)标签器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。代码如下:<!DOCTYPE html><...原创 2019-10-03 11:19:27 · 9275 阅读 · 0 评论 -
内边距(padding)
内边距(padding)指的是内容至边框的距离。padding属性用于设置内边距,是指边框与内容之间的距离padding-top: 上内边距padding-right: 右内边距padding-bottom: 下内边距padding-left:左内边距记得padding的值,并没有算在内容高度与宽度内,而是在内容的基础上进行叠加的.代码如下:<!DOCTYPE ht...原创 2019-10-06 11:11:09 · 2150 阅读 · 0 评论 -
外边距(margin)
外边距(margin)margin属性用于设置外边距。设置外边距会在元素之间创建“空白”,这段空白通常不能放置其他内容。margin-top: 上外边距margin-right: 右外边距margin-buttom: 下外边距margin-left: 左外边距margin: 上外边距 右外边距 下外边距 左外边距外边距实现盒子居中可以让一个盒子实现水平居中,需要满足两个条件:1...原创 2019-10-06 11:11:17 · 6910 阅读 · 0 评论 -
content宽度和高度
content宽度和高度使用宽度属性width和高度属性height可以对盒子的大小进行控制width和height的属性值可以为不同单位的数值或相对于父元素的百分比%,实际工作中最常用的是像素值.大多数浏览器,如Firefox/IE6及以上版本都采用了W3C规范,符合CSS规范的盒子模型的总宽度的计算原则是:/* 外盒尺寸计算(元素空间尺寸) */Element空间高度 = conte...原创 2019-10-06 11:11:23 · 621 阅读 · 0 评论 -
盒子模型的稳定性
盒子模型的稳定性按照优先使用 宽度(width) 其实使用内边距(padding) 再次使用外边距(margin)width > padding > margin原因:1、margin会有外边距合并,还在IE6下面margin加倍的bug,所以最后用。2、padding会影响盒子大小,需要进行加减运算,其次麻烦3、width没有什么,经学使用宽度剩余法,高度剩余法来做。...原创 2019-10-06 11:11:39 · 191 阅读 · 0 评论 -
盒子阴影
盒子阴影box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内、外阴影;h-shadow:必需。水平阴影的位置,允许负值v-shadow:必需。垂直阴影的位置,允许负值blur:可选。模糊距离spread:可选。阴影尺寸color:可选。颜色inset:可选。将外部阴影改为内部阴影1)前两个属性必须写,其余可选。2)外阴影(outset)但是不能写,默认,想...原创 2019-10-06 11:11:46 · 114 阅读 · 0 评论 -
浮动
浮动指设置了浮动属性的元素会脱离文档流的控制,移动到其父元素中指定位置的过程。语法:选择器 {float: 属性值;}说明:left:元素向左浮动right:元素向右浮动none:元素不浮动(默认值)浮动特性浮动脱离文档流,不占位置,会影响文档流,浮动只有左右浮动。浮动首先创建包含块的概念,浮动元素总是找它最近的父级元素对齐,但是不会超出内边距的范围。浮动的元素排列位置,...原创 2019-10-06 11:11:54 · 264 阅读 · 0 评论 -
布局流程
布局流程为了提高网页制作的效率,布局时通常需要遵守一定的布局流程,具体如下:1)确定页面的版心(可视区)2)分析页面的行模块,以及每个行模块中的列模块.3)制作HTML结构.4)CSS初始化,然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块....原创 2019-10-06 11:12:00 · 326 阅读 · 0 评论 -
清除浮动
清除浮动目的:由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动,准确来说,是清除浮动后造成的影响.清除浮动的本质清除浮动主要为了解决父元素因为子级浮动引起内部高度为0的问题.原因:浮动元素是不占有位置的,如果父级元素没有高度的话,就会引起高度塌陷;在CSS,clear属性用于清除浮动,其基本语法格式如下:选择器 ...原创 2019-10-06 11:12:07 · 922 阅读 · 0 评论 -
PS工具的使用
PS工具的使用要求:1)会简单的抠图2)会简单的修改PSD效果图3)熟练的切图4)与设计师/美工沟通1)按拖拽工具,可以将其他的图片拖拽到另一个图片里面去.2)ctrl+T可以改变图像的大小.变换过程中,按住shirt键,可以等比例缩放,且鼠标移到外面,还可以将图片旋转;按回车就确认操作.图层快捷方式:F7将图层分组:选中图层,按CTRL+G取消分组:ctrl+shirt...原创 2019-10-08 08:14:20 · 148 阅读 · 0 评论 -
PS工具的使用
PS工具的使用要求:1)会简单的抠图2)会简单的修改PSD效果图3)熟练的切图4)与设计师/美工沟通1)按拖拽工具,可以将其他的图片拖拽到另一个图片里面去.2)ctrl+T可以改变图像的大小.变换过程中,按住shirt键,可以等比例缩放,且鼠标移到外面,还可以将图片旋转;按回车就确认操作.图层快捷方式:F7将图层分组:选中图层,按CTRL+G取消分组:ctrl+shirt...原创 2019-10-08 08:14:35 · 257 阅读 · 1 评论 -
圆角边框(CSS3)
圆角边框(CSS3)border-radius:左上角 右上角 左下角 右下角代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css...原创 2019-10-06 11:11:03 · 269 阅读 · 0 评论 -
表格的细线边框
表格的细线边框table {border-collapse:collapse;}collapse是合并的意思,即将边框合并在一起;代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title&g...原创 2019-10-06 11:10:52 · 424 阅读 · 0 评论 -
盒子模型(CSS重点)-盒子边框(border)
盒子模型(CSS重点)-盒子边框(border)其实,CSS就三个大模块,盒子模型、浮动、定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边框(margin)组成。border: border-width||borde...原创 2019-10-05 07:47:47 · 8162 阅读 · 0 评论 -
伪类选择器-链接伪类选择器
伪类选择器-链接伪类选择器伪类选择器用于向某些选择器增加特殊的效果,比如给链接增加特殊效果,比如可以选择第1个,第n个元素;为了和[链接伪类选择器]语法::link {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}:visited {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}:hover {属性1:属性值1; 属性2:属性值2;...原创 2019-10-04 08:45:59 · 587 阅读 · 0 评论 -
通配符选择器
通配符选择器语法:* {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}注意:这个范围太广了,不经常用的;通常用得多的是(先了解):* { margin: 0; padding: 0;}代码如下:<!DOCTYPE html><html lang="en"><...原创 2019-10-04 08:45:53 · 1698 阅读 · 0 评论 -
ID选择器
ID选择器语法:#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}标签调用的时候用: id = "id名"类选择器与ID选择器的区别:类选择是可以重复多次使用的,id只能使用一次.代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="...原创 2019-10-04 08:45:46 · 2101 阅读 · 1 评论 -
多类名选择器
多类名选择器语法:.类名1 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}.类名2 {属性4:属性值4; 属性5:属性值5; 属性6:属性值6; ......}标签调用的时候用: class = "类名1 类名2"注意:1)样式显示效果跟HTML元素中的类名先后顺序没有关系,爱CSS样式书写的上下顺序有关.2)各个类名中间用空格隔开.多类名选择器在后期布...原创 2019-10-04 08:45:39 · 1877 阅读 · 0 评论 -
谷歌字母案例
谷歌字母案例代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span{ font-size: 32px;...原创 2019-10-03 11:19:37 · 186 阅读 · 0 评论 -
类选择器
类选择器类选择器使用"."(英文点号)进行标识,后面紧跟类名,其基本语法格式 如下:.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}标签调用的时候用: class = "类名"小技巧:1、长名称或词组可以使用中横线来为选择器命名。2、不建议使用“_”下划线命名CSS选择器;(1)输入的时候少按一个shirt键(2)浏览器兼容问题(比如使用_ti...原创 2019-10-04 08:45:28 · 2726 阅读 · 2 评论 -
选择器(重点)
要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)一个写不完,分页写不同种类的选择器;...原创 2019-10-03 11:19:14 · 109 阅读 · 0 评论 -
开发者工具
开发者工具:使用F12或者Ctrl+Shirt+i打开开发者工具说明:1)先检查HTML的结构是不是对的,再检查样式有没有问题2)Ctrl+滚轮,可以放大开发者工具代码大小3)左边是HTML元素结构,右边是CSS样式4)右边CSS样式可以改动数值和颜色查看更改后效果;代码如下:<!DOCTYPE html><html lang="en"><h...原创 2019-10-03 11:18:58 · 241 阅读 · 0 评论 -
font:综合设置字体样式(重点)
font:综合设置字体样式(重点)语法:选择器 {font:font-style font-weight font-size/line-height font-family;}说明:1)使用font属性时,必须按上面语法的顺序书写,不能更换顺序,各个属性以空格隔开2)注意:其中不需要设置的属性可以省略,取默认值,但必须保留font-size和font-family属性,否则将不起作用;...原创 2019-10-03 11:18:48 · 2923 阅读 · 0 评论