![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 73
~往无前
这个作者很懒,什么都没留下…
展开
-
CSS小技巧
一、多行文字的垂直居中1.单行实现垂直居中<style> .item{ width: 90px; height: 50px; border: 1px solid orange; margin-bottom: 5px; text-align: center; line-height: 50px; } .item .text{ font-size: 12px; }</style><body>原创 2021-07-12 06:32:10 · 139 阅读 · 0 评论 -
CSS清除浮动的方法及原理
一、为什么清除浮动1.浮动的缺点:浮动虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的“副作用”。一个元素设置了浮动(即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值)的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷,下面对这两个问题展开说明。1.1对兄弟元素的影响分为以下两种情况:若兄弟元素是块级元素且设置了高度的:上级元素设置了浮动,从而脱离了标准文档流,所以此时该兄弟元素只能补位上去,从而出现被上级元素覆转载 2021-06-02 19:56:58 · 269 阅读 · 0 评论 -
前端第十课--表单
前端第十课–表单**表单:**网页注册登录页面、信息调查问卷、搜索引擎的输出框**form表单域:**浏览器在网页山专门用来划分出来一个用来划分出一个用来存储表单元素的区域1.form是块元素2.form标签的action属性内部是一个链接,只想的是提交表单时向哪个服务器地址发送表单数据。3.form标签的method属性内部存储着该表单向目标服务器传输数据时采用的哪种法式,有get和p...原创 2020-02-21 16:07:40 · 328 阅读 · 0 评论 -
前端第七课--圆角样式和渐变色样式
圆角样式和渐变色样式圆角样式border-radius:50px;(改变的是四个角的样式)border-radius:50px 20px(第一个值时左上角和右下角的样式同理第二个值是右上角和左下角的样式)border-radius:50px 20px 30px(第一个值是左上角,第二个值是右上角和左下角,第三个值是右下角)四个值的时候就是从左上角开始顺时针旋转设置样式;也可以使用%...原创 2020-02-15 18:10:37 · 377 阅读 · 0 评论 -
前端第三课--盒模型
标准盒模型设置div的大小后,如果放入的内容太多也会溢出来盒子边框设置:solid:直线边框 dashed:虚线边框dotted:点线边框 double:双实线边框border:20px solid black;(整边框设置样式)border-top-style:dashed;(单边框设置样式)border-top-color:red;...原创 2020-02-13 16:03:17 · 265 阅读 · 0 评论 -
前端第五课--默认显示类型和显示类型转换
前端第五课----(默认显示类型和显示类型转换)块级元素特性:block(div/p/dl/form/h1~h6/ol/ul)1.独占一行2.高度由里面的元素撑开3.宽度默认100%(继承父元素宽度)4.可以设置外边距/内边距6.p标签下不可以包裹块级元素(只存放文本)行内元素特性:inline:(a/b/em/i/img/span)1.和其他行内元素处于同一行2.不支持宽高...原创 2020-02-13 15:36:08 · 220 阅读 · 0 评论 -
前端第六课--背景样式
背景样式内容层和背景层背景层:背景图片是背景颜色的前景图(背景图片在北背景颜色上面);背景颜色:background-color:;初始值为transnent背景图片:background-image:url(路径或链接);初始值为nonerbga()和opaciy的区别:rbga是设置标签出内容以外的透明度;opacity是将整个标签设置为透明;给盒子设置边框后背景颜色和背景图片都会...原创 2020-02-13 15:29:56 · 216 阅读 · 0 评论 -
前端第四课--行内盒模型
行内盒模型**文本线:**共有四条线,作用于图片和文字的对齐,默认的对齐方式是基线。vertical-align:baseline(基线),middle(中线),top(顶线),下线(bottom);文本基线:文本基线的位置是每一种字体中英文字母x的底线决定的。文本底线:文本底线的位置是文本框底部的位置。文本顶线:文本框顶部(此时图片的顶部与文本顶线对齐,其余都是底部)。文本中线:文本...原创 2020-02-10 18:39:11 · 183 阅读 · 0 评论 -
前端前端第三课---复合选择器
前端第三课(复合选择器)**交集选择器:**若有两个标签不同但类名相同的情况下使用使用div.dd{}并集选择器:(选择类名为.dd和id为li的标签).dd,#lli{}后代选择器:(后代选择器要用空格隔开—相当于一本家谱从后代中随便找).名字空格ul{}子代选择器:(要用大于>号–层层去找).aa>p>a{ }相邻选择器:(中间用+号–只能选择相...原创 2020-02-09 18:26:32 · 105 阅读 · 0 评论 -
元素定位position:static,inhert,absolute,relative,fixed
position属性定义了一个元素在页面不居中的位置以及对周围元素的影响。该属性共有5个值:1.position:static2.position:inherit3.position:absolute4.position:relative5.position:flexdstaticstatic 为position属性的默认值,static元素会遵循正常的文档流,top,bottom,left,right属性不起作用。inheritinherit值如同其他css属性的inherit值,即继承转载 2020-11-09 17:39:55 · 1725 阅读 · 0 评论 -
前端第二课--基本的css选择器
前端第二课css注释语法:CTRL+/注释一行 CTRL+shift+/注释多行内部样式:(只能在当前文档使用 / **标签选择器:**h1-h6,div,p,span,ul,li,ol,dl,a,img等等**外部样式:**新创一个css文件夹,做大项目时用在头部通过link标签引入ctrl加回车跳转css文件rel="stylesheet"声明这是一个样式文件**类选择...原创 2020-02-05 22:19:44 · 128 阅读 · 0 评论 -
前端第一课
前端第一课注释标签: 用于代码的解释。DOCTYPE: 声明文档类型。lang: 默认本页面所用的语言类型{常用的语言有“en”:英语 “zh-CN”:中文)**charest:**字符编码集类型(常用“UTF-8”编码集俗称万国码,...原创 2020-02-04 18:10:53 · 1365 阅读 · 0 评论 -
前端十五课--3D动画、阴影,滤镜
3D动画、阴影,滤镜**3D动画原理:**在平面内建立一个三维坐标系,水平向右x正轴,垂直向下y正轴,由平面指向用户的轴称为z轴;3D动画必备:1.perspective:1000px;通过给坐标系添加perspective样式即可增加z轴;2.z轴的位置可以用perspective样式来设置默认位置perspective-origin:50% 50%;(元素的中心位置)例:0% 0%...原创 2020-03-01 22:54:28 · 271 阅读 · 0 评论 -
前端第十四课--transform样式详解
transform样式详解transform属性应用于元素的2D或3D转换;变化样式:**旋转(rotate);缩放(scale);移动(traslate);倾斜(skew);旋转:1.默认是绕中心旋转;2.transform:rotate(20deg);正值顺时针旋转,负值逆时针旋转;缩放:1.原点默认为中心点;2.transform:scale(x,y);里面的值是倍数;tr...原创 2020-02-26 03:18:45 · 3408 阅读 · 0 评论 -
前端十三课--触发式动画及主动式动画
动画的制作:1.用户需要定义第一帧和最后一帧的,中间的帧数由计算机辅助生成;2.用户定义第一帧到最后一帧的动画时间(根据此事件计算机算出具体需要帮我们生成的帧数)触发式动画:1.触发条件:hover(鼠标悬浮),:checked(选项选中), :active(输入框点击) 元素默认的状态赋予动画的第一帧,触发动作赋予元素动画的最后一帧;2.动画执行得时间:transition-du...原创 2020-02-26 02:20:28 · 862 阅读 · 0 评论 -
前端十一课--表格元素与表格布局
表格元素与表格布局table元素:1.在网页内容中创造一个表格内容;2.表格table的大小是由里面的内容撑开的,没有内容的空表不存在表格;3.table设置样式border"1";里面的数字表示边框的宽度;4.只有给table加上border属性之后才能够改变整个边框的样式(颜色)tr元素:1.在网页内容中创造表格中的一行 ,只有行的话不会在网页中间展示任何的效果,一个表格至少需...原创 2020-02-26 01:11:48 · 393 阅读 · 0 评论 -
前端第八课--浮动
前端第八课–浮动**浮动样式的核心原理:**正常情况下,盒子是占据一整行,多个盒子列向排布;设置浮动样式后box浮动,则后面的box2,box3向前移动占据box的位置;设置box2的浮动后,样式变为:box3浮动当父元素的宽度不足以放下所有的浮动元素时,那么超出父元素边界的元素会自动换行显示父元素设置为浮动,子元素不会受到影响,也就是浮动不会继承;浮动样式重点:1.浮动元素之...原创 2020-02-21 16:15:04 · 228 阅读 · 0 评论 -
css水平垂直居中方法总结
水平垂直居中已知高度和宽度的元素方案一:设置父元素为相对定位,给子元素设置绝对定位,top:0;right:0;left 0;bottom:0;margin:auto;方案二:使用水平居中,同时垂直居中的结合使用实现,上面两篇文章我们都分别提到过了,这里就不在赘述。方案三:使用flex布局也是水平居中和垂直居中的结合使用实现。...原创 2020-11-09 16:45:41 · 150 阅读 · 0 评论 -
css垂直居中方法总结
垂直居中单行的行内元素只需要设置单行行内元素的“行高等于盒子的高”即可;即line-height;.father{ width: 100px; height: 100px; background-color: red; } .son{ background-color: green; line-height: 100px; }</style><body> &l转载 2020-11-09 16:36:08 · 141 阅读 · 0 评论 -
CSS水平居中方法
水平居中行内元素首先看父元素是不是块级元素,如果是要实现水平居中,则直接给父元素设置 text-align:center;<style> .father{ text-align: center; }</style><body> <div class="father"> <span class="son">行内元素</span> </div>&l转载 2020-11-09 16:04:06 · 3003 阅读 · 0 评论