wxy1345886334-CSDN博客

原创 2021-05-27 Day17-雪碧图、浏览器内核

雪碧图、精灵图、css sprites- 将多个图片整理在一张图片上，通过背景定位的方式引入不同图片- 背景图一般是小图标或者装饰作用的图片- img一般是页面的内容- 图片整合的优势：1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度2）通过整合图片来减小图片的体积- 图片整合的原则1.根据实际需求，小图标尽量上下排列(防止后面不必要的背景图)2.小图标之间尽量留出足够的空间3.整合大图片的背景一定是透明的4.列表符号的图标尽量放在图片最右侧5.一般情况下，小图标

2021-05-27 17:16:13 167

原创 Day16-媒体查询、VW+rem布局

回顾@media screen and (min-width:1000px){ .box{ float:left; } .para{ float:left; } .father:after{ }}@media screen and (max-width:600px){ .box{ } .para{ }}@media screen and (min-width:400px) and (max-width:600px){ .box{ } .pa

2021-05-27 17:14:46 88

原创 Day15-多列、移动端布局

回顾1.怪异盒模型与标准盒模型的区别标准盒模型width仅是内容区域的宽度,怪异盒模型width是包含边框和内边距的标准盒模型box-sizing:content-box; 怪异盒模型box-sizing:border-box;2.弹性盒父元素： display:flex; flex-direction:column; justify-content:; align-items:; flex-wrap:wrap; align-content:; 子元素： al

2021-05-27 17:13:53 105

原创 Day14-弹性盒、怪异盒模型

回顾1.css3新增的选择器 div~p [class^="a"] [class&="a"] [class*="a"] :last-child :nth-child() :nth-last-child() :only-child :first-of-type :last-of-type :nth-of-type() :nth-last-of-type() :only-of-type :root :empty :not() :target UI元素状态伪类:

2021-05-27 17:13:11 59

原创 Day12- H5新增

回顾3d转换位移 transform:translateZ(); transform:translate3d(x,y,z); 旋转 transform:rotateX(); transform:rotate3d(x,y,z,30deg); 缩放 transform:scaleZ(); transform:scale3d(x,y,z); 景深perspective ***子元素保留3d转换位置transform-style:preserve-3d; 元素背面不可见bac

2021-05-27 17:09:43 61

原创 Day10-渐变、过渡、位移

回顾1.表格表格行分组thead,tbody,tfoot 表格标题<caption></caption> - 单元格合并border-collapse:collapse; - 单元格间距border-spacing:20px; - 标题位置caption-side:bottom; - 固定表格布局table-layout:fixed; - 无内容单元格隐藏empty-cell:hide; - 边框th,td{border:1px solid red;}2.表单

2021-05-26 20:43:18 62

原创 2021-05-26 Day09-BFC和表单、表格补充

回顾1.width:auto;height:auto;2.min-width/max-width min-height/max-height body{ min-width:1200px; }3.平分body高度 html,body{ height:100%; }4.高度塌陷问题 - 父容器固定高度 - 父容器添加oveflow:hidden;(触发了BFC) - 父容器:after{ content:""; display:block; height:0;

2021-05-26 20:42:11 38

原创 2021-05-26 Day-08元素选择器高度塌陷

回顾透明度 background:rgba(255,255,255,0.4); opacity:0.4;有继承性 filter:alpha(opacity=40);锚点 <a href="页面路径#box">点击的位置</a> <div id="box"></div>定位相对定位position:relative; - 参考物：元素本身 - 不脱离文档流 - 偏移距离 - 元素位置微调绝对定位position:absol

2021-05-26 20:40:22 68

原创 2021-05-26 Day-07 定位和元素居中办法

回顾1.元素分类：块级、行内元素2.img和input属于行内块、置换元素3.display: block块 inline行内 inline-block行内块 none无定位position1.相对定位position:relative; - 参考物：元素本身位置 - 是否脱离文档流：否 - 偏移距离： top自己的顶部距离自己顶部的距离 bottom自己的底部距离里自己底部的距离 left right - 用处：实现元素位置的微调,而且保留了元素的初始位置2.

2021-05-26 20:39:05 45

原创 2021-05-26 Day-06元素的分类

回顾框模型内容(width和height)、内边距、边框、外边距外边距：单方向外边距margin-top margin:10px 20px 30px 40px; margin:0 auto; 垂直方向外边距相遇问题,以大值为准无法设置尺寸的行内元素(span,a,b,...)垂直方向外边距不生效外边距传递内边距 padding-top上内边距溢出属性 overflow:visible默认值,溢出可见 / hidden溢出隐藏/scroll滚动条/auto; overf

2021-05-26 20:37:44 37

原创 2021-05-26 Day-05盒子模型、单行文本省略效果

不能设置尺寸的元素行内元素中b,strong,i,em,u,s,del,span,ahtml标签- 块级元素：div,p,h1-h6,ul,ol,li,dl,dt,dd,hr,form,table,tr,td- 行内元素：b,strong,i,em,u,s,del,span,sup,sub,a,br,img,input- 行内元素中img,input可以设置尺寸- 空标签：<img/><input/><br/>- alt和title的区别？css样式表

2021-05-26 20:36:44 48

原创 2021-05-26 Day04-浮动、背景

清除元素的默认样式,css reset，css重置*{ margin: 0; padding: 0;}li{ list-style: none;}img{ vertical-align: middle;}文本属性1.字体大小 font-size:12px; 面试题：em和rem的区别 em是父元素字体大小的倍数 rem是根元素html字体大小的倍数2.img的基线对齐 img有一个属性默认值为基线对齐,如下 img{ vertical-align:baseli

2021-05-26 20:31:31 74

原创 2021-05-26 Day03-css选择器+属性

回顾1.表格 table>tr*3>td*3 table的属性： border="1" width="100" height="200" cellspacing=""外边距 cellpadding=""内边距 tr的属性： height="200"高度 align="center居中/left左/right右" valign="top上/bottom下/middle居中" td的属性： width="100" height="200" ali

2021-05-26 17:49:11 77

原创 Day02-表格表单+面试题：link与import方法区别

表单<form action="" method="" name=""></form> action=""提交的地址 method=""提交方式 method="get" 默认值,明文提交 method="post" 密文提交 name=""起个名字1.文本框 <input type="text" name="username" value="请输入您的用户名"/> name="username"起个名字 value=""控件上的文本2.密码框

2021-05-26 17:47:14 90

原创 2021-05-26 Day01-html标签

***html标签块级元素1.div容器 <div></div>2.p段落元素 <p></p> 垂直方向有段落间距3.标题元素 <h1></h1>一级标题 <h2></h2>二级标题 <h3></h3>三级标题 <h4></h4>四级标题 <h5></h5>五级标题 <h6></h6>六级标题

2021-05-26 17:45:28 120

wxy1345886334的博客