CSS/CSS3
文章平均质量分 57
Blockchain Explorer
雄关漫道真如铁,而今迈步从头越。
真想做,总有办法;
不想做,总有理由。
展开
-
CSS基本介绍
一、什么是CSSCSS (Cascading Style Sheets,层叠样式表)是用来控制网页在浏览器中的显示外观的声明式语言。浏览器会根据 CSS 的样式定义将其选定的元素显示为恰当的形式。 CSS 与 HTML 和 JavaScript 并称 Web 三大核心技术。 CSS 不区分大小写(但在某些选择器上会区分大小写)二、注释CSS中的注释以 /* 开始并以 */ 结束...原创 2018-08-30 18:58:53 · 399 阅读 · 0 评论 -
CSS文字与文本样式之文本行高line-height详解
line-height: 对于代替元素,line-height没有影响 对于非代替元素,line-height才有影响 对于块级元素,css属性line-height指定了元素内部line-box的最小高度 对于行内元素,line-height用于计算line-box的高度 默认值: normal 可继承值: normal ...原创 2018-09-03 19:17:06 · 6727 阅读 · 0 评论 -
CSS基本样式之列表
一、 list-styleCSSlist-style属性是设置list-style-type, list-style-image 和 list-style-position 的简写属性list-style: none; 是否是继承属性 yes作用: 用来设置列表横向排列list-style: none;<head> <me...原创 2018-09-03 19:25:12 · 402 阅读 · 0 评论 -
CSS 之 盒模型
CSS盒模型也称为框模型。一、基本介绍1、CSS盒模型是网页布局的基础。一般网页的布局都是DIV+CSS布局。所以在盒模型这一块我们主要学习块级元素的盒模型属性。 2、在一个文档中,每个元素都被表示为一个矩形的盒子。浏览器渲染网页布局时会通过盒模型的相关属性来确定这些盒子的尺寸,边框方面和位置 3、在CSS中,使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内...原创 2018-09-03 20:17:55 · 295 阅读 · 0 评论 -
CSS盒模型之隐藏元素
一、基本介绍元素隐藏实现 display display:nonevisibility visibility:hiddenopacity opacity:0二、代码示例<head> <meta charset="UTF-8"> <title>隐藏元素<...原创 2018-09-03 20:24:46 · 193 阅读 · 0 评论 -
CSS盒模型之属性总结
一、width 和 heightwidth 属性指定了元素内容区的宽度 height 属性指定了元素内容区的高度。 取值:长度单位(px值)百分比 参照的是其包含块的宽度/高度auto 浏览器将会为指定的元素计算并选择一个宽度.语法 width: 200px; height: 200px; 初始值 auto ...原创 2018-09-03 20:34:59 · 4315 阅读 · 0 评论 -
CSS 之 浮动(float)
一、基本介绍float 属性最初只用于在成块的文本内浮动图像(文字环绕图片),但是现在它已成为在网页上创建多列布局的最常用工具之一。 取值: left:表明元素必须浮动在其所在的块容器左侧的关键字。 right:表明元素必须浮动在其所在的块容器右侧的关键字。 none:表明元素不进行浮动的关键字。 语法: float: left; 初始值 none ...原创 2018-09-03 20:43:20 · 224 阅读 · 0 评论 -
CSS 之 定位(position)
一、基本介绍CSS position属性用于指定一个元素在文档中的定位方式。top,right,bottom 和 left 属性则决定了该元素的最终位置。取值: static 该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。 relative(相对定位) 该关键字下,元素先...原创 2018-09-03 21:07:13 · 522 阅读 · 0 评论 -
CSS 之 BFC
一、Box和Formatting Context在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。 1、Box: CSS布局的基本单位,Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatt...原创 2018-09-03 21:18:08 · 240 阅读 · 0 评论 -
CSS 之 a.active和a:active的区别
a.active和a:active的区别a.active 是对class=active的a标签生效,a:active 是对按下的a标签生效原创 2018-09-03 21:22:03 · 7511 阅读 · 0 评论 -
CSS基本样式之背景
一、css2之background-colorCSS属性中的 background-color 会设置元素的背景色。语法:background-color: red; 初始值 transparent 是否是继承属性 否二、 css2之background-imageCSS background-image属性用于为一个元素设置一个或多个背景...原创 2018-09-03 19:03:49 · 258 阅读 · 0 评论 -
CSS预处理器之Less
less Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。原创 2018-09-04 21:12:50 · 769 阅读 · 0 评论 -
CSS3布局扩展 之 Flex
一、基本介绍 flex 是一个CSS的display 属性中新添加一个值。 使用 display: flex;二、Flex 确定主轴及其方向 老版本 容器 容器的布局方向 -webkit-box-orient:horizontal/vertical...原创 2018-09-04 21:09:25 · 288 阅读 · 0 评论 -
CSS基本样式之文字与文本样式(1)Html元素的分类
1、HTML元素分类&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;HTML元素分类&amp;amp;lt;/title&am原创 2018-08-31 21:19:13 · 181 阅读 · 0 评论 -
空格和换行符造成3像素距离问题解决
2、解决a、img 之间的3px距离.html&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;!-- &lt;a&gt;&lt;img /&gt;&lt;/a&gt;之间的3px距离产生的原因原创 2018-08-31 21:21:10 · 558 阅读 · 0 评论 -
CSS基本样式之文字与文本样式(2)文字
一、字体:font-familyCSS属性font-family允许您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体 属性的值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体,或者是通过 @font-face 指定的可以直接下载的字体。 1、语法:font-family: Georgia, serif;初始值 depends on user ...原创 2018-08-31 22:46:10 · 277 阅读 · 0 评论 -
CSS基本样式之文字与文本样式(3)CSS3-自定义字体
一、@font-face @font-face:允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,可以消除对用户电脑字体的依赖 语法:@font-face {font-family: &amp;amp;quot;Damu&amp;amp;quot;; src:url(&amp;amp;quot;http://developer.mozilla.org//=VeraSeBd.ttf&amp;amp;quot;);原创 2018-08-31 22:50:49 · 473 阅读 · 0 评论 -
CSS基本样式之文字与文本样式(4)文本
一、行高:line-heightline-height CSS 属性用于设置多行元素的空间量。 1、语法: line-height: normal; 初始值 normal 是否是继承属性 yes2、取值:normal 取决于用户端。桌面浏览器(包括Firefox)使用默认值,约为1.2,这取决于元素的 font-family。 <长...原创 2018-09-01 08:10:42 · 273 阅读 · 0 评论 -
CSS 之样式表组成
一、基本介绍 flex 是一个CSS的display 属性中新添加一个值。 使用 display: flex;二、Flex 确定主轴及其方向 老版本 容器 容器的布局方向 -webkit-box-orient:horizontal/vertical...原创 2018-09-04 06:51:28 · 1727 阅读 · 0 评论 -
CSS选择器之基本选择器及其扩展
基本选择器原创 2018-09-04 20:40:34 · 261 阅读 · 0 评论 -
CSS选择器之属性选择器
02_属性选择器原创 2018-09-04 20:43:34 · 498 阅读 · 0 评论 -
CSS选择器之伪类与伪元素选择器
伪类与伪元素选择器原创 2018-09-04 20:57:19 · 352 阅读 · 0 评论 -
CSS选择器之声明的优先级
一、选择器的特殊性1、选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如 0,0,0,0 一个选择器的具体特殊性如下确定:1.对于选择器中给定的ID属性值,加 0,1,0,02.对于选择器中给定的各个类属性,属性选择,或伪类,加 0,0,1,0 3.对于选择器中的给定的各个元素和伪元素,加0,0,0,14.通配符选择器的特殊性为0,0...原创 2018-09-04 06:53:42 · 372 阅读 · 0 评论