css
关注
分享
扫一扫
zhou_shadow
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS渡一教程学习笔记(三)--字体、颜色
字体设置，是CSS中比较常见的需求，这里列出常见的字体配置代码如下:<style> div{ /*设置字体大小*/ font-size: 20px; /*设置字体粗细*/ font-weight: bold; /*设置字体正常\斜体*/ font-style:normal; /*设置字体*/ ...原创 2019-06-14 10:35:18 · 446 阅读 · 0 评论 -
CSS渡一教程学习笔记(十二)--伪元素
伪元素存在于任意一个HTML标签里面。可以通过CSS显示展示出来。任意一个标签元素在创建时都带有两个伪元素分别为before和after,伪元素可以和正常元素一起使用,但是伪元素没有正常的元素结构。伪元素结构上存在，但没有写在HTML代码里面，可以被css正常操作，但是没有HTML标签结构，也即是可以当成HTML元素，但是没有元素结构，也就是所谓“伪元素”。其中伪类都是行级(内联)元素。类...原创 2019-06-14 17:37:43 · 363 阅读 · 0 评论 -
CSS渡一教程学习笔记(十三)--文字溢出处理，背景图片处理，企业开发经验
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字溢出</title> <style> .single-text{ width:200px; ...原创 2019-06-14 17:42:09 · 536 阅读 · 0 评论 -
CSS渡一教程学习笔记(十五)--背景图片链接处理企业开发经验
图片链接代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景图片实际中的应用</title> <style> a { /*第一种方案*/ ...原创 2019-06-14 23:00:34 · 269 阅读 · 0 评论 -
CSS渡一教程学习笔记(十六)--CSS要点补充
关于页面两端的缩放以及顶部目录排列的需求代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css要点补充</title> <style> *{ margi...原创 2019-06-15 09:25:07 · 282 阅读 · 0 评论 -
CSS渡一教程学习笔记(一)--注释、引入CSS、CSS加载顺序
第一天1、css注释 css注释的快捷键为：ctrl+? 快速注释/取消代码注释 编程理念：编程10分，调试8分，代码2分，交流1分原创 2019-06-10 07:12:31 · 486 阅读 · 0 评论 -
CSS水平居中+垂直居中+水平/垂直居中的方法总结
转自:杜媛媛原文水平居中行内元素块级元素方案一：(分宽度定不定两种情况)方案二：使用定位属性方案三：使用flexbox布局实现（宽度定不定都可以）垂直居中单行的行内元素多行的行内元素块级元素水平垂直居中已知高度和宽度的元素未知高度和宽度的元素方案一：使用定位属性方案二：使用flex布局实现水平居中行内元素首先看它的父元素是不是块级元素，如果是，则直接给父元素...转载 2019-06-09 18:26:09 · 2264 阅读 · 0 评论 -
CSS渡一教程学习笔记(二)--选择器
CSS选择器常用选择器id选择器 1.一个元素只能有唯一的id值,也就是一对一关系 #{}类选择器(class选择器) 也就是多对多关系 .{}标签选择器 di{} 无论标签是否被嵌套,没被嵌套的，和已经被嵌套的都会被选中通配符选择器 *{}属性选择器 [id]{},[id=‘demo1’]选择器权重!important>行间样式style>id优先级>cl...原创 2019-06-11 09:25:27 · 258 阅读 · 0 评论 -
CSS选择器：#id和.class中间有空格和无空格的区别
相信大家都知道 .class1 .class2 和 .class1.class2 是两种不同的选择规则，但具体怎样不同呢？首先中间有空格的情况：是选择到.class1类下的.class2类子节点，即.class2类的节点要是.class1类子节点代码： <style> .class1 { color: black; } .clas...转载 2019-06-11 09:46:02 · 4879 阅读 · 3 评论 -
CSS实现文字和图片的水平垂直居中
关于文字和图片的水平垂直居中，在前端界绝对算是一个老生常谈的问题了，尤其是垂直居中，什么千奇百怪的解法都能想的出来。下面我就总结一些比较常用的方法：一、文本的水平垂直居中：1、水平居中： 一个text-align：center 就搞定了。2、垂直居中：（1）、单行文本只要height值等于line-height值就 有且仅占有一行的情况下垂直居中 ps：h...转载 2019-06-09 19:08:52 · 16263 阅读 · 1 评论 -
CSS渡一教程学习笔记(十一)--浮动模型
模型总共有3中1.盒子模型2.层模型3.浮动模型:float:left/right;浮动元素浮动元素中占位边界不足，则自动换行。浮动元素产生了浮动流，所有产生了浮动流的元素块级元素看不到他们，产生了BFC的元素和文本类(inline)属性的元素以及文本都能看到浮动元素。代码:<!DOCTYPE html><html lang="en"><hea...原创 2019-06-14 17:21:41 · 283 阅读 · 0 评论 -
CSS渡一教程学习笔记(四)--利用border刻画一个三角形
今天笔记刻画一个三角形。估计以后会用的到，所以在这里记一下 <style> .div1{ /* width:0px; height:0px; border:50px solid red; !*可以设置为透明transparent*! border-to...原创 2019-06-14 11:23:56 · 245 阅读 · 0 评论 -
margin：0 auto；居中的原理
margin居中原理 刚刚学习CSS的时候，经常需要用到块元素居中，于是乎度娘、google一番，当然查专业资料建议用google，题外话！学会了给块元素设置个width，然后给margin特性设为0 auto，如此块元素便缴枪投降，乖乖居中了。 那是为什么呢？这中间的原理和实现过程是如何呢？夜深了，待我喝杯咖啡，慢慢说来！ 上一篇文章谈到了盒子模式，这个居中的原理...转载 2019-06-09 10:12:30 · 3892 阅读 · 0 评论 -
CSS渡一教程学习笔记(五)--盒子模型
盒子模型原理 网页：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。特点 想象一个盒子，它有：外边距（margin）、边框（border）、内边距（pad...原创 2019-06-14 15:16:57 · 367 阅读 · 0 评论 -
CSS渡一教程学习笔记(六)--层模型、position定位。
层模型如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。层模型有三种形式：1、绝对定位(position: absolute)2、相对定位(position: relative)3、固定定位(position: fixed)绝对定位和相对定位 有以下四个属性...原创 2019-06-14 15:29:43 · 494 阅读 · 1 评论 -
CSS渡一教程学习笔记(七)--单行文字水平居中，pm与em的区别。
单行文字水平居中div{ width: 400px; height: 400px; border: 1px solid black; /*水平居中*/ text-align:center; /*单行垂直居中*/ line-height: 400px; /*line-he...原创 2019-06-14 15:39:16 · 1307 阅读 · 0 评论 -
CSS渡一教程学习笔记(八)--行级元素、块级元素、行级块元素。
1、行级元素: 也被称为内联元素 inlinefeature:1.内容决定元素所占的位置2. 不可以通过css改变宽高3.span,strong,em,a,del2、块级元素: 也被称为blockfeature:1.独占一行2.可以通过css改变宽高3.div,p,ul,li.ol,form,address3、行级块元素: 称为inline-blockfeature:...原创 2019-06-14 16:00:57 · 365 阅读 · 1 评论 -
CSS渡一教程学习笔记(九)--Block Format Context
问题:父子嵌套的关系中，垂直方向的marin-top的父子元素是结合在一起的，会取父子元素中的最大值。造成的结果就是父级元素的“棚”好像不存在一样，也即是俗称“margin塌陷”只能弥补，不能解决。代码:<style> *{ margin:0px; padding:0px; } ....原创 2019-06-14 16:57:33 · 627 阅读 · 0 评论 -
CSS渡一教程学习笔记(十)--margin的合并问题
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>margin合并问题</title> <style> .span1{ background-color: ...原创 2019-06-14 17:05:46 · 274 阅读 · 0 评论 -
CSS利用display:flex实现ul-li中tab垂直居中布局
老规矩，先看看需求:要求在移动端实现echart表格下面添加点击按钮，实现类似与tab那种echart表格切换。按钮布局类似于如下结果:尝试过一些方法，发现可以利用display:flex、 flex-wrap: nowrap;实现类似效果代码如下： <style> ul li{ /*去除ul中list的“圆点”之类的样式*/ ...原创 2019-06-12 11:20:38 · 6366 阅读 · 0 评论