i98.-CSDN博客

响应式布局响应式开发的原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的设备划分尺寸区间（px）超小屏幕（手机） <768 小屏设备（平板） >=768 ~ <992 中等屏幕（桌面显示器） >=992 ~ <1200 宽屏设备（大桌面显示器） >=1200 响应式布局容器响应式需要一个父级作为布局容器，来配合自己元素实现变化效果原理：在不同的屏幕下，通过媒

2022-05-18 16:15:44 182

目录Lessless变量 less编译（需要插件） less嵌套 less运算rem适配方案rem实际开发适配方案 rem适配方案技术使用技术方案1LessCSS扩展语言，也叫CSS预处理器。作为CSS的一种样式的扩展，它并没有较少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。它在CSS的语法基础上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像他的名称速配说的那样，Less可以让.

2022-05-17 15:57:38 81

原创 446节---------5月16日

流式布局（百分比布局）也称非固定像素布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充流式布局方式是移动 Web开发实用的比较常见的布局方式...

2022-05-16 21:08:54 76

原创 401节---------5月14日-----移动web开发

视口就是浏览器显示页面内容的屏幕区域。可以分为布局视口，视觉视口和理想视口。布局视口一般移动设备的浏览器都默认设置了一个布局视口，用来解决早起Pc端页面在手机上显示的问题 ios，android基本都将这个视口分辨率设置为989px，所以PC上的网页大多都能在手机上显示，只是元素看上去很小，一般默认可以通过手动缩放网页。视觉视口它是用户正在看到的网站的区域我们可以通过缩放去操作视觉视口，但是不会影响布局视口，布局视口任然保持原来的高度理想视口需要手动添写mcta...

2022-05-14 14:53:06 87

原创补充flex属性---------5月9日

Flex弹性盒子用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意：设置了flex布局之后，资源股市的float、clear和vertical-align属性将失效采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉

2022-05-07 15:06:18 98

原创 389节---------5月5日-----PC端完结

CSS动画动画的基本使用分为两步：先定义动画再使用（调用）动画用keyfremes定义动画（类似定义类选择器）语法：@keyframes 动画名称 { 0%{ width：100Px; } 100%{ width：200px; } }注意：0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。在@keyframes中规定某项CSS样式，就能创建由当前样

2022-05-05 21:03:06 116

原创 366节---------5月4日

2D转换可以实现元素的位移、旋转、缩放等效果移动：translate 旋转：rotate 缩放：scale移动translate语法：transform: translate(x,y);或者分开写transform: translateX(n);transform: translateY(n);重点：定义2D转换中的移动，沿着X和Y轴移动元素 translate最大的优点：不会影响其他元素的位置 translate中的百分比单位是相对于自身元素的translat

2022-05-04 19:10:00 131

原创 297节----------5月3日

CSS新增选择器属性选择器可以根据元素特定属性来选择元素。E[att]选择具有att属性的E元素 E[att="val"]选择具有att属性且属性值等于val的E元素 E[att^="val"]匹配具有att属性且值以val开头的E元素 E[att$="val"]匹配具有att属性且值以val结尾的E元素 E[att*="val"]匹配具有att属性且值中含有val的E元素结构伪类选择器主要根据文档...

2022-05-02 20:52:24 126

原创 279节---------5月1日

HTML5新增的语义化标签<header>头部标签 <nav>导航标签 <article>内容标签 <section>定义文档某个区域，可以理解为大号的div <aside>侧边栏标签 <footer>尾部标签注意：这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次在IE9中，需要吧这些元素全部转换为块级元素其实，移动端更喜欢用这些标签 HTML5还增加了很多其他标签HTM..

2022-05-01 11:13:48 91

原创 279节---------5月1日

HTML5新增的语义化标签<header>头部标签 <nav>导航标签 <article>内容标签 <section>定义文档某个区域，可以理解为大号的div <aside>侧边栏标签 <footer>尾部标签注意：这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次在IE9中，需要吧这些元素全部转换为块级元素其实，移动端更喜欢用这些标签 HTML5还增加了很多其他标签HTML5..

2022-05-01 11:11:23 100

原创 273节---------4月29日

溢出的文字省略号显示单行文本溢出显示省略号必须满足三个条件强制一行内显示文本超出部分隐藏文字用省略号替代超出的部分对应的代码分别为white-space：nowrap；（默认normal自动换行）overflow：hidden；text-overflow：ellipsis；多行文本溢出显示省略号overflow：hidden；text-overflow: ellipsis；/*变成弹性伸缩盒子模型*/display：-webkit-box；/*在第

2022-04-29 19:00:34 191

原创 264节---------4月28日

字体图标一种高效的图标使用方式，显示的是图表，本质属于文字是一些网页常见的小图标，可以直接网上下载推荐下载网站icomoon字库阿里iconfont字库字体图表的使用下载完毕之后，注意原先的文件不要删把下载包里的fonts文件夹放入页面根目录下打开style.css文件，从开头选择到block，直接复制到CSS编辑器中（在CSS样式中全局声明字体，一定要注意文件路径的问题） html标签内添加小图标，粘贴到<span>里给<span>指

2022-04-28 20:50:37 762

原创 254节---------4月27日

元素的显示与隐藏常见于页面里的小浮窗，可以显示或隐藏，常用的有以下三种：display显示隐藏 visibility显示隐藏 overflow溢出显示隐藏display属性用于设置一个元素如何显示display：none；隐藏对象 display：block；除了转换为块级元素外，同时还有显示元素的意思display隐藏元素后，不再占有原来的位置visibility可见性visibility：visible；元素可见 visibility：hidden；元素隐藏隐藏元素

2022-04-27 18:00:35 139

原创 244节---------4月25日

固定定位元素固定于浏览器可视区的位置，主要应用场景：可以在浏览器页面滚动时元素的位置不会改变语法：fixed选择器{position：fixed；}特点：以浏览器的可视窗口为参照点移动元素跟父元素没有关系不随着滚动条而滚动固定定位不在占有原先的位置小技巧：固定在版心右侧位置让固定定位的盒子left:50%，走到浏览器可视区的一般位置，再让盒子加上margin-left:版心宽度的一半距离，多走版心宽度的一半距离。粘性定位可以被认为是相对定位和固定定位的混合。

2022-04-25 11:07:29 78

原创 229节---------4月24日

定位含义：将盒子定在某个位置。所以定位也是在摆放盒子，按照定位的方式移动盒子定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式边偏移则决定了该元素的最终位置定位模式定位模式决定元素定义方式，通过position 设置，有以下四个值static静态定位 relative相对定位 absolute绝对定位 fixed固定定位边偏移就是定位的盒子的最终位置，有top,bottom,left,right四个值如top：80px 指的是距离父元素上边线的距离

2022-04-24 21:34:07 50

原创 194节---------4月19日

浮动布局注意点浮动和标准流的父盒子搭配先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置一个盒子里有多个盒子，如果一个元素浮动了，那么其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响后面的标准流，不会影响前面的标准流清除浮动由于父盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子的高度为0时，就会影响下面的标准流盒子。清除浮动的本质就是清除浮动元素造成的影响如果父盒子本身有高度，则不需要清除浮动清除浮动后，父级就会根据浮动的子盒子自动监

2022-04-19 14:14:26 158

原创 180节---------4月18日

浮动传统网页布局的三种方式：普通、浮动、定位一个完整的网页必须包含三种布局方式普通流（标准流）标签按照规定好的方式排列块级元素独占一行，从上到下排列常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右排列，碰到父元素边缘自动换行。常用元素：span、a、i、em浮动浮动可以改变元素标签默认的排列方式最典型的应用：可以让多个块级元素以行内排列显示网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动

2022-04-18 11:39:05 64

原创 169---------4月17日

快捷键：shift+alt可以实现多行操作，如多行添加文字。去掉li前面的项目符号（小圆点）：list-style: none;圆角边框语法：border-radius: 10px;radius半径原理：（椭）圆与边框的交集形成的圆角效果参数值可以为数值或百分比的形式若要设置圆形边框，则将radius设置为盒子高度的一半，即50% 该属性是一个简写属性，可以跟多个数值精确设置一个角，border-top-left-radius 两个数值，分别代表左上右下、左下右上..

2022-04-17 20:40:07 47

空空如也

空空如也