css
关注
分享
扫一扫
test
陈迹·清欢
这个作者很懒，什么都没留下…
展开
-
纯css实现三角形
先看一个例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .example{ width: 40px; ...原创 2020-03-24 15:02:06 · 153 阅读 · 0 评论 -
CSS布局(二) 圣杯布局
什么是圣杯布局圣杯布局是来源于该布局效果类似圣杯而得名。简单来说，就是三行三列布局。第一种解决方案(calc)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <style&...原创 2020-03-22 12:14:14 · 247 阅读 · 0 评论 -
css保持浮层水平垂直居中的几种方法
1.利用flexbox布局 .parent{ width: 100%; height: 37.5rem/* 600px */; background: #09c; display: flex; justify-content:center; /* 水平居中 */ align-items:center; /* 垂直居中 */...转载 2020-03-14 15:42:36 · 354 阅读 · 0 评论 -
css link和@import区别用法
1、link语法结构<link href=“CSSurl路径” rel=“stylesheet” type=“text/css” />实际应用截图：2、@import语法结构@import + 空格+ url(CSS文件路径地址);1）在html中<style type=“text/css”>@import url(CSS文件路径地址);</sty...转载 2020-03-13 21:55:29 · 117 阅读 · 0 评论 -
前端样式优先级
今天进行了一个前端的笔试，问到了样式优先级的选择问题，说真的，我只能凭感觉判断一些优先级，到了复杂情况还真不一定能判断出来，所以来总结一下。一般情况一般结论就是：通用选择器(也就是*)<元素（类型）选择器(比如p标签)<类选择器(.class{…})<属性选择器([attribute=value]之类的)<伪类(:hover)<ID 选择器(#id{…})<...转载 2020-03-13 21:49:28 · 600 阅读 · 0 评论 -
Flex布局教程：实例篇
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html转载 2020-03-10 16:06:26 · 142 阅读 · 0 评论 -
Css选择器
CSS选择器用于选择你想要的元素的样式的模式。"CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。选择器示例示例说明CSS.class.intro选择所有class="intro"的元素1#id#firstname选择所有id="firstname"的元素1**选择所有元素2elementp选择所有<...转载 2020-03-10 12:28:57 · 131 阅读 · 0 评论 -
float详解
使得元素脱离文档流有两种方式。第一种是通过定位，第二种方法就是使用浮动。浮动(float)，是一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局；恨，因为浮动之后遗留下来太多的问题需要解决，特别是 IE6-7（以下无特殊说明均指 windows 平台的 IE 浏览器）。如果不详细了解浮动，可能会觉得它很神秘也很复杂，很多网站的效果好看，但是自己就是做不出来。很多初学者都会有这样的疑问...转载 2020-03-09 23:15:38 · 1729 阅读 · 0 评论 -
Flex 布局教程：语法篇
作者： 阮一峰原文地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方...转载 2020-03-09 18:07:35 · 123 阅读 · 0 评论 -
css布局 (一)水平居中布局
(一)第一种解决方案(text-align: center+display: inline-block)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>第一种水平居中布局方案</title> <style...原创 2020-02-25 19:46:49 · 587 阅读 · 0 评论 -
display:inline-block，block，inline的使用
我们一般学习先接触到的就是block和inline元素，block是块级元素，inline是行级元素。这些都是display的属性，在css中设置display:inline即可。(其余类同)块级元素会占用当前容器的一行，把其余元素挤开，可以设置width，height，margin与padding属性，常见块级元素：address - 地址blockquote - 块引用center...原创 2020-02-25 11:58:56 · 137 阅读 · 0 评论 -
float,position,relative,absolute,文档流这些关键术语解惑
在CSS编程中，相信很多人对于上面标题中的这些术语有很大的疑惑，接下来让我们一点点拨开它们的神秘面纱，以及纠正几个关键性的错误，通篇文章我就不提供图示了，我想能看到我这篇文章的人估计也对这些术语表现出来的图示已经很清楚了，这里就不再麻烦上图了。在解释之前，首先说几本CSS的经典之作（要搞前台的人应该必读的）： 1，Cascading Style Sheets Level 2 Revisi...转载 2020-02-24 09:38:49 · 189 阅读 · 0 评论