CSS
关注
分享
扫一扫
文章平均质量分 95
落花别有意 流水似无情
一个学无之境的程序员
展开
-
CSS中flex布局
flex布局，也称为弹性盒子布局，这是一种简单而强大的布局方式，我们通过弹性盒指明控件的分布方式、内容的对齐方式和元素的排布顺序，把不同的组件放置在页面中，内容可以轻易的横向或者是纵向的进行排布。基本属性flex依赖父子元素，在元素上声明display:flex或者display：inline-flex便可以激活弹性和子布局，而这个元素称之为弹性容器，弹性容器下面的子元素就是弹性盒子布局元...原创 2019-12-31 16:06:03 · 462 阅读 · 2 评论 -
CSS栅格布局grid详解
栅格布局分为常规栅格和行内栅格，值分别为display:grid；和display:inline-grid；但是大多数栅格布局都是块级的。这里有一个需要注意的是，如果我们给一个标签设置了栅格布局，有的css属性和功能也就无法使用了，具体如下：栅格容器上的所有column属性（column-count、columns等）都会被忽略。栅格元素没有::first-line和::first-let...原创 2019-11-13 17:33:51 · 3394 阅读 · 1 评论 -
纯CSS实现幻灯片效果
先上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>css幻灯片</title> <link rel="stylesheet" href=""></head><style>...原创 2019-11-11 11:19:05 · 1321 阅读 · 0 评论 -
前端项目减少页面加载事件的办法，优化页面的方法
1、优化图片（gif格式的图片需要的颜色较少，一般都比较小）2、优化CSS：像margin-top、margin-bottom这种直接合并到一起，公用的样式提出来放到一个一起写3、网址后面加一个'/'，如'www.baidu.com/'，这样可以直接判断这个文件是什么文件类型，或者是什么目录4、减少http请求（合并文件、合并图片）5、标明高度和宽度（如果浏览器没有找到这两个参数，...原创 2019-11-11 10:08:43 · 426 阅读 · 0 评论 -
css淘宝通用样式
淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form,fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input,...原创 2019-10-28 14:09:02 · 2612 阅读 · 0 评论 -
CSS实现正方形自适应大小
1、给标签宽度但是不设置高度，设置内边距padding，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自适应正方形</title> <style type="text/css"> *{ ma...原创 2019-10-22 09:25:14 · 646 阅读 · 0 评论 -
CSS清除浮动方法
1、在浮动元素后面添加一个空的标签，并且让这个标签样式为：clear:both;2、父元素直接设置一个高度，放置子元素高度超过父元素高度，无法正常显示3、父元素overflow:hidden；超出的部分隐藏，但是有一个缺点，当内部浮动元素过多的时候就会造成多出的浮动元素不会自动换行，从而造成超出内容的元素显示不出来；4、伪类元素:after清楚浮动，其实和第一个方法原理类似如下：...原创 2019-10-21 14:42:28 · 145 阅读 · 0 评论 -
CSS权重值计算和选择器优先级
一、权重的值计算以及选择器权重值大小1、!important放在样式的最后面是最优先的，权重值是10000；2、内联样式权重值1000，优先级仅次于！important，一般都是在标签内部书写，如：‘<div style="color:red;"></div>’3、id选择器权重值是100，如：#first；4、类选择器、伪类选择器、属性选择器的权重值是10...原创 2019-10-21 13:58:43 · 356 阅读 · 0 评论 -
CSS元素垂直居中几种方法！！
一、子元素设置vertical-align: middle;但是有一个前提必须是子元素为行内元素；并且单独的设置vertical-align: middle;是无效的；如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>垂直居中<...原创 2019-10-21 09:42:18 · 225 阅读 · 0 评论 -
CSS盒子模型类型和解析
css盒子模型分为两种：W3c标准盒子模型和IE盒子模型，下面来回顾一下盒子模型的区别。其实盒子模型主要包括一下几个部分：margin(外边距) - 清除边框外的区域，外边距是透明的。border(边框) - 围绕在内边距和内容外的边框。padding(内边距) - 清除内容周围的区域，内边距是透明的。content(内容) - 盒子的内容，显示文本和图像。第一种W3C盒子模型...原创 2019-10-17 10:08:33 · 3036 阅读 · 1 评论 -
CSS中jquery中input和select中option选中和取消选中
input选中$(".checkAll").prop("checked",'checked');input取消选中$(".checkAll").prop("checked",'');select中option全部设置选中$('#sel1 option').prop("selected",'selected');select中option全部设置未选中$('#sel1 o...原创 2019-04-19 17:54:32 · 1751 阅读 · 0 评论 -
鼠标放在图片或者div上图片/div会上浮，移走鼠标会回到原来的位置
根据CSS3里面的动画属性，结合Jquery实现简单的图片特效html代码js代码// 鼠标放在图片上图片上下跳动$('.operative-area>img').mouseover(function(){$(this).animate({"top":"-10"});}).mouseout(function(){$(this).animate({"top":"...原创 2019-04-17 17:01:44 · 4836 阅读 · 0 评论